九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP，暢享免費(fèi)電子書等14項(xiàng)超值服

開(kāi)通VIP

首頁(yè)

好書

留言交流

下載APP

聯(lián)系客服
用Ueditor為Asp.net mvc打造可視化HTML編輯器
                  在Asp.net WebForm時(shí)代，Web系統(tǒng)的HTML可視化編輯器可以使用FTB一類的控件，直接引入工具箱拖拉即可實(shí)現(xiàn)。但是在Asp.net MVC時(shí)代，直接使用服務(wù)器端控件是不符合MVC的標(biāo)準(zhǔn)和約束，會(huì)出現(xiàn)這樣或者那樣的問(wèn)題。UEditor似乎又是不錯(cuò)的一款可視化編輯器，有百度做后臺(tái)支撐，開(kāi)源，而且樣式漂亮，自定義容易……所以我決定在我的系統(tǒng)中使用Ueditor作為可視化編輯工具，但是因?yàn)閁editor支持了Php，并沒(méi)有合適asp.net mvc的應(yīng)用實(shí)例。所以我決定改造下Ueditor來(lái)滿足MVC下的需要。

首先、下載Uediotr，初次使用建議下載全版和實(shí)例，可以一一學(xué)習(xí)研究。下載地址：http://ueditor.baidu.com/download.html 

其次、在MVC中建立一個(gè)文件件，如圖

，然后把下載的文件夾中的幾個(gè)文件全部包含進(jìn)來(lái)
.

再次、我們?cè)贏sp.net mvc中可以建立一個(gè)測(cè)試Controller.在其View中輸入引用editor_config.js 和editor_ui_all_min.js 同時(shí)引用themes下面的ueditor.css。然后在需要出現(xiàn)

            編 輯框的地方輸入

  1. <textarea id="editor"></textarea>
  2.                     <script type="text/javascript">
  3.                         var editor = new baidu.editor.ui.Editor({
  4.                             UEDITOR_HOME_URL: '/Uedit/',
  5.                             iframeCssUrl: '/Uedit/themes/default/iframe.css', 
  6.                             initialContent: '',
  7.                              minFrameHeight: 550
  8.                         });
  9.                          editor.render('editor');
  11.                 </script>

          注意：UEDITOR_HOME_URL: '/Uedit/',

                 iframeCssUrl: '/Uedit/themes/default/iframe.css', 這兩行js為Ueditor放置的目錄和iframe.css所在的位置。然后運(yùn)行?？梢园l(fā)現(xiàn)Ueditor的基本樣子已經(jīng)出現(xiàn)，但是圖片上傳部分存在問(wèn)題。

