用Ueditor为Asp.net mvc打造可视化HTML编辑器
来源:互联网 发布:红包分析软件 编辑:程序博客网 时间:2024/05/22 10:49
首先、下载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 中可以正常使用。
- 用Ueditor为Asp.net mvc打造可视化HTML编辑器
- 用XmlSerializer为ASP.NET打造配置文件
- 百度编辑器UEditor ASP.NET示例Demo
- asp.net mvc4使用百度ueditor编辑器
- Asp.net Mvc 中使用UEditor
- 设置ASP.NET MVC站点默认页为html页
- 设置ASP.NET MVC站点默认页为html页
- 在asp.net mvc中使用百度UEditor初始化内容遇到自数据库中读取的html字符串在UEditor中始终是html编码的问题
- 浅用HTML编辑器ueditor
- ASP.NET MVC Html.BeginForm
- 百度富文本编辑器UEditor在ASP.NET中的运用
- 百度ueditor编辑器在Asp.Net中使用
- asp.net中对UEditor编辑器的一些操作
- 【ASP.NET 插件】分享一款富文本web编辑器UEditor
- ASP.NET使用百度编辑器(UEditor)使用方法
- 在ASP.NET Core中使用百度在线编辑器UEditor
- ASP.NET使用百度编辑器(UEditor)方法
- 在ASP.NET Core中使用百度在线编辑器UEditor
- 计算CRC
- GCT复习小结
- Snort 命令参数详解
- 读格林斯潘回忆录-5
- MongoDB PHP API 及用法
- 用Ueditor为Asp.net mvc打造可视化HTML编辑器
- 深入理解缓冲区(十七)
- MongoDB Linux下的安装和启动
- linux中文显示问题
- 整数划分问题
- c++感受
- 《乔布斯传》今日10时05分全球同步首发
- C++ 带有头结点的单链表的简单实现
- 您的帐号存在异常,暂不支持同步消息记录