常见富文本编辑器对比

[I am ne zha / Jeskson]

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 的富文本编辑器，支持服务端渲染和单页应用。据说大企业用的比较多，不限制框架，但是需要定制，理念很先进。

import VueUeidtorWrap from 'vue-ueditor-wrap'; ES6 Module
// or
const VueUeditorWrap = require('vue-ueditor-wrap'); CommonJS

https://juejin.cn/post/6844903856426450958

Vue-Quill-Editor：不支持本地视频上传

vue-froala-wysiwyg：我想要的功能都有包括图片和视频上传，还额外支持响应式，但是是收费的

ueditor:功能很全，但是样式实在是很丑,可能要自己封装

剩下的编辑器基本上要么是功能不足或者是移动端的(优点是轻量)

因为没做过富文本的开发，所以当时我测试这些富文本就花了一个下午，后来仔细考虑了一下，最后使用了比较保守的方式，用了ueditor开发，顺便美化了一下。

给图标绑定点击事件

插入图片，插入视频，插入文件这种操作，我并没有使用ueditor内置的功能，视频和文件夹我做成了进度条的形式，放在了富文本编辑器的下边，图片上传成功后返回值拼接起来，根据双向绑定，在editor组件内部动态创建图片，点击这三个图标，会把事件抛出来，这样你想用什么上传组件就用哪个，你还可以用socket进行上传等等，这样子，editor组件内部只需要维护编辑器的html文本就可以，职责单一，后期也好维护

    autoSaveBody () {
      if (this.isAutoSaved && this.editorData.body) {
        let storage = {}
        Object.assign(storage, this.editorData)
        const pms = JSON.stringify(storage)
        this.isAutoSaved = false
        setTimeout(() => {
          localStorage.setItem(this.storageKey, pms)
          this.isAutoSaved = true
        }, 500)
      }
    }

但是必须要考虑一个情况，当前是第一次写还是发布之后进行修改，所以外部使用的时候，你只需要操作innerValue这个属性，这个属性的值你可以通过后台来获取(后台获取的就是修改状态)，然后编辑器就会呈现什么样的数据,内部的实现方式就是加了一个init函数

缺点

组件太大，默认压缩也有389k,开启gzip之后有100k左右

优点

功能强大，产品需求可迭代。