持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

前言

平时的业务中或多多少会用到富文本编辑器，奈何开源的富文本编辑器太多了，一时之间就犯了选择困难症；

我将富文本编辑器分为两类：第一类是老牌子富文本编辑器，UI界面特别丑陋但是功能齐全，例如百度出品的UEEditor，这一类不符合我们的审美所以不作比较；第二类是比较现代化的富文本，UI界面简洁大气，例如：国人出品的WangEditor、ckeditor、tinymce、quill

富文本编辑器的实现原理

1 通过嵌入iframe进行富文本的编辑功能，iframe.contentWindow.document.body.contentEditable = true即可让iframe支持编辑,当监听input事件可以拿到实时数据的变化；

<iframe id="iframe"  frameborder="0"></iframe>
<script>
  const iframe = document.getElementById('iframe')
  iframe.contentWindow.document.body.contentEditable = true
  iframe.contentWindow.document.body.addEventListener('input',e=>{
    console.log(e.target)
  })
</script>

2 普通元素设置contentEditable，同上，绝大部分富文本编辑器使用这种方式

tinymce

tinymce的用法请看：tinymce中文文档，引入tinymce主要有两种方式，第一种：CDN引入，需要把完整文件包部署到CDN；第二种：npm包引入，比CDN操作要简单一些

tinymce插件系统：tinymce里面可以自由开发插件自定义UI和功能，非常强大，扩展性强

tinymce进行了移动端适配，这是唯一一个支持移动端的富文本，虽然在移动端进行富文本编辑并不是一个好主意

著名缺陷管理工具”jira“就是用的tinymce编辑器，只不过它加入了很多自定义的内容，优化了用户体验

所以利用tinymce编辑器，只要给我们足够多的开发时间，可以做的很完善

WangEditor

WangEditor是国内社区开发的一个开源项目，没有其他项目功能强大，但是它的文档比较完善，文档都是中文比较方便查阅

WangEditor的一个最大的问题就是：当回车之后会产生<br/>，不方便进行判空处理

quill与富文本安全性

Quill富文本编辑器的思想与其他富文本不同，他是以json去表达富文本的内容，然后将json转化为html去展示；为什么这样做呢？是为了富文本的安全性，富文本是最容易遭受攻击的场所之一，因此做好富文本的安全处理至关重要

Quill的缺点：他支持的功能太少了，如果只是想进行文字编辑、简答的图片插入可以使用Quill，比较轻量，但是不方便后续扩展

ckEditor

ckEditor也可以基于插件系统进行扩展

ckEditor可以集成化引入：它有一个build工具，自由选择自己需要的功能，然后打包成一个js文件，直接集成引入进来；

此外ckEditor支持：

导出PDF、Word
导入HTML

选择富文本需要注意的

看扩展性是否强，功能是否多，否则等到后面要更换富文本就得不偿失了，所以经过这个标准我们待选的只有tinymce、ckEditor
是否支持汉化
文档是否健全，可以少走很多弯路

tinymce有中文文档；但是ckEditor只能去官网看，访问速度比较慢
看一下是否一直在维护，这样的话提issue比较方便

总结

富文本是一个复杂的组件，市面上的各种轮子经过大浪淘沙，也仅剩tinymce、ckEditor了，我们可以根据实际需求从中选择；

富文本编辑器哪家强

前言