文章目录
1. 场景描述2. 问题描述3.较为流行的几个富文本编辑器比较3.1、wangEditor3.2、百度的ueditor3.3、KindEditor3.4、bootstrap-wysiwyg3.5、QuillEditor4.Ueditor的集成5.插入base64图片1. 场景描述
最近在做一个网站，里面有发布文章的功能。需要使用到富文本编辑器来发布文章。
实现思路：富文本编辑排版=》转存html=》服务器存储为txt文件=》数据库存储访问地址=》前端访问后台服务拿到访问地址=》请求url拿到文章内容=》渲染到页面。
缺点：前端访问一次文章需要发送两次请求，增加了服务器的访问量。
优点：数据存储在服务器，数据库所占空间变小，访问速率得到改善。
总结：优点略大于缺点
本文内容：仅针对于ueditor部分内容进行介绍。实在是因为网上的博文介绍的都是云里雾里的，不太适合新手。
2. 问题描述
1.采用哪个富文本编辑器？
要求功能丰富，操作简单，类似word。
2.单纯的文本排版的话基本所有的富文本编辑器都合适，但是需要图片在编辑器内能拖拽，缩放等，要求能插入代码，且代码高亮。要求能插入附件，插入链接等。这就降低了可选择的纬度。最终的问题：图片如何存？
要求存储的图片在更换服务器，更换域名时不能出现图片丢失。即插入的图片地址需要实现更换功能或者时转存为base64方式进行存储。根据使用场景，我们的文章内容不是存储在数据库，所以base64存储虽然可以加大文章存储的体积量，但是并不会造成数据库卡顿等性能问题。于是就采用base64存储的方案。
3.较为流行的几个富文本编辑器比较
声明：此部分内容大多来源于网络。
3.1、wangEditor
wangEditor官网
优势：开源，轻量简洁，最重要的是开源且中文文档齐全，设计的UI漂亮。wangEditor基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。与国产编辑器 百度ueditor 和 kindeditor 相比，它轻量、易用、UI设计精致漂亮。国外编辑器 bootstrap-wysiwyg 和 simditor 相比，它文档易读、交流方便，更接地气。它还会根据使用者的反馈不断完善，未来将支持移动版。 支持IE6+浏览器。不足:没有强大的后台
上述是网上的描述。
小编也集成过WangEditor，不得不说，这款编辑器是真的香。作为开发者而言，我是真的很喜欢这款编辑器。但是甲方觉得这个编辑器功能太简单了。所以就没能排上用场。
下面是小编对wangEditor的一些看法。
1.集成简单，三行代码即可集成到你的开发环境之中。
import E from 'wangeditor'const editor = new E('#div1') //指定一个容器id为div1editor.create()
2.图片可以设置为base64存储，真的很适合项目使用场景
editor.config.uploadImgShowBase64 = true
这款编辑器的图片默认为base64存储，倒是挺好使的。但是不能对图片进行拖拽和缩放，这个就很难受。
3.Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费
使用typescript开发的，这个就比较舒服。而且，这款编辑器现在还在更新，你也可以联系得到开发者，与开发者进行交流。
4.可以自定义皮肤
这个功能是真的蛮贴心的，但是对于新手来说，就有点不太适合。
从编辑器中获取的 html 代码是不包含任何样式的纯 html如果显示的时候需要对其中的 table code bloc kquote 等标签进行自定义样式（这样既可实现多皮肤功能），下面提供了编辑器中使用的样式供参考。这个是官网的原话。我在测试的时候就出现表格保存后没有边框之类的样式。我建议应该默认一套样式，用户想要实现多皮肤功能的话样式覆盖就好了。
丰富的api支持
wangEditorApi
有人维护的就是不一样，这api真的是爱了，真的挺齐全的。对于开发者来说太友好了。
截图展示
真的是看起来很简洁，很清新的了。小编最喜欢这个。
3.2、百度的ueditor
网评：
优势：开源，插件多，基本满足各种需求， 由百度web前端研发部开发。不足：比较庞大，对于网页的加载来说，会相对影响速度 ,界面不太美观。官方的wiki文档并不是很完善，图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，较为难办，加载速度慢。
小编的看法：
1.功能齐全，庞大，有点冗余了。2.不够开放，或者未完善得很好，对于开发者来说不太友好。比如新增弹窗功能，按钮有了，弹窗也有了，但是弹窗内容是白板，不是自己的弹窗内容。就很烦躁。3.源码还是挺简单的。如果新增弹窗出现问题时，可以考虑把不需要的功能给替换掉。
这个界面还是很像word的，特别受各种甲方的喜欢。虽然官方不再更新版本了，但是其现有的功能还能够再战几年。代码底层也是随便你改，只要你改的动。
Ueditor还是比较受欢迎的，可惜的是上传图片到服务器之类的需要配置在本地搭建php环境，这个我就笑了呀。于是我就得对上传图片这个功能动刀子了。诶，瞧我这暴脾气。
优点：
1.图片有拖拽，缩放功能。这个满足需求。
2.功能很丰富，甲方强行加分。
3.小编可以把上传图片到服务器改为base64字符串存储
3.3、KindEditor
网评：
优势: 文档齐全 ，中文文档便于阅读理解， 界面类似百度，使用还算方便。不足:存在图片上传问题，如果上传历史过多，会全部加载，导致浏览器卡，反应慢兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、ASP等程序接合。
小编的看法：
要想了解他，肯定得先去使用呀。当然这个也是被我拿来做demo研究的对象。
1.集成简单，和wangEditor一样，集成这个编辑器不难。2.功能也是很强大，和百度的Ueditor类似。3.上传图片到服务器真的是很难解决啊（和Ueditor一样的难）。
总结：
功能和ueditor类似，但是可以用Ueditor取代。所以就没有采用这个。
3.4、bootstrap-wysiwyg
网评：
优点：外观简洁大方，使用方便，支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性没有强制规定的样式。缺点：没有表情包 , 没有开发文档不便于阅读使用，无字体变色，无视频上传功能/p/bootstrap-wysiwyg/
小编没有去研究这个玩意，不多做评论
3.5、QuillEditor
Quill是一个很流行的富文本编辑器，github上star大约21k
这个小编亲自研究过，所以谈谈看法
1.依旧是集成简单，真的挺简单的。而且有Vue版本可以提供下载。2.配置简单，使用ES6的语法进行配置。在vue项目里面使用的话真的挺合适的。3.图片的拖拽，上传，缩放等功能需要额外的扩展。官方提供了扩展支持。但是扩展的时候容易踩坑。我扩展图片的支持功能时花了一下午。诶，真是太菜了。4.表格功能也需要扩展。而且竟然没有把表格做到工具栏里面，需要自己另外添加按钮去扩展。真的有点介意这个
可以说也是很简洁了，就是拓展那些功能有点烦。
唯一比较喜欢的地方，图片是默认用base64方式存储。功能还不够强大，但是还是比较可以的了。
6、CKEditor
网评：
国外开源，功能强大，使用较多，可以看他们官网的例子，马上就有感觉。优点：编辑能力极强，基本和word差不多了。看起来界面极其优秀的一款。缺点：网站访问速度一般，文档英文，需要花时间开发，没有字体变色和视频上传功能，需要另外配置/
这个小编也写过demo。具体来说是不太喜欢。如果有想尝试的，可以去看这篇博文
ckeditor使用教程
这里面讲得还挺详细，就是坑也有点多。
4.Ueditor的集成
言归正传，之所以选择Ueditor，是因为其庞大的功能支持。算是比较靠谱的一款富文本编辑器了。如果是我自己的项目，我会考虑采用wangEditor。
官网地址
大致分为以下步骤（传统的模式）
1.去官网下载源码2.源码编译3.集成
然后新手就会发现，除了下载源码之外，另外两步都无法解决。
所以，小编换了一种方式来为大家提供编译后的源码。
链接：ueditor emo下载
提取码：p0oo
进入百度网盘，下载ueditor的demo。
接下后找到里面的static文件夹。
这里面存放的已经是一个可用的ueditor插件了。
我们复制这个目录内的ueditor文件夹，粘贴到自己的项目目录的static目录下。没有的可以自己创建一个。
如上图，我复制过去之后重命名为ue。里面的文件如下图所示。
创建Ueditor.vue，封装富文本编辑器组件
<template><div><script id="editor" type="text/plain"></script></div></template><script>import '../../static/ue/ueditor.config.js'import '../../static/ue/ueditor.parse.min.js'import '../../static/ue/ueditor.all.js'import '../../static/ue/lang/zh-cn/zh-cn.js'export default {name: "ue",data() {return {editor: null};},props: {value: "", //动态传值config: {} //动态传入配置},mounted() {const _this = this;_this.editor = window.UE.getEditor("editor", _this.config);// 初始化UE_this.editor.addListener("ready", function() {_this.editor.setContent(_this.value);// 确保UE加载完成后，放入内容。});},methods: {getUEContent() {// 获取内容方法return this.editor.getContent();}},destroyed() {this.editor.destroy();}};</script>
在组件中引入ueditor相关的js文件。然后就是初始化插件。
在需要的页面中引入
import Ueditor from './UEditor.vue'; //引入组件components: {Ueditor //注册组件}<!-- 使用组件--><Ueditor class="ueditor" :value="ueditor.value" id="editor" :config="ueditor.config" ref="ue"></Ueditor>data(){return{ueditor: {value: '编辑默认文字',config: {}},}}
完整的页面引用代码
<template><div class="hello"><Ueditor class="ueditor" :value="ueditor.value" id="editor" :config="ueditor.config" ref="ue"></Ueditor></div></template><script>import Ueditor from './UEditor.vue'; //引入组件export default {name: 'HelloWorld',components:{Ueditor }props: {msg: String}}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>
如果出现如下错误：
并且页面像下面这种情况的话
第一个是错误后台配置错误，先不用管。
第二个是ueditor的部分js和css被重定向了。或者是找不着了。这就很气人了呀。
首先，排查自己的开发环境。build.js。或者config/index.js中的publicPath和assetPublicPath是否正确。要确保上图所示的几个请求能访问到而不是被重定向，解决了这个问题，ueditor就出来了。
注意，网上有的人说把webpack.dev.config.js中的下面几行代码注释掉。这里小编提醒大家，千万千万不要注释，注释了你会发现无论怎么改，都一个样。
const CopyWebpackPlugin = require('copy-webpack-plugin')new CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.dev.assetsSubDirectory,ignore: ['.*']}])
这个是集成进来的效果。
5.插入base64图片
这里我们要做的是插入base64而不是修改之前的上传图片部分的代码。本来最佳方案是新增一个按钮，点击按钮出现弹窗，在弹窗的页面将插入的图片拼接到editor。但是小编最后失败了，就很气。得找机会再试试。
下图是小编尝试后的效果图。
诶 一把辛酸泪。希望有大佬看的这个文章能帮忙指点一下咯。
接着我们的替代方案。找一个有弹窗的没用的功能来修改源码。妈耶，真刺激（实属无奈之举）。
由于项目需求，文章内不需要用到插入iframe这个功能，且插入iframe是一个弹窗呀。功能比较少，适合动刀子。我尝试过修改插入图片部分的弹窗，代码量多了不好改。这里我就贴修改好的代码啦。文件路径在
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript" src="../internal.js"></script><script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script><style type="text/css">.warp {width: 320px;height: 153px;margin-left: 5px;padding: 20px 0 0 15px;position: relative;}#url {width: 290px;margin-bottom: 2px;margin-left: -6px;margin-left: -2px\9;*margin-left: 0;_margin-left: 0;}.format span {display: inline-block;width: 58px;text-align: center;zoom: 1;}table td {padding: 5px 0;}#align {width: 65px;height: 23px;line-height: 22px;}</style></head><body><div class="warp"><table width="300" cellpadding="0" cellspacing="0"><tr><td colspan="2" class="format"><label>选择本地图片</label><input id="selfuploadimg" style="width:200px" id="url" type="file" accept="image/jpeg" value="" /></td></tr></table></div><script type="text/javascript">var base64str;insertBase64Img();function insertBase64Img() {$("input[type='file']").change(function() {var file = this.files[0];if (window.FileReader) {var reader = new FileReader();reader.readAsDataURL(file);//监听文件读取结束后事件 reader.onloadend = function(e) {// console.log(e.target.result + "路径")base64str=e.target.result;};}});}function insertBase64ImgToEditor(){var img ='<img src="'+base64str+'" width="200"/>'editor.execCommand('insertselfimg',img);}dialog.onok = insertBase64ImgToEditor;</script></body></html>
当然除了修改这一个弹窗之外，我们还得修改其他地方。因为这一句
editor.execCommand('insertselfimg',img);
我们只是提交了一个插入自定义图片的指令。我们还需要去执行这个指令，把图片插入编辑器。
我们需要在ueditor.all.js中插入代码。大概插入在11630行
mands['insertselfimg'] = {execCommand: function(cmd, opt) {console.log(opt,'self')var me = this;me.execCommand('insertHtml', opt);}}
和
mands['insertimage'] = {...}
平级。
我想这一步不会没人看不懂吧。由于是修改插入iframe的弹窗，其按钮之类的都已被定义过。所以只需要修改这两个地方就好了。
实现效果：点击插入iframe按钮，弹出上传图片的弹窗。
选择图片加入到了编辑器中，亲测图片拖拽，缩放等功能正常。
当然不可能就这么轻易结束，ueditor是默认不支持base64字符显示图片的。所以我们还需要接着修改源码。
在ueditor.all.js中大概10000行左右，删除掉这个case，即图中所示部分。
这时重新运行程序，上传本地图片到编辑器后就可以显示出来了。
切换至html部分就可以看到，图片的src不是一个url链接，而是base64字符串。
这样就达成我们想要的效果了。
转成base64字符串存储的有点：
1.更换服务器和域名对文章中的图片不会有影响
2.不容易出现图片丢失，文章在，图片就在。
3.更换服务器简单。
Vue项目玩转Ueditor（百度富文本编辑器） 解决图片需要上传服务器的问题 将图片转存base64字符串。
