用Ueditor为Asp.net mvc打造可视化HTML编辑器
在Asp.net WebForm时代，Web系统的HTML可视化编辑器可以使用FTB一类的控件，直接引入工具箱拖拉即可实现。但是在Asp.net MVC时代，直接使用服务器端控件是不符合MVC的标准和约束，会出现这样或者那样的问题。UEditor似乎又是不错的一款可视化编辑器，有百度做后台支撑，开源，而且样式漂亮，自定义容易……所以我决定在我的系统中使用Ueditor作为可视化编辑工具，但是因为Ueditor支持了Php，并没有合适asp.net mvc的应用实例。所以我决定改造下Ueditor来满足MVC下的需要。
首先、下载Uediotr，初次使用建议下载全版和实例，可以一一学习研究。下载地址：http://ueditor.baidu.com/download.html
其次、在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 中可以正常使用。