最后、修改圖片上傳部分的問(wèn)題。找到\UEdit\dialogs\image。里面有兩個(gè)php文件，可以把這兩個(gè)php文件更名為html文件，我們主要使用upload.php.我們把他修改為upload.html，同時(shí)修改其中的代碼如下：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <title></title>
  6.     <style type="text/css">
  7.         *{margin:0;padding:0}
  8.         html,body{margin-top:-2px;}
  9. 		#filename{
  10.             position:absolute;
  11.             z-index:9999;
  12.             left:150px;
  13. 			opacity:0;
  14. 			filter:alpha(opacity=0);
  15. 			width:50px;
  16. 			height:21px;
  17.   		}
  18. 		#url{
  19. 			position:absolute;left:0;
  20. 			width:146px;height:21px;background: #FFF;border:1px solid #d7d7d7;padding: 0; margin-top:-1px;
  21. 		}
  22. 		#flag{
  23. 			position:absolute;left:150px;
  24. 		}
  26. 		.btn2 {
  27. 		border:0;
  28. 		background: url("../../themes/default/images/button-bg.gif") no-repeat;
  29. 		font-size:12px;
  30. 		height:23px;
  31. 		width:50px;
  32.         text-align: center;
  33.         cursor: pointer;
  34. 		}
  35. 		.btn1 {
  36. 		border:0;
  37. 		background: url("../../themes/default/images/button-bg.gif") 0 -27px no-repeat;
  38. 		font-size:12px;
  39. 		height:23px;
  40. 		width:50px;
  41.         text-align: center;
  42.         cursor: pointer;
  43. 		}
  46.     </style>
  47. 	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  48. </head>
  49. <body>
  50.     <form id="upImg" action="/upload/UploadImage/" method="post" enctype="multipart/form-data" style="margin-top:5px;">
  51.         <input type="hidden" id="path" name="path" />
  52.         <input id="filename" name="filename" type="file"  onmouseover="document.getElementById('flag').className='btn1'" onmouseout="document.getElementById('flag').className='btn2'" />
  53. 		<input id="url" type="text" name="url" readonly="readonly" value="" />
  54. 		<input class="btn2" id="flag" name="flag" type="button" value="瀏覽…" onmouseover="this.className='btn1'" onmouseout="this.className='btn2'" onclick="sub()" />
  55.     </form>
  56.     <script type="text/javascript">
  58.             var url = document.getElementById('url');
  59.             url.onkeydown = function(evt){
  61.                 evt = event || evt;
  62.                 evt.preventDefault ?evt.preventDefault() : (evt.returnValue = false);
  63.             }
  65.         var form = document.getElementById("upImg");
  66.         document.getElementById("filename").onchange = function(){
  68.             //------------------------------------------
  69.             //如果需要上傳功能，請(qǐng)取消以下兩行注釋即可?。。。?/div>
  70.             //alert("由于安全原因，本demo暫不提供圖片上傳服務(wù)！下載包中包含了支持php版上傳功能的相關(guān)文件，修改后即可使用。");
  71.             //return;
  72.             //------------------------------------------
  75.             document.getElementById('path').value = this.value;
  76.             form.submit();
  77.         }
  78. 		function sub(){
  79.             var file = document.getElementById("filename");
  80.             //file.click();
  81.             if(file.click) file.click();
  82.             else if(file.fireEvent) file.fireEvent('onclick');
  83.             else if(document.createEvent){
  84.                 var evt = document.createEvent("MouseEvents");
  85.                 evt.initEvent("click", true, true);
  86.                 file.dispatchEvent(evt);
  87.             }
  88. 		}
  89.     </script>
  90. </body>
  91. </html>


我們要把圖片上傳到“/upload/UploadImage/”，所以我們需要先建立一個(gè)upload的controller，然后建立一個(gè)UploadImage的action.具體的C#代碼如下：

 


 

  1.  public class UploadController : Controller
  2.     {
  3.         //
  4.         // GET: /Upload/
  5.         [HttpGet]
  6.         public ActionResult Upload()
  7.         {
  8.             string url = Request.QueryString["url"];
  9.             if (url == null)
  10.             {
  11.                 url = "";
  12.             }
  13.             ViewData["url"] = url;
  14.             return View();
  15.         }
  16.         [HttpPost]
  17.         public ActionResult UploadImage(HttpPostedFileBase filename)
  18.         {
  19.             //具體的保存代碼
  20.            return View();
  21.         }
  22.     }

