最近在用vue + element-ui对公司的后台管理系统进行构建，听说这个后台管理系统是零几年的产物，历史古老，看界面就看得出是前前端不分离时期，PHP前端工程师做的，不符合我们95后程序员的审美，而且上面的富文本编辑器只是太老的，而且很难用，没有视频上传功能，而且也没有上传图片功能，文本插入图片是用base64插入的，难用界面还丑。在建构管理后台，我经常在找一个逼格高的，好用的富文本编辑器，经过这几天的追寻，我总算找到了一个完美的编辑器，它就是——Quill。
UEditor
在找到这个编辑器的时侯，我先是试用了百度的UEditor。UEditor 是由百度「FEX后端研制团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户感受等特性，开源基于MIT合同，允许自由使用跟更改代码。
这个编辑器的特点是功能多，可以上传图片视频至服务器上，但是界面很老，不耐看，功能劣势还有，例如上传图片跟视频要前端配合改插口typecho 富文本编辑器，不然弄不了，我去找前端，后端不肯配合我，真使人头大，所以我舍弃这个富文本编辑器了。
UEditor
wangEditor
wangEditor是一个国人开发的开源的 轻量级 web 富文本编辑器 ，配置便捷，使用简略。界面超级简约，但是我不太喜欢这个界面，而且也不支持上传图片跟视频。所以我舍弃了。
wangEditor
TinyMCE
TinyMCE是可订制，灵活的一款富文本编辑器。界面设计太美观，功能只是超级强悍的，支持扩充许多初级功能跟附加组件，支持拼写检测typecho 富文本编辑器，图片视频上传等等，应该是现在后端最强的编辑器了，这个编辑器哪些都好，但是讨钱，公司太抠，不会忍心出一分钱的，哈哈哈。
TinyMCE
CKEditor
CKEditor虽说不错，但是功能比较基础，有图片上传功能，没有视频上传功能，但是它有行内编辑功能，还可以拖曳缩小图片，这个功能还是很强悍的，至少其他编辑器似乎都没有这个功能。
CKEditor
Quill
Quill,用上去最舒服的编辑器，想要的功能都有，搭配丰富的插件使用上去酸溜溜，界面简约，美观，功能其实不是这些，但是不慌，我们可以给它搭配各种各样的插件，拓展功能，而且这个编辑器开源免费，插件也好多。
搭配quill-video-image-module插件就可以实现视频上传，图片上传至服务器，而且视频还是用video标签插入的，而不是iframe，还实现了英文提示框，中文功能描述。quill及其功能拓展插件使用方式如下：
<pre class="syl-page-code hljs coffeescript">`npm i vue-quill-editor
npm i quill
npm i quill-video-image-module`</pre>
<pre class="syl-page-code hljs xml">`
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
import {
quillEditor,
Quill} from 'vue-quill-editor';
import {
container,
addQuillTitle} from 'quill-video-image-module';
import {
ImageExtend,
QuillWatch} from 'quill-video-image-module';
import {
VideoExtend,
QuillVideoWatch} from 'quill-video-image-module'
// 引入video模块并注册
import video from 'quill-video-image-module/video'
Quill.register(video, true)
Quill.register('modules/ImageResize', ImageResize)
Quill.register('modules/ImageExtend', ImageExtend)
Quill.register('modules/VideoExtend', VideoExtend)
export default {
components: {
quillEditor
},
data() {
return {
content: '',
// 富文本框参数设置
editorOption: {
modules: {
ImageResize: {},
ImageExtend: {
loading: true, // 可选参数 是否显示上传进度和提示语
name: 'img', // 图片参数名
size: 1, // 可选参数 图片大小，单位为M，1M = 1024kb
action: 'http://127.0.0.1:5000/upload/img', // 服务器地址, 如果action为空，则采用base64插入图片
// response 为一个函数用来获取服务器返回的具体图片地址
// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
// 则 return res.data.url
response: res => {
return res.data.url;
},
headers: () => {}, // 可选参数 设置请求头部
start: () => {}, // 可选参数 自定义开始上传触发事件
end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
error: () => {}, // 可选参数 自定义网络错误触发的事件
change: () => {
formData.append('key', localStorage.getItem('token'));
}, // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
sizeError: () => {
alert('图片不能大于1M')
}
},
VideoExtend: {
loading: true,
name: 'img',
size: 100, // 可选参数 视频大小，单位为M，1M = 1024kb
action: 'http://127.0.0.1:5000/upload/img', // 视频上传接口
headers: (xhr) => {
// set custom token(optional)
},
change: (xhr, formData) => {
formData.append('key', localStorage.getItem('token'));
},
response: (res) => {
// video uploaded path
// custom your own
return res.data.url;
},
sizeError: () => {
alert('视频不能大于100M')
}
},
toolbar: {
container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置
handlers: {
image: function() {
// 劫持原来的图片点击按钮事件
QuillWatch.emit(this.quill.id);
},
video: function() {
QuillVideoWatch.emit(this.quill.id)
}
}
}
}
}
};
},
methods: {},
created() {
},
mounted() {
addQuillTitle();
}};
.createArticle {
padding: 40px 40px;}
.ql-editor {
min-height: 800px;}
`</pre>
如果这篇文章正好能帮至你，麻烦顺手点个赞吧，谢谢了。
