前言javascript
配置.net mvc4项目使用ueditor编辑器,在配置过程当中碰见了好几个问题,以此来记录解决办法。编辑器能够到http://ueditor.baidu.com/website/download.html#ueditor处下载.net 的开发包,以下图,我下载的是1.2.6.1net版本的开发包。css
配置:html
一、将开发包放到mvc4项目中,在个人项目中我放到了Content目录下java
二、在模板页中引入js和样式文件:web
三、在页面中配置初始化编辑器,在页面中配置textarea显示为编辑器,编辑器更多的参数设置可参考ueditor.config.js里面的配置说明:安全
@using(Html.BeginForm()){ <textarea id="editor" name="editor"> </textarea> <input type="submit" value="提交" /> } @section scripts{ <script type="text/javascript"> var editor = new baidu.editor.ui.Editor({ UEDITOR_HOME_URL: '/Content/ueditor/',//配置编辑器路径 iframeCssUrl: '/Content/ueditor/themes/iframe.css',//样式路径 initialContent: '欢迎使用ueditor',//初始化编辑器内容 autoHeightEnabled: true,//高度自动增加 minFrameHeight:500//最小高度 }); editor.render('editor'); </script> }
到这一步正常状况下,页面已经显示出编辑器的样子了,如图:网络
四、解决图片上传问题,经过查看ueditor的配置文件及imageUp.ashx很明显的能够发现编辑器会把图片放到uditor/net/upload或upload1文件夹,若不存在则建立文件夹,此时上传图片会出现网络链接错误的提示,经过F12查看错误如图mvc
查看Uploader文件默认属性为编译,将其属性改成内容之后从新运行程序,图片上传成功,以下图:编辑器
五、解决表单提交错误提示问题,从.Net Framework 4.0 开始,ASP.NET开始强制检测Request参数安全,直接提交会出现以下错误,ui
这个问题在后台action标记[ValidateInput(false)]来解决,如图:
六、编辑器等内容咱们能够经过FormCollection来接收,从而实现内容保存,处理图片等相关操做
以上是百度编辑器在mvc项目中的简单配置,我的感受仍是很好用的,已经在多个项目中使用了,没有感受像不少人说的那样很差使,我的反而感受不错。