2022 前端富文本编辑器该怎么选

[redtech]

目前市面上比较知名的编辑器如：

• TinyMCE - 富文本编辑器里的 Word ，功能丰富
• tiptap - 多人在线实时协同编辑
• CKEditor 5 - 开源免费可商用，行内编辑
• Quill - 易扩展、轻量级二开、代码高亮好用
• Froala - 插件丰富，UI 友好，编辑器里的苹果
• summernote - 恰到好处的轻，可直接粘贴图片
• slate - 模型设计的很精巧
• etherpad-lite - 国内很多在线文档的参照

以上编辑器，TinyMCE 和 CK 对表格的支持还算不错

其他的几个在表格方面就比较弱了

鄙人也参与开发了一个（项目的创始人是安扎东，我仅仅是凑数的） 功能丰富 但是由于是基于 contenteditable 部分功能的实现不完善 暂时还上不了台面 欢迎参与共建

github.com/yanmao-cc/am-editor

商业项目依然推荐以上几个老牌知名的 个人项目倒是可以试试 am

am-editor的优势：

• 功能齐全，够用好用

• 表格功能在市面上做的应该是最好的之一 后续还会在这方面投入更多精力进行优化

• 支持低成本实现多人协作

夹带一些私货

非常欢迎关注我的 GitHub🐱： github.com/byoungd

看我怎么从一个门外汉一路坑蒙拐骗水到了一个正儿八经的开源组织管理者的 😁

[redtech]

这个项目暂时还到不了推行的阶段 因为 toolbar 的实现绑定了 antd 目前正在去 以使整个项目达到一个更轻巧的状态

由于本人在这方面也不是砖家 欢迎大佬来帮忙打怪升级啊

[kimown]

draftjs

[iamqiwei]

客户说要用秀米，你还是得用 ueditor ，秀米什么时候倒闭

[K120]

https://github.com/xjh22222228/awesome-web-editor

[stkstkss]

@iamqiwei 哈哈哈

[forsigner]

Slate.js 可玩性高

[hfpp2012]

除了 TinyMCE 都是是垃圾

[redtech]

@hfpp2012 这个评价太武断了啊

[IvanLi127]

用过 1,3,4 ，还可以。个人感觉 1 比 3 好，3 比 4 好。

[redtech]

@IvanLi127 quill 的表格支持很弱 这点就让我在选择时 pass 掉了

[rabbbit]

TinyMCE

[redtech]

@K120 am-editor 在这个 list 里是否能有姓名？

[SingeeKing]

所以比 TinyMCE 的话优势在哪里呢？有个对比吗

[redtech]

@SingeeKing 支持 ot 进行协同 主要是可以低成本的实现多人协作 以及表格的功能对标金山文档（借鉴） 操作起来简单且强大

[pigspy]

有没有基于 slate 封装的比较好的编辑器啊

[redtech]

@pigspy slate 可玩性高 但是真的玩起来的项目都内部使用了 不愿意开源的

[redtech]

@K120 提了 pr 了

[andrew2558]

如果是 react ，可以考虑一下 plate ，是基于 slate 的，不过好像主要是一个人在维护，功能还不太完善。表格也还很简单

[andrew2558]

@pigspy plate 是基于 slate 的，不过只能在 react 上使用

[zzlatan]

富文本编辑器里涉及到公式编辑的哪个好用一些？

[charlie21]

https://www.primefaces.org/primereact/editor/ react 的，UI 套装里自带 editor 了

[andrew2558]

plate: https://plate.udecode.io/

[FallenMax]

如果要在中文环境下用，选框架前先在 repo 里搜搜 IME/CJK 相关 bug ，thank me later

[Nich0la5]

借楼问一下，现在的代码编辑器库哪个好一点，提供简单的格式括号补全，代码高亮，事件监听的基础上尽量好看

[Jafee]

知乎那个编辑器是真好用，可惜没有开源。

[MarquesMa]

你要是就要一个编辑器放在那里，不需要什么后续功能，哪个都行。

要是估计后续乱七八糟定制需求会很多的话，建议还是 Slate 这种，不然天天跟编辑器搏斗高血压都上来了。

[MarquesMa]

@redtech 然后 Slate 协同，可以看一下 Y.js ，有 slate 的 binding ，是基于 CRDT 的。