在view中代碼如下：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <title></title>
  6.     <style type="text/css">
  7.         *{margin:0;padding:0}
  8.         html,body{margin-top:-2px;}
  9. 		#filename{
  10.             position:absolute;
  11.             z-index:9999;
  12.             left:150px;
  13. 			opacity:0;
  14. 			filter:alpha(opacity=0);
  15. 			width:50px;
  16. 			height:21px;
  17.   		}
  18. 		#url{
  19. 			position:absolute;left:0;
  20. 			width:146px;height:21px;background: #FFF;border:1px solid #d7d7d7;padding: 0; margin-top:-1px;
  21. 		}
  22. 		#flag{
  23. 			position:absolute;left:150px;
  24. 		}
  26. 		.btn2 {
  27. 		border:0;
  28. 		background: url("/UEdit/themes/default/images/button-bg.gif") no-repeat;
  29. 		font-size:12px;
  30. 		height:23px;
  31. 		width:50px;
  32.         text-align: center;
  33.         cursor: pointer;
  34. 		}
  35. 		.btn1 {
  36. 		border:0;
  37. 		background: url("/UEdit/themes/default/images/button-bg.gif") 0 -27px no-repeat;
  38. 		font-size:12px;
  39. 		height:23px;
  40. 		width:50px;
  41.         text-align: center;
  42.         cursor: pointer;
  43. 		}
  46.     </style>
  47. 	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  48. </head>
  49. <body>
  50.     <form id="upImg" action="/upload/UploadImage/" method="post" enctype="multipart/form-data" style="margin-top:5px;">
  51.         <input type="hidden" id="path" name="path" />
  52.         <input id="filename" name="filename" type="file"  onmouseover="document.getElementById('flag').className='btn1'" onmouseout="document.getElementById('flag').className='btn2'" />
  53. 		<input id="url" type="text" name="url" readonly="readonly" value="<%=ViewData["url"] %>" />
  54. 		<input class="btn2" id="flag" name="flag" type="button" value="瀏覽…" onmouseover="this.className='btn1'" onmouseout="this.className='btn2'" onclick="sub()" />
  55.     </form>
  56.     <script type="text/javascript">
  58.         var url = document.getElementById('url');
  59.         url.onkeydown = function (evt) {
  61.             evt = event || evt;
  62.             evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
  63.         }
  65.         var form = document.getElementById("upImg");
  66.         document.getElementById("filename").onchange = function () {
  68.             //------------------------------------------
  69.             //如果需要上傳功能，請(qǐng)取消以下兩行注釋即可！?。?！
  70.             //alert("由于安全原因，本demo暫不提供圖片上傳服務(wù)！下載包中包含了支持php版上傳功能的相關(guān)文件，修改后即可使用。");
  71.             //return;
  72.             //------------------------------------------
  75.             document.getElementById('path').value = this.value;
  76.             form.submit();
  77.         }
  78.         function sub() {
  79.             var file = document.getElementById("filename");
  80.             //file.click();
  81.             if (file.click) file.click();
  82.             else if (file.fireEvent) file.fireEvent('onclick');
  83.             else if (document.createEvent) {
  84.                 var evt = document.createEvent("MouseEvents");
  85.                 evt.initEvent("click", true, true);
  86.                 file.dispatchEvent(evt);
  87.             }
  88.         }
  89.     </script>
  90. </body>
  91. </html>


 

  1. <html><head>
  2. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  3. <style type="text/css">
  4.     *{margin:0;padding:0}
  5.         html,body{margin-top:-2px;}
  7.       #filename{
  8.             position:absolute;
  9.             z-index:9999;
  10.             left:150px;
  11. 			opacity:0;
  12. 			filter:alpha(opacity=0);
  13. 			width:50px;
  14. 			height:21px;
  15.   		}
  16. 		#url{
  17. 			position:absolute;left:0;
  18. 			width:146px;height:21px;background: #FFF;border:1px solid #d7d7d7;padding: 0; margin-top:-1px;
  19. 		}
  20. 		#flag{
  21. 			position:absolute;left:150px;
  22. 		}
  24. 		.btn2 {
  25. 		border:0;
  26. 		background: url("/UEdit/themes/default/images/button-bg.gif") no-repeat;
  27. 		font-size:12px;
  28. 		height:23px;
  29. 		width:50px;
  30.         text-align: center;
  31.         cursor: pointer;
  32. 		}
  33. 		.btn1 {
  34. 		border:0;
  35. 		background: url("/UEdit/themes/default/images/button-bg.gif") 0 -27px no-repeat;
  36. 		font-size:12px;
  37. 		height:23px;
  38. 		width:50px;
  39.         text-align: center;
  40.         cursor: pointer;
  41. 		}
  42. </style>
  43. </head>
  44. <body>
  45. <form id="upImg" action="/upload/UploadImage/" method="post" enctype="multipart/form-data" style="margin-top:5px;">
  46.         <input id="filename" name="filename" type="file"  onmouseover="document.getElementById('flag').className='btn1'" onmouseout="document.getElementById('flag').className='btn2'" />
  47. </form>
  48. <script type="text/javascript">
  49.     parent.reloadImg('<%=ViewData["url"] %>');
  50.     location.href="/upload/upload/?url=<%=ViewData["url"] %>";
  51. </script>
  52. </body></html>


運(yùn)行后發(fā)現(xiàn)Ueditor在Asp.net 中可以正常使用。

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
百度UEditor控件中的map組件不支持https使用的問(wèn)題解決
理解Javascript中的事件綁定與事件委托
模擬元素點(diǎn)擊的幾種方式
IE和Firefox在JavaScript方面的兼容性
什么是socket？什么是websocket？?jī)烧哂惺裁磪^(qū)別？
js中的事件
更多類似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服