WYSIWYG富文本编辑器选择——综合考虑功能与版权协议

如果奔着盗版好使的情况，TinyMCE yyds，如果只要基础的文本编辑功能，quill 小而精，如果是react项目，推荐lexical，个人最终选择wangeditor 

TinyMCE

官网：https://www.tiny.cloud

体验地址：https://www.tiny.cloud/docs/tinymce/6/full-featured-premium-demo/

TinyMCE 是富文本编辑器领域的头部玩家之一，主流富文本编辑器，功能非常全，你需要的大多数功能它都支持。排出复杂又美观文章样式，代码高亮等都是基础功能。它甚至有点像在线版的 Word，可以在顶部的各种菜单中找到你要的功能。

TinyMCE个人认为是功能就全，使用体验最好的编辑器。但是不是商用版本，功能就很少了

开源协议

开源协议很鸡贼，develop分支为MIT，正式版都为GUN2

协议地址：https://github.com/tinymce/tinymce/blob/release/5.10/LICENSE.TXT

商用情况：

基础社区版本免费，专业版80美刀一个月。这个和jetbrains 系列产品很像。

tinymce主程序及自带的大部分插件均提供社区开源版，可免费使用且可商用。tinymce的主要盈利模式为【付费插件及拓展服务】，有关付费项目的列表，请参考：https://www.tiny.cloud/pricing

社区版的，还不如quill 小而精呢

前端各个版本支持：

vue2/vue3 react angularJS 都提供了官方支持

TinyMCE is easily integrated into your projects with the help of components such as:

• tinymce-react
• tinymce-vue(vue2 版本在4)
• tinymce-angular

CKEditor

官网：https://ckeditor.com/ckeditor-5/demo/

体验地址：https://ckeditor.com/docs/ckeditor5/latest/examples/index.html

CKEditor是一款老牌的文本编辑器，是编辑器前辈 FCkEditor 的基础上开发的全新版本。最新的CKEditor5官方版软件体积非常小巧，模块开发，使用起来也十分方便快捷，还能与不同的编程语言相结合，是大家编辑网页代码的必备工具。

开源协议

起初以为GUN协议：但是, too young ,too simple 

Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.

协议地址：https://github.com/ckeditor/ckeditor5/blob/master/LICENSE.md

商用情况：

https://ckeditor.com/pricing/

5个人用户免费

Total number of unique users in your company (in case of internal application) or in ALL the companies that are your customers (in case of OEM/SaaS solution) that access CKEditor at least once in a month. 也就是说如果你是公司内部用，就是你公司的用户数，如果你是做Saas，就是你所有客户的用户数加起来，他不会来统计，需要你们自觉遵守并购买合适的License。

前端各个版本支持：

vue2/vue3 react angularJS 都提供了官方支持，

需要在项目工程里面找：https://github.com/orgs/ckeditor/repositories?type=all

• ckeditor5-react
• ckeditor5-vue
• ckeditor5-vue2
• ckeditor5-angular

quill

网址：https://quilljs.com/

体验地址：https://quilljs.com/playground/

Quill是轻型的编辑器，样式一般（黑白风），功能中等，它的代码高亮功能比较强，同样支持行内编辑模式，工具条可自定义。

但是，quill 没有一些常规编辑器都有的标配功能，比如表格，如果你想找一款轻巧，不需要太多复杂功能，对代码编辑友好的编辑器，Quill 是不错的选择。

开源协议

开源协议BSD3：https://github.com/quilljs/quill/blob/develop/LICENSE

功能方面没有 TinyMCE与CKEditor丰富，特别是表格方面。

前端各个版本支持：

自己动手，丰衣足食，手动狗头！

Quill 是目前开源的富文本编辑器里面 star 数最高，而且模块化支持的也比较友好，不过 Quill 比较难以接受的缺点就是对嵌套结构的 DOM 不够友好，例如在 table 标签里面 加 ul li 标签，这样的解构 Quill 需要自己开发相关的插件来支持，成本不小

个人不喜欢这个编辑器

lexical

官网：https://lexical.dev/

体验地址：https://playground.lexical.dev/

Facebook出品，这个是精品

其实 facebook 早在 2016-02-19 就开源一个一款富文本编辑器叫 draft-js，那为何又要再开源 Lexical 呢？

开源协议

MIT ：https://github.com/facebook/lexical/blob/main/LICENSE

前端各个版本支持：

原生支持react，其他版本？黑人问号

如果是react 项目，强力推荐lexical——Lexical 本身是比较切合 React 的，这个是天生自带的优势！

wangeditor

官网：https://www.wangeditor.com/

体验地址：https://www.wangeditor.com/demo/index.html

功能么有tinyMCE与CKEditor 丰富，但是基本也够用了！

开源协议

MIT ：https://github.com/wangeditor-team/wangEditor/blob/master/LICENSE

前端各个版本支持：

• wangEditor-for-vue
• wangEditor-for-vue3
• wangEditor-for-react

综合对比：

上面的编辑器综合对比：

https://www.npmtrends.com/ckeditor-vs-quill-vs-tinymce-vs-lexical

最终总结：

1. 如果是用盗版的风格：
   1. 个人推荐tinyMCE，好用，易用。
2. 如果就免费开源来源说：
   1. react 项目，推荐lexical
   2. vue项目，推荐wangeditor

参考文章：

Quill富文本编辑器的实践 - DevUI https://segmentfault.com/a/1190000040077951

别再找了，Github 热门开源富文本编辑器，最实用的都在这里了 - https://www.mrdoc.fun/doc/40/

我做编辑器这些年：钉钉文档编辑器的前世今生 https://zhuanlan.zhihu.com/p/157215963

富文本编辑器调研 https://liuhuiashazj.github.io/2017/11/13/41/

最好用的 7 款 Vue 富文本编辑器 https://kalacloud.com/blog/vue-richtext-editor/

转载本站文章《WYSIWYG富文本编辑器选择——综合考虑功能与版权协议》, 请注明出处：https://www.zhoulujun.cn/html/php/phpcms/2022_0510_8810.html