11612
富文本编辑器是一个在后台管理系统项目中很大几率会使用到的组件。市面上的富文本编辑器非常多，但是该如何选择呢？个人觉得适合自己的才是最好的，最近项目中就有富文本编辑器使用的需求，在此记录一下实践过程，方便后期查阅。
常见富文本编辑器对比
WangEditor
：轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
vue版本
。一个国人独立开发的基于javascript和css开发的web富文本编辑器，之前用过感觉还是很不错的，UI漂亮，中文文档齐全并且开源。不足的地方在于更新不及时，没有强大的团队支撑。不过细心的会发现现在开始有动作了，成立了wangeditor-team来进行维护，可能也是应了广大用户的需求。
UEditor
：由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。不足在于官方很久没有更新了，现在已没有专门维护了，很多在线体验、下载地址都关闭了，而且样式比较老旧，不符合新时代的审美。插件使用复杂，前后端不分离。
Kindeditor
：一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。文档齐全，为中文，阅读方便。缺点：图片上传存在问题，上传历史过多，会全部加载，导致浏览器卡顿。
TinyMCE
：是一款易用、且功能强大的所见即所得的富文本编辑器。优势：插件丰富，自带插件基本涵盖日常所需功能；接口丰富，可扩展性强，有能力可以无限拓展功能；界面好看，符合现代审美；提供经典、内联、沉浸无干扰三种模式；多语言支持，官网可下载几十种语言。官方也在之前发布了 vue 版本的
tinymce-vue
，帮你封装好了很多东西
Vue-Quill-Editor
：基于
Quill
、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。据说大企业用的比较多，不限制框架，但是需要定制，理念很先进。
站在巨人的肩膀，适合自己的才是最重要的。这里我就以 TinyMCE 和 vue-quill-editor的在vue中基本使用来展示
Vue-Quill-Editor
中文文档地址：
www.kancloud.cn/liuwave/qui…
在线体验demo：
github.surmon.me/vue-quill-e…
下载依赖包：
npm install vue-quill-editor --save
npm install quill-image-extend-module
npm install quill-image-resize-module
1.全局安装
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, )
2.局部安装（与页面一起使用）
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/ImageExtend', ImageExtend)
Quill.register('modules/ImageResize', ImageResize)
使用组件：
components: {
quillEditor
// html
<quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" @change="onEditorRChange($event)" class="editor"/>
// data
// 富文本框参数设置 editorOption: { modules: { ImageExtend: { // 如果不作设置，即{} 则依然开启复制粘贴功能且以base64插入 name: 'img', // 图片参数名 size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb action: '', // 服务器地址, 如果action为空，则采用base64插入图片 // response 为一个函数用来获取服务器返回的具体图片地址 // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}} 则 return res.data.url response: (res) => { return res.info }, headers: (xhr) => { // xhr.setRequestHeader('myHeader','myValue') }, // 可选参数 设置请求头部 sizeError: () => {}, // 图片超过大小的回调 start: () => {}, // 可选参数 自定义开始上传触发事件 end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败 error: () => {}, // 可选参数 上传失败触发的事件 success: () => {}, // 可选参数 上传成功触发的事件 change: (xhr, formData) => { // xhr.setRequestHeader('myHeader','myValue') // formData.append('token', 'myToken') } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData }, toolbar: { // 如果不上传图片到服务器，此处不必配置 container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置 handlers: { image: function () { // 劫持原来的图片点击按钮事件 QuillWatch.emit(this.quill.id) } } }, ImageResize: true }, placeholder: 'Compose an epic...', // 占位符文字 readOnly: false // 是否设置为只读模式 }
// 初始化
computed: { editor () { return this.$refs.myQuillEditor.quill }}
运行查看：
imports报错，当前项目环境配置vue + vue-cli3，查阅资料发现原因是在vue脚手架中使用，需要单独配置webpack，解决方案：
const webpack = require('webpack')
vue-cli3配置:
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
vue-cli2配置:
module.exports = {
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
最后记得一定要重启服务 npm run serve才会生效
最终效果：
TinyMCE
在线体验地址：www.tiny.cloud/features/
官方vue集成方案文档：www.tiny.cloud/docs/integr…
中文文档：tinymce.ax-z.cn/
开始使用：
下载依赖包：
npm install tinymce
npm install @tinymce/tinymce-vue
下载汉化包：
地址：www.tiny.cloud/get-tiny/la…
将下载解压的文件放在pulic文件夹中：
全部安装 或 局部安装：
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/plugins/link'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/image'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/wordcount'
！注意：一定要引入 import 'tinymce/icons/default/icons' 否则会有如下报错：
使用组件：
<editor
v-model="tinymceHtml"
id="tinymce"
api-key="no-api-key"
:disabled="editorOptions.disabled"
:init="editorOptions.editorInit"
output-format="html"
@onChange="handleChange"
editorInit: {
selector: '#tinymce',
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: '/tinymce/skins/ui/oxide',
height: 300,
plugins: 'link lists image code table wordcount',
toolbar: 'undo redo | bold italic underline strikethrough | formatselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | link unlink table image | removeformat',
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
images_upload_base_path: 'http://xxxx.com',
images_upload_url: '/api/',
statusbar: true,
menubar: false,
branding: false,
max_height: 500,
min_height: 300
mounted () {
tinymce.init({})
图片上传：
两种方式，第一种是直接配置 images_upload_url 设置你的上传api，如上图。第二种：配置images_upload_handler
images_upload_handler: (blobInfo, success, failure) => {
this.handleImgUpload(blobInfo, success, failure)
methods：{
handleImgUpload (blobInfo, success, failure) { this.baseUrl = '你的baseurl' const imgBase64 = `data:${blobInfo.blob().type};base64,${blobInfo.base64()}` const data = { img: [imgBase64] } uploadImgage (data).then(res => {
以上就是vue项目中富文本编辑器vue-quill-editor 和 tinymce最基本的使用方式，在实际项目中可以封装为公共组件来使用，完整项目地址：github.com/happydele/v…
攻城狮_阿樂
Web前端工程师
25.6k
粉丝
