• home > php > phpcms >

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

    Author:zhoulujun Date:

    2022 前端富文本编辑器该怎么选?TinyMCE、CKEditor、Quill、lexical、wangeditor 综合对比版本协议,易用性,个人喜好得出的推荐总结

    如果奔着盗版好使的情况,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

    tinyMCE开源协议文件tinyMCE开源协议文件

    商用情况:

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

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

    重要性功能(付费版)支持情况
    10加粗、斜体、删除、有序、无序列表、redo/undo、H1-H6、下划线、引用、对齐方式支持
    10插入删除链接/链接操作支持
    9粘贴链接支持
    10插入图片/图片操作(左右对齐、删除、大小)支持
    9图片粘贴支持
    10插入表格/表格操作支持
    10表格粘贴支持
    9自动列表支持
    9粘贴word支持
    8mention#支持
    9hashtag#不支持
    8emoji不支持
    8行内toolbar不支持
    8区块拖拽支持
    6快捷键支持
    4特殊字符支持
    5全屏支持
    3源码编辑支持
    2字体、颜色支持
    placeholder不支持
    多实例支持
    插入时间不支持
    批注不支持

    2.jpg

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


    前端各个版本支持:

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

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


    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


    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

    前端各个版本支持:



    综合对比:


    上面的编辑器综合对比:

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



    StarsIssuesVersionUpdatedCreated
    ckeditor51824.12.13 years ago6 years ago
    wangeditor--4.7.15a month ago6 years ago
    lexical8,7731670.2.76 hours ago8 years ago
    quill30,4831,1111.3.73 years ago10 years ago
    tinymce11,2169436.0.213 days ago8 years ago

    富文本编辑器推荐



    最终总结:

    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

    下一篇:Last page