ASP.NET MVC5 中百度ueditor富文本编辑器的使用

随着网站信息发布内容愈来愈多，愈来愈重视美观，富文本编辑就是不可缺乏的了，众多编辑器比较后我选了百度的ueditor富文本编辑器。

百度ueditor富文本编辑器分为两种一种是彻底版的ueditor，另外一种是ueditor的迷你版umeditor。

ueditor富文本编辑器的功能很强大，使用中会在其目录下面会产生大量的数据，本人认为应将ueditor放置在根目录下，后期维护中谨慎对待。

1、咱们先讲彻底版的ueditor。

一、创建数据模型。

二、创建对应的控制器和视图。

三、访问http://ueditor.baidu.com/website/download.html 进入开发版的下载页面，下载.net UTF-8版本，如今最新的是1.4.3.3版。

四、下载后解压，将文件夹改名为ueditor，文件夹里面就是源程序。

五、将此ueditor文件夹复制到本身MVC项目的根目录中。

六、打开须要改造的Create视图和Edit视图，相关的操做方式是彻底同样的。

七、找到须要改造的地方，将原来的注释掉或者删除掉。

    一般视图自动生成的是@Html.EditorFor(model => model.文档内容, new { htmlAttributes = new { @class = "form-control" } })

    如今直接用 @Html.TextAreaFor(model => model.文档内容,htmlAttributes:new { @id="neirong"}) 替换掉。

八、而后找到底部的脚本代码@Scripts.Render("~/bundles/jqueryval"）

    替换为@Scripts.Render("~/bundles/jqueryval", "~/ueditor/ueditor.config.js", "~/ueditor/ueditor.all.js") 

九、紧接着上面的代码，在下面写以下代码，这里我没有作任何配置设置，由于个人全站不存在第二种样式，因此我直接在后面的ueditor配置文件中设置了。

官方示例中建议使用工厂方法getEditor建立和引用编辑器实例，若是在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

<script type="text/javascript">

var nreditor = UE.getEditor('neirong'); 
</script>

下面是作了参数配置的

<script type="text/javascript">
var editorOption = {
initialFrameWidth: 784,
initialFrameHeight: 400
};
var editor = new baidu.editor.ui.Editor(editorOption);
editor.render('neirong');
</script>

十、如今运行就应该能看到富文本编辑效果了，可是这样还不行，不少功能还不正常须要对ueditor进行。

十一、打开~/ueditor/ueditor.config.js。

      再往下面的就是配置的参数了，文件上方的官方提示已经说了“全部被注释的配置项均为UEditor默认值。”

     因此根据本身的须要，删除参数前面的“//”就好了，必定不要把后面的逗号也删除了。

十二、配置config.json。打开~/ueditor/net文件夹下的config.json文件。

若是是按照个人实施规则来的话，此文件不用动。若是有变更的话须要修改图片访问前缀 "imageUrlPrefix": "/ueditor/net/"。若是配置错误的前缀路径，能正确上传图片等，可是不能在线编辑、不能访问，图片就显示不正常。验证是否正确的方法是在富文本编辑器里上传个图片，若是能显示此图片则正常。

同时，也能够配置其余项。例如"imageMaxSize": 2048000, /* 上传大小限制，单位B */  等等。

1三、而后在相关视图的控制器中Create和Edit 的httpPost方法中加入 [ValidateInput(false)]属性。 而后数据库将html标签保存到数据库中。若是不加入此注解，表单将不能正确的提交，并出现 ”潜在的风险的Request.Form值。

1四、在系统自动建立的Detials操做方法的视图中找到对应的显示位置，将原来的@Html.DisplayFor(model => model.文档内容)改成@Html.Raw(Model.文档内容)，也就是对数据提取出来的Content 字段的html标签不进行编码。

这样就能正常使用了。

 

2、ueditor的迷你版umeditor。

迷你版umeditor最新的.net版 为1.2.2  编译时间为2016-12-22   官网不知道为何不能直接下。我是从官网“UM演示”里面的Github下载地址下载的。由于是迷你版，不少步骤仍是同样的。

一、同ueditor的1。

二、同ueditor的2。

三、下载后解压，将文件夹改名为umeditor，文件夹里面就是源程序。文件名必须是这个，不然后面会麻烦。

四、官网不知道为何不能直接下。我是从官网“UM演示”里面的Github下载地址下载的。（好像官网也知道这个版本不正常，因此没提供下载。别的版本都是1.2.3了）

五、将此umeditor文件夹复制到本身MVC项目的根目录中。

六、同ueditor的六、7。

七、在视图的<h2>前面添加

<link href="~/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">

八、而后找到底部的脚本代码@Scripts.Render("~/bundles/jqueryval"）

    替换为@Scripts.Render("~/bundles/jqueryval", "~/umeditor/third-party/jquery.min.js", "~/umeditor/umeditor.config.js", "~/umeditor/umeditor.min.js") 这里新加了三个

九、紧接着上面的代码，在下面写以下代码：

<script type="text/javascript">
var ueditor = UM.getEditor('neirong');   //这里是um不是以前的UE了。
</script>

十、如今运行就应该能看到富文本编辑效果了。

十一、经测试这个版本的图片不能正常上传。因此我注释掉了相关的功能，至关于只用了基本的文字编辑功能。

十二、同ueditor的13。

1三、同ueditor的14。