[转载] ASP.NET MVC4使用百度UEDITOR编辑器
前言
配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法。编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net 的开发包,如下图,我下载的是1.2.6.1net版本的开发包。
配置:
1、将开发包放到mvc4项目中,在我的项目中我放到了Content目录下
2、在模板页中引入js和样式文件:
3、在页面中配置初始化编辑器,在页面中配置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>
}
到这一步正常情况下,页面已经显示出编辑器的样子了,如图:
4、解决图片上传问题,通过查看ueditor的配置文件及imageUp.ashx很明显的可以发现编辑器会把图片放到uditor/net/upload或upload1文件夹,若不存在则创建文件夹,此时上传图片会出现网络连接错误的提示,通过F12查看错误如图
查看Uploader文件默认属性为编译,将其属性改为内容以后重新运行程序,图片上传成功,如下图:
5、解决表单提交错误提示问题,从.Net Framework 4.0 开始,ASP.NET开始强制检测Request参数安全,直接提交会出现如下错误,
这个问题在后台action标记[ValidateInput(false)]来解决,如图:
6、编辑器等内容我们可以通过FormCollection来接收,从而实现内容保存,处理图片等相关操作
以上是百度编辑器在mvc项目中的简单配置,个人感觉还是很好用的,已经在多个项目中使用了,没有感觉像很多人说的那样不好使,个人反而感觉不错。
http://www.cnblogs.com/flykai/p/3285307.html
最新文章
- VS2003";无法启动调试 没有正确安装调试器";的解决办法
- TMS320C64X+ 中使用EDMA3中断
- 斯坦福第十八课:应用实例:图片文字识别(Application Example: Photo OCR)
- macosx zsh下安装rvm和ruby
- jQuery.proxy()函数
- 成员变量NSString类型指针的属性为什么用copy(属性)
- placeholder在ie浏览器里不显示的问题解决
- Everyday is an Opportunity
- 基础学习总结(五)---baseAdapter、ContentProvider
- 《Head First 设计模式》学习笔记——状态模式
- 敏捷开发(七)- SCRUM评估会议
- nlog学习使用
- html2canvas 识别 svg 解决方案
- .\OBJ\test1.axf: Error: L6230W: Ignoring --entry command. Cannot find argumen &#39;Reset_Handler&#39;
- oracle 常用(一)
- iOS:即时通讯之<;了解篇 SocKet>;
- NSURLSession和NSURLConnection
- 从零开始的Python学习Episode 15——正则表达式
- mui app在线更新
- C#单元测试Nunit小结(20141018)
热门文章
- A. Night at the Museum Round#376 (Div. 2)
- 【读书笔记】Linux源码注释
- sql 在将 nvarchar 值 转换成数据类型 int 时失败。
- OLEDB和ODBC的区别
- DOM操作-根据name获取网页中的全部复选框
- H5的新应用-获取用户当前的地理坐标
- UTF8,UTF16,UTF32,UTF16-LE,UTF16-BE,GBK 之间的转换
- flashbuilder mx组件 MenuBar
- shell:crontab
- Shell 流程控制-if for case while until break continue