[redtech]

@iamqiwei 国内的场景比较特殊啊 还有公众号 小程序的需求就更需要定制化的方案了

@Jafee 知乎之前也是基于 draft 吧 现在是自研？

[redtech]

@andrew2558 plate 在表格方面的功能是令人遗憾的 目前也没有人积极去做表格的功能 抛开表格的需求 还是挺香的

[redtech]

@charlie21 primereact - Editor is rich text editor component based on Quill. 基于 quill

[timpaik]

手机上打开好卡啊....

[redtech]

@timpaik 富文本编辑器的使用场景目前的重点依然是 PC 端 mobile 端的优化空间还很大

[redtech]

@MarquesMa 如果对表格功能没有比较重的需求 比如拖拽设置宽高 合并单元格等操作 作为我本人来说 tiptap 和 slate 是首选

[Mjhhh]

目前支持复制粘贴本地 word 图文的是不是只有 CKEditor 5 ？

[AlisonYang]

诶， 想参与你这个开源项目， 能聊聊吗？

[redtech]

@SingeeKing 当然 am 也支持导入 markdown 后续也许会在 md 方面做一些加强
@AlisonYang 你可以先 fork 项目参与完善 然后提 pr 当然如果想要有更多的沟通可以通过微信 tg 这类的 沟通工具

[redtech]

@Mjhhh 金山文档等一众在线文档在这方面已经做的不错了 word 其实是需要将 openxml 与 html 这一套东西进行映射 我已经实现了一个简单的 但是目前还不能开源

[proger]

借楼，想问一下移动端上比较不错的编辑器有吗？ 不用非常丰富的功能要求，最基本的编辑器 加粗 /斜体 /图片这种就行

[Rwing]

我觉得富文本编辑器最重要的一个特质应该是，面向非专业人员易用，毕竟最多的使用用户是“编辑、客服、商品信息运维人员”等等

[fernandoxu]

draftjs 还是很不错的

[wanguorui123]

目前编辑器最好的还是石墨笔记的但是不开源商业版

[redtech]

@fernandoxu 我的看法是 简单好用够用 即可 至于模型已经多人协作的事情 大厂都会自研的
@Rwing 依然是表格功能较弱

[redtech]

@wanguorui123 那是他的命根子 开源就准备 gg

[GrapeCityChina]

要是有资金的话，建议使用商业的 SpreadJS ，体验一下就知道了： https://www.grapecity.com.cn/developer/spreadjs

[redtech]

@GrapeCityChina 普通文档中的表格和电子表格的需求是有区别的 关注过你们 在电子表格这块做的的确蛮好的

[abccccabc]

@Mjhhh 如果不是图文一起复制的话，ueditor 已经实现了。至少我在用这个功能。

[redtech]

@abccccabc 图片复制的思路粗糙点的实现可以很简单 直接转 base64

[leelz]

wangEditor https://www.wangeditor.com/

[redtech]

@leelz V5 版本的开发进度太慢了

[redtech]

@leelz 国内还有一个 textBus 其实也蛮好的

[zy5a59]

Vditor 还不错吧 https://b3log.org/vditor/demo/preview.html ，之前基于 Vditor 还写过一个 Chrome 插件
https://chrome.google.com/webstore/detail/newtab-editor/ffilklcelobcboidfinknighfknimkin

[kilasuelika]

suneditor ，以前用过，相比其它的特长是支持数学公式。

[demonzoo]

没人提 tiptap ？

[Mjhhh]

@abccccabc 就是 Ctrl+A ，Ctrl+C 把整个 Word 图片文字一键复制粘贴到富文本，目前我只知道 CKEditor 5 有支持。

[redtech]

@demonzoo 第二条就有写呀

[redtech]

@kilasuelika 我们开发的这个也是支持公式的呢 🎉

[redtech]

@zy5a59 Vditor 已经不是被积极维护的仓库了

[redtech]

@Mjhhh 从国内的生态来看 最大程度兼容 word/wps 会是个比较吸引人的需求吧？

[ae86]

https://prosemirror.net/

没人说这个？我之前挑编辑器 选择了这个

[redtech]

@ae86 tiptap 是基于这个封装的 pm 更偏向于编辑器框架 不是开箱即用的 故没有写

