asp.net mvc4使用百度ueditor编辑器
2013-08-28 13:26
465 查看
原文 /article/5295812.html 已测试 相当不错
前言
配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法。编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net 的开发包,如下图,我下载的是1.2.6.1net版本的开发包。
![](http://images.cnitblog.com/blog/551516/201308/27161205-1786016a7f16417eab0110267bd04a32.png)
配置:
1、将开发包放到mvc4项目中,在我的项目中我放到了Content目录下
2、在模板页中引入js和样式文件:
![](http://images.cnitblog.com/blog/551516/201308/27161441-893c4a6bf3514d94a9824996a10dba86.png)
3、在页面中配置初始化编辑器,在页面中配置textarea显示为编辑器,编辑器更多的参数设置可参考ueditor.config.js里面的配置说明:
按 Ctrl+C 复制代码
@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>
}
按 Ctrl+C 复制代码
到这一步正常情况下,页面已经显示出编辑器的样子了,如图:
![](http://images.cnitblog.com/blog/551516/201308/27161927-84ea98988a01471b921065db45d9dff6.png)
4、解决图片上传问题,通过查看ueditor的配置文件及imageUp.ashx很明显的可以发现编辑器会把图片放到uditor/net/upload或upload1文件夹,若不存在则创建文件夹,此时上传图片会出现网络连接错误的提示,通过F12查看错误如图
![](http://images.cnitblog.com/blog/551516/201308/27162624-09361ff4163f4d83af36c099c412ac6e.png)
查看Uploader文件默认属性为编译,将其属性改为内容以后重新运行程序,图片上传成功,如下图:
![](http://images.cnitblog.com/blog/551516/201308/27163658-dfdc0a51ce25460cbac9b3a78d4223fe.png)
5、解决表单提交错误提示问题,从.Net Framework 4.0 开始,ASP.NET开始强制检测Request参数安全,直接提交会出现如下错误,
![](http://images.cnitblog.com/blog/551516/201308/27163943-5e697d53461c4b1c9a6abbb264db4443.png)
这个问题在后台action标记[ValidateInput(false)]来解决,如图:
![](http://images.cnitblog.com/blog/551516/201308/27164310-0e1b36e9698f441a80244e4ef0074a49.png)
6、编辑器等内容我们可以通过FormCollection来接收,从而实现内容保存,处理图片等相关操作
前言
配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法。编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net 的开发包,如下图,我下载的是1.2.6.1net版本的开发包。
![](http://images.cnitblog.com/blog/551516/201308/27161205-1786016a7f16417eab0110267bd04a32.png)
配置:
1、将开发包放到mvc4项目中,在我的项目中我放到了Content目录下
2、在模板页中引入js和样式文件:
![](http://images.cnitblog.com/blog/551516/201308/27161441-893c4a6bf3514d94a9824996a10dba86.png)
3、在页面中配置初始化编辑器,在页面中配置textarea显示为编辑器,编辑器更多的参数设置可参考ueditor.config.js里面的配置说明:
按 Ctrl+C 复制代码
@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>
}
按 Ctrl+C 复制代码
到这一步正常情况下,页面已经显示出编辑器的样子了,如图:
![](http://images.cnitblog.com/blog/551516/201308/27161927-84ea98988a01471b921065db45d9dff6.png)
4、解决图片上传问题,通过查看ueditor的配置文件及imageUp.ashx很明显的可以发现编辑器会把图片放到uditor/net/upload或upload1文件夹,若不存在则创建文件夹,此时上传图片会出现网络连接错误的提示,通过F12查看错误如图
![](http://images.cnitblog.com/blog/551516/201308/27162624-09361ff4163f4d83af36c099c412ac6e.png)
查看Uploader文件默认属性为编译,将其属性改为内容以后重新运行程序,图片上传成功,如下图:
![](http://images.cnitblog.com/blog/551516/201308/27163658-dfdc0a51ce25460cbac9b3a78d4223fe.png)
5、解决表单提交错误提示问题,从.Net Framework 4.0 开始,ASP.NET开始强制检测Request参数安全,直接提交会出现如下错误,
![](http://images.cnitblog.com/blog/551516/201308/27163943-5e697d53461c4b1c9a6abbb264db4443.png)
这个问题在后台action标记[ValidateInput(false)]来解决,如图:
![](http://images.cnitblog.com/blog/551516/201308/27164310-0e1b36e9698f441a80244e4ef0074a49.png)
6、编辑器等内容我们可以通过FormCollection来接收,从而实现内容保存,处理图片等相关操作
![](http://images.cnitblog.com/blog/551516/201308/27164631-3a98652ef17448ce9c08dd67a687ef1f.png)
相关文章推荐
- asp.net mvc4使用百度ueditor编辑器
- asp.net mvc4使用百度ueditor编辑器
- [转载] ASP.NET MVC4使用百度UEDITOR编辑器
- asp.net mvc4使用百度ueditor编辑器
- 百度UEditor编辑器使用教程与使用方法
- ASP.NET使用百度编辑器(UEditor)使用方法
- 百度编辑器 UEditor 使用
- Ueditor百度编辑器中的 setContent()方法的使用
- JSP版(utf8编码)的Ueditor百度文章编辑器配置以及使用说明
- UEditor —— 百度编辑器的使用(后台框架 thinkphp5)
- asp.net mvc5 使用百度ueditor 本编辑器完整示例(下)配置上传播放视频
- YII2下使用百度编辑器扩展yii2-ueditor(二)
- 百度Ueditor编辑器的使用
- [转载]百度编辑器-Ueditor使用
- 百度UEditor编辑器使用教程与使用方法
- ueditor(百度编辑器)的第一次使用以及关键配置
- 使用百度ueditor编辑器,开发公众号编辑器,添加文章样式
- mvc4使用百度ueditor编辑器
- 免费开源百度编辑器(UEditor)使用方法
- asp.net mvc5 使用百度ueditor 本编辑器完整示例(上)