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

百度ueditor富文本编辑器分为两种一种是完全版的ueditor,另一种是ueditor的迷你版umeditor。

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

一、我们先讲完全版的ueditor。

1、建立数据模型。

2、建立对应的控制器和视图。

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

4、下载后解压,将文件夹更名为ueditor,文件夹里面就是源程序。

5、将此ueditor文件夹复制到自己MVC项目的根目录中。

6、打开需要改造的Create视图和Edit视图,相关的操作方式是完全一样的。

7、找到需要改造的地方,将原来的注释掉或者删除掉。

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

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

8、然后找到底部的脚本代码@Scripts.Render("~/bundles/jqueryval")

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

9、紧接着上面的代码,在下面写如下代码,这里我没有做任何配置设置,因为我的全站不存在第二种样式,所以我直接在后面的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>

10、现在运行就应该能看到富文本编辑效果了,但是这样还不行,很多功能还不正常需要对ueditor进行。

11、打开~/ueditor/ueditor.config.js。

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

所以根据自己的需要,删除参数前面的“//”就行了,一定不要把后面的逗号也删除了。

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

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

同时,也可以配置其他项。例如"imageMaxSize": 2048000, /* 上传大小限制,单位B */  等等。

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

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

这样就能正常使用了。

二、ueditor的迷你版umeditor。

迷你版umeditor最新的.net版 为1.2.2  编译时间为2016-12-22   官网不知道为什么不能直接下。我是从官网“UM演示”里面的Github下载地址下载的。因为是迷你版,很多步骤还是一样的。

1、同ueditor的1。

2、同ueditor的2。

3、下载后解压,将文件夹更名为umeditor,文件夹里面就是源程序。文件名必须是这个,否则后面会麻烦。

4、官网不知道为什么不能直接下。我是从官网“UM演示”里面的Github下载地址下载的。(好像官网也知道这个版本不正常,所以没提供下载。别的版本都是1.2.3了)

5、将此umeditor文件夹复制到自己MVC项目的根目录中。

6、同ueditor的6、7。

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

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

8、然后找到底部的脚本代码@Scripts.Render("~/bundles/jqueryval")

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

9、紧接着上面的代码,在下面写如下代码:

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

10、现在运行就应该能看到富文本编辑效果了。

11、经测试这个版本的图片不能正常上传。所以我注释掉了相关的功能,相当于只用了基本的文字编辑功能。

12、同ueditor的13。

13、同ueditor的14。

ASP.NET MVC5 中百度ueditor富文本编辑器的使用的更多相关文章

  1. ASP.NET MVC 中使用 UEditor 富文本编辑器

    在上篇<使用ASP.NET MVC+Entity Framework快速搭建博客系统>中,已经基本上可以实现博客分类和博客文章的CURD.但是,文章编辑界面实在是…… 好吧,咱得搞专业点. ...

  2. 百度ueditor富文本编辑器的使用

    百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...

  3. PHP如何搭建百度Ueditor富文本编辑器

    本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...

  4. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  5. WEB项目中使用UEditor(富文本编辑器)

    Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文 ...

  6. 在网站中使用UEditor富文本编辑器

    UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点. 官网链接 进入到下载页面,选择相应的版本下载 这里我们使用ASP.NET开发,所以选择 ...

  7. vue集成百度UEditor富文本编辑器

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...

  8. Vue 中使用UEditor富文本编辑器-亲测可用-vue-ueditor-wrap

    其中UEditor中也存在不少错误,再引用过程中. 但是UEditor相对还是比较好用的一个富文本编辑器. vue-ueditor-wrap说明 Vue + UEditor + v-model 双向绑 ...

  9. vue2.0项目中使用Ueditor富文本编辑器示例

    最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件. 在线预览:https://suweiteng.github.io/vue2-management-platform ...

随机推荐

  1. 使用Q进行同步的Promises操作

    如何通过使用Q来并发执行多个promises呢? Q(Q(1), Q(2), Q(3)) .then(function (one, two, three) { console.log(one); co ...

  2. Proof of Elapsed Time--Hyperledger Sawtooth 共识算法

    这一片文章中我们介绍一下Hyperledger Sawtooth项目中所提出的PoET共识算法, 现有的区块链共识算法大概可以分为两种: Nakamoto consensus:通过乐透的方式选择出一个 ...

  3. 【转1】Appium 1.6.3 在Xcode 8, iOS 10.2(模拟器)测试环境搭建 经验总结

    Appium 1.6.3 在Xcode 8, iOS 10.2(模拟器)测试环境搭建 经验总结 关于 Appium 1.6.3 在Xcode 8, 10.2 的iOS模拟器上的问题很多,本人也差点放弃 ...

  4. 简易 (I/O)版本通讯录

    #include <stdio.h> #include<assert.h> //#include<malloc.h> #include<string.h> ...

  5. python入门之函数

    为什么要用函数 python的函数是由一个新的语句编写,即def ,def是可执行的语句--函数并不存在,知道python运行了def后才存在. 函数是通过赋值函数传递的,参数通过赋值传递给函数. d ...

  6. python语言学习笔记整理

    什么是程序? 程序等于数据结构加算法,那么数据结构是一个静态的东西,算法是一个动态的东西,我们用一个新的语言编写这个程序,我们要考虑到语言也主要由数据结构和算法相关的东西,或静态或动态的东西来构成,所 ...

  7. Zabbix Agent for Windows部署(五)

    一.环境介绍 二.软件准备 1.Zabbix官方下载地址:https://www.zabbix.com/download进入Zabbix pre-compiled agents项,下载相应版本 2.将 ...

  8. 分享一个JS的Base64加密解密功能

    代码实现: var base64 = (function () { var encodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnop ...

  9. 用json方法来作深拷贝应该知道的一点东西!

    之前写js比较多的的时候也写过深拷贝,浅拷贝,继承啥的,还有自定义的监听事件.然而过了很久都忘了. 最近在项目上用的深拷贝都是 b = JSON.parse( JSON.stringify(a) ) ...

  10. 聚类之dbscan算法

    简要的说明: dbscan为一个密度聚类算法,无需指定聚类个数. python的简单实例: # coding:utf-8 from sklearn.cluster import DBSCAN impo ...