mvc4项目使用ueditor编辑器

配置.net mvc4项目使用ueditor编辑器。

1、首先下载Ueditor1.3.6开发版（http://ueditor.baidu.com/website/download.html）



2、将下载的文件放在项目的Content文件夹下，也可放在其他文件加下，但注意将下载的文件夹全部复制到项目中。



3、项目中配置使用

引入样式文件

<link href="~/Content/ueditor/themes/iframe.css" rel="stylesheet" />

引入JS文件

<script src="~/Content/ueditor/ueditor.config.js"></script>

<script src="~/Content/ueditor/ueditor.all.js"></script>

<script src="~/Content/ueditor/lang/zh-cn/zh-cn.js"></script>

<script src="~/Content/ueditor/ueditor.parse.js"></script>

使用文本编辑器的区域框

JS中初始化

<script type="text/javascript">

var editor = new baidu.editor.ui.Editor({

UEDITOR_HOME_URL: '/Content/ueditor/',//配置编辑器路径

iframeCssUrl: '/Content/ueditor/themes/iframe.css',//样式路径

// initialContent: "@Model.ArcContent",//初始化编辑器内容

autoHeightEnabled: true,//高度自动增长

minFrameHeight: 500//最小高度

});

editor.render('ArcContent');//使用文本编辑器的元素

editor.ready(function () {

var content = '@Html.Raw(Model.ArcContent)';

editor.setContent(content);

});

</script>

数据保存及获取显示时注意事项

1、保存数据时，对的数据进行编码 Server.HtmlEncode(cmsArc.ArcContent);

2、修改时返回数据时需要使用Server.HtmlDecode(cmsArc.ArcContent);对数据进行解码

3、数据赋值时注意使用Html.Raw函数，否者数据会显示为Html标签的形式。使用editor.ready(function(){})



服务端：

action标记[ValidateInput(false)]来解决，如图：



6、编辑器等内容我们可以通过FormCollection来接收，从而实现内容保存，处理图片等相关操作



修改文件存储的默认路径及无法上传图片和附件的处理办法注意事项

1.把net文件夹下的image.ashx的顶部<%@ Assembly Src="Uploader.cs" %> 和<%@ Assembly Src="Config.cs" %> 去掉



成功上传一张图片，插入到编辑器中，但是无法正确显示刚刚上传的图片。



查看html源码可以发现图片路径中，upload1后面有2个/，手动删除一个后，返回查看，图片可以正常显示了。



还是在ueditor/net/imageUp.ashx中，找到下面这行代码：

info = up.upFile(context, path + '/', filetype, size); //获取上传状态

然后修改成

info = up.upFile(context, path, filetype, size); //获取上传状态
就是把+'/'给删除掉。

自定义工具栏

var editor = new baidu.editor.ui.Editor({
toolbars:[['Paragraph','RowSpacing','FontFamily','FontSize']]
});