[Doanldkickyou]

正在做基于 Slate 开发的工作，视图层用 slate-angular ，原本是用 Quill 的，后面需求来了发现定制起来很麻烦，调研一番，就改用 Slate 了，不得不说 Slate 的设计真的很棒

[Chingim]

想了解下富文本编辑器, 哪个项目的源码 /设计比较优雅可以推荐下吗

[redtech]

@Chingim 问就是 slate 啊 😄

[devwolf]

问一下熟悉 TinyMCE 老哥们，是否 tinymce 可以实现 am-editor 里的大纲 outline 功能呢？

刚好我这边年初也在调研当前项目所用 braft-editor 的上位替代，开发人员这边顺着"支持 react + github 高星递减"一路筛选下来决定用 tingymce-react ，结果产品那边找到 am-editor ，并希望实现里面的大纲功能
https://editor.aomao.com/plugin/plugin-heading#outline

目前就比较头大……百度初步搜了一下,别的富文本好像也就 quill 有，但也是博客里手搓的 vue 版

[redtech]

@devwolf 可以实现 toc 功能 tinyMce 是不是自带插件呢

[devwolf]

@redtech 对，tinymce 里有个 toc 生成目录，但是无法实现编辑时的锚点跳转，就是和 am-editor 版 outline 实现有差异。

实在不行就顺着产品用 am-editor 了……但就是感觉开发这边白调研了 orz

[kilasuelika]

@redtech 看了一下，你们这个功能比 suneditor 丰富一些，以后试一试

[redtech]

@devwolf tinymce 是基于 iframe 的 所以自己实现起来稍微有点麻烦 我们基于 tiny 开发过类似的功能

[kilasuelika]

@redtech 这个可不可以在纯 js 的环境中用呢。
有时候只需要写个简单的 html 网页，如果还要去弄 npm 那些感觉太麻烦了。

[demonzoo]

@demonzoo 第二条就有写呀
==============
@redtech 看漏了，不好意思 🐶

[BlackJac95]

你们的 demo 对新手或者不熟悉前端的后端很不友好[捂脸]

[redtech]

@BlackJac95 嗯 文档目前过于简陋 会尽快简化上手难度

[redtech]

@kilasuelika 后续或许会提供

[Mjhhh]

@redtech 目前我所知道的（至少我所在的公司是这样），有不少人喜欢在 word\wps 编辑文章，然后再复制到网页的富文本进行发布，CKEditor 5 兼容样式与图文的特性，应该是最适合的

[redtech]

@Mjhhh 有这种需求 很多运营就是这么做的

[AlisonYang]

加个 V 聊一下 YJ_NeverFall ，想参与开发是从 bugfix 做起吗？

[zalss]

@Chingim pm ckeditor5 都可以 模型->转换器->视图

[redtech]

@AlisonYang 不一定是 bugfix 文档的完善等都是可以的

[4424l]

markdown 加模板方便好用

[marsyu6211]

@iamqiwei 不能太赞同了，所有功能写在一个文件，3w 行代码看哭了

[abccccabc]

@Mjhhh 你有配置过 ckeditor5 实现从 word 复制文本+图片成功吗？可否共享一份？我一直想做这个功能，无耐一个做后端的，实现一个这样的功能实在是力不从心。以前准备在 fckeditor2 中实现，结果实现了一个乌龙。后来就再也没有想过图文复制 word 的功能了。

[redtech]

@abccccabc CK5 应该是由一个商业的插件来支持这个功能的

[Mjhhh]

插件是免费的，要把文件拖拽上传功能给配置好，就能图文一起复制粘贴了
https://ckeditor.com/docs/ckeditor4/latest/examples/fileupload.html
链接: https://pan.baidu.com/s/1qT0aD0OO-LDImiAjtgN-AA 提取码: 55kr 复制这段内容后打开百度网盘手机 App ，操作更方便哦

[Mjhhh]

@abccccabc 看楼上

[abccccabc]

@Mjhhh 多谢

[wdssmq]

https://gitee.com/iceui/iceEditor

帮别人安利一发。。

[redtech]

@wdssmq 像是 layui 的感觉 作者是同一批人吗？

[bojue]

@hfpp2012 你用过几个