用Ueditor為Asp.net mvc打造視覺化HTML編輯器
阿新 • • 發佈：2019-02-12
在Asp.net WebForm時代，Web系統的HTML視覺化編輯器可以使用FTB一類的控制元件，直接引入工具箱拖拉即可實現。但是在Asp.net MVC時代，直接使用伺服器端控制元件是不符合MVC的標準和約束，會出現這樣或者那樣的問題。UEditor似乎又是不錯的一款視覺化編輯器，有百度做後臺支撐，開源，而且樣式漂亮，自定義容易……所以我決定在我的系統中使用Ueditor作為視覺化編輯工具，但是因為Ueditor支援了Php，並沒有合適asp.net mvc的應用例項。所以我決定改造下Ueditor來滿足MVC下的需要。
其次、在MVC中建立一個檔案件，如圖
，然後把下載的資料夾中的幾個檔案全部包含進來
.
再次、我們在Asp.net mvc中可以建立一個測試Controller.在其View中輸入引用editor_config.js 和editor_ui_all_min.js 同時引用themes下面的ueditor.css。然後在需要出現
編 輯框的地方輸入
<textarea id="editor"></textarea> <script type="text/javascript"> var editor = new baidu.editor.ui.Editor({ UEDITOR_HOME_URL: '/Uedit/', iframeCssUrl: '/Uedit/themes/default/iframe.css', initialContent: '', minFrameHeight: 550 }); editor.render('editor'); </script>
注意：UEDITOR_HOME_URL: '/Uedit/',
iframeCssUrl: '/Uedit/themes/default/iframe.css', 這兩行js為Ueditor放置的目錄和iframe.css所在的位置。然後執行。可以發現Ueditor的基本樣子已經出現，但是圖片上傳部分存在問題。
最後、修改圖片上傳部分的問題。找到\UEdit\dialogs\image。裡面有兩個php檔案，可以把這兩個php檔案更名為html檔案，我們主要使用upload.php.我們把他修改為upload.html，同時修改其中的程式碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> *{margin:0;padding:0} html,body{margin-top:-2px;} #filename{ position:absolute; z-index:9999; left:150px; opacity:0; filter:alpha(opacity=0); width:50px; height:21px; } #url{ position:absolute;left:0; width:146px;height:21px;background: #FFF;border:1px solid #d7d7d7;padding: 0; margin-top:-1px; } #flag{ position:absolute;left:150px; } .btn2 { border:0; background: url("../../themes/default/images/button-bg.gif") no-repeat; font-size:12px; height:23px; width:50px; text-align: center; cursor: pointer; } .btn1 { border:0; background: url("../../themes/default/images/button-bg.gif") 0 -27px no-repeat; font-size:12px; height:23px; width:50px; text-align: center; cursor: pointer; } </style> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body> <form id="upImg" action="/upload/UploadImage/" method="post" enctype="multipart/form-data" style="margin-top:5px;"> <input type="hidden" id="path" name="path" /> <input id="filename" name="filename" type="file" onmouseover="document.getElementById('flag').className='btn1'" onmouseout="document.getElementById('flag').className='btn2'" /> <input id="url" type="text" name="url" readonly="readonly" value="" /> <input class="btn2" id="flag" name="flag" type="button" value="瀏覽…" onmouseover="this.className='btn1'" onmouseout="this.className='btn2'" onclick="sub()" /> </form> <script type="text/javascript"> var url = document.getElementById('url'); url.onkeydown = function(evt){ evt = event || evt; evt.preventDefault ?evt.preventDefault() : (evt.returnValue = false); } var form = document.getElementById("upImg"); document.getElementById("filename").onchange = function(){ //------------------------------------------ //如果需要上傳功能，請取消以下兩行註釋即可！！！！ //alert("由於安全原因，本demo暫不提供圖片上傳服務！下載包中包含了支援php版上傳功能的相關檔案，修改後即可使用。"); //return; //------------------------------------------ document.getElementById('path').value = this.value; form.submit(); } function sub(){ var file = document.getElementById("filename"); //file.click(); if(file.click) file.click(); else if(file.fireEvent) file.fireEvent('onclick'); else if(document.createEvent){ var evt = document.createEvent("MouseEvents"); evt.initEvent("click", true, true); file.dispatchEvent(evt); } } </script> </body> </html>
我們要把圖片上傳到“/upload/UploadImage/”，所以我們需要先建立一個upload的controller，然後建立一個UploadImage的action.具體的C#程式碼如下：
public class UploadController : Controller { // // GET: /Upload/ [HttpGet] public ActionResult Upload() { string url = Request.QueryString["url"]; if (url == null) { url = ""; } ViewData["url"] = url; return View(); } [HttpPost] public ActionResult UploadImage(HttpPostedFileBase filename) { //具體的儲存程式碼 return View(); } }
在view中程式碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0}
html,body{margin-top:-2px;}
#filename{
position:absolute;
z-index:9999;
left:150px;
opacity:0;
filter:alpha(opacity=0);
width:50px;
height:21px;
}
#url{
position:absolute;left:0;
width:146px;height:21px;background: #FFF;border:1px solid #d7d7d7;padding: 0; margin-top:-1px;
}
#flag{
position:absolute;left:150px;
}
.btn2 {
border:0;
background: url("/UEdit/themes/default/images/button-bg.gif") no-repeat;
font-size:12px;
height:23px;
width:50px;
text-align: center;
cursor: pointer;
}
.btn1 {
border:0;
background: url("/UEdit/themes/default/images/button-bg.gif") 0 -27px no-repeat;
font-size:12px;
height:23px;
width:50px;
text-align: center;
cursor: pointer;
}
</style>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form id="upImg" action="/upload/UploadImage/" method="post" enctype="multipart/form-data" style="margin-top:5px;">
<input type="hidden" id="path" name="path" />
<input id="filename" name="filename" type="file" onmouseover="document.getElementById('flag').className='btn1'" onmouseout="document.getElementById('flag').className='btn2'" />
<input id="url" type="text" name="url" readonly="readonly" value="<%=ViewData["url"] %>" />
<input class="btn2" id="flag" name="flag" type="button" value="瀏覽…" onmouseover="this.className='btn1'" onmouseout="this.className='btn2'" onclick="sub()" />
</form>
<script type="text/javascript">
var url = document.getElementById('url');
url.onkeydown = function (evt) {
evt = event || evt;
evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
}
var form = document.getElementById("upImg");
document.getElementById("filename").onchange = function () {
//------------------------------------------
//如果需要上傳功能，請取消以下兩行註釋即可！！！！
//alert("由於安全原因，本demo暫不提供圖片上傳服務！下載包中包含了支援php版上傳功能的相關檔案，修改後即可使用。");
//return;
//------------------------------------------
document.getElementById('path').value = this.value;
form.submit();
}
function sub() {
var file = document.getElementById("filename");
//file.click();
if (file.click) file.click();
else if (file.fireEvent) file.fireEvent('onclick');
else if (document.createEvent) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
file.dispatchEvent(evt);
}
}
</script>
</body>
</html><html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{margin:0;padding:0}
html,body{margin-top:-2px;}
#filename{
position:absolute;
z-index:9999;
left:150px;
opacity:0;
filter:alpha(opacity=0);
width:50px;
height:21px;
}
#url{
position:absolute;left:0;
width:146px;height:21px;background: #FFF;border:1px solid #d7d7d7;padding: 0; margin-top:-1px;
}
#flag{
position:absolute;left:150px;
}
.btn2 {
border:0;
background: url("/UEdit/themes/default/images/button-bg.gif") no-repeat;
font-size:12px;
height:23px;
width:50px;
text-align: center;
cursor: pointer;
}
.btn1 {
border:0;
background: url("/UEdit/themes/default/images/button-bg.gif") 0 -27px no-repeat;
font-size:12px;
height:23px;
width:50px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<form id="upImg" action="/upload/UploadImage/" method="post" enctype="multipart/form-data" style="margin-top:5px;">
<input id="filename" name="filename" type="file" onmouseover="document.getElementById('flag').className='btn1'" onmouseout="document.getElementById('flag').className='btn2'" />
</form>
<script type="text/javascript">
parent.reloadImg('<%=ViewData["url"] %>');
location.href="/upload/upload/?url=<%=ViewData["url"] %>";
</script>
</body></html>
執行後發現Ueditor在Asp.net 中可以正常使用。