之前想在 lens 上构建一个文章发布平台,后面越做越不对劲,感觉就是 Mirror 的跨链版本,没有价值,现在也是处于半弃坑状态。这里记录下项目过程探索的一些富文本编辑器,及各个对比。
Editor.js https://editorjs.io/
一个模块化、易于扩展和定制的编辑器。它采用基于块的编辑方式,使内容组织和格式化变得简单。
最早尝试使用的编辑器,用它来做类似 Notion 的应用很方便。可以输出为 JSON 格式,方便直接存储到 IPFS 上。有很多插件覆盖了大部分编辑器需要的功能,即插即用,针对项目对插件做些微调就行。只是缺少对 TS 的支持让我用的难受,以及编辑器的样式很难改,我想要的是 Mirror 的 WYSIWYG 效果,至少我改不动。抛开这些缺点,用它做一个编辑器也是够用了。
Lexical https://lexical.dev/
Facebook 团队搞的一个可扩展的文本编辑器框架
抛弃了 Editor.js 后,找到了 Lexical,感觉是可以符合我的需求的。研究了下确实足够自由,对 TS 也足够支持,可以扩展成想要的编辑器。只是深入研究发现这东西还只是个框架,足够自由也足够繁琐,要定义自己的 node,插件也需要自己写,也就是要做成自己的编辑器还要再封装一层。而且 Lexcial 目前还处于早期开发状态,官方文档不够详细,用在个人项目里还是有后期维护风险。感觉成本过高,就放弃使用。
PS:https://github.com/ozanyurtsever/verbum github 上一个基于 Lexical 的编辑器,使用上相对简单点。
TinyMCE https://www.tiny.cloud/
功能丰富且成熟的富文本编辑器
TinyMCE 已经是成熟的商业应用了,可以满足大多数富文本编辑需求,包括文本格式化、图片和媒体插入、列表和表格创建等。提供了许多官方和社区插件,以及易于使用的 API,便于轻松地定制编辑器,以满足特定需求。文档方面也足够详细,基本覆盖所有可见的问题。允许用户定制编辑器的外观,以适应项目的设计需求。
这是目前个人感觉综合性价比最好的编辑器了,足够简单也足够复杂,适用于各种需求。缺点是性能问题,尤其是在加载较多插件或处理大量内容时。部分插件功能需要收费,但可以自己定制插件来解决。
CKEditor https://ckeditor.com/
功能丰富且成熟的富文本编辑器
与 TinyMCE 类似,就没深入研究了。不过 CKEditor 有个新功能我很喜欢,可以直接上传 doc 文件,并且保留 doc 文件的样式。这对有许多 doc 文件要处理的公司非常有用。只是局限于 HTML,CKEditor 还无法做到自动分页,以及导入页眉页脚,需要手动做处理。
CodeMirror https://codemirror.net/
轻量级的代码编辑器,主要针对代码编辑
CodeMirror 了解也不多,仅做一家之言。严格讲 CodeMirror 确实不算富文本编辑器,但是对 markdown 的支持可以扩展为富文本编辑器,正如 xlog 目前做的这样。最大优势是足够轻量,没有上述的性能问题。只是要作为一个编辑器,在体验上还不够好,需要更多定制。比如,xlog 目前我上传的图片还无法定义图片的大小,位置,添加 caption。
最后感想就是,要在项目里为用户提供一个好用的长文章编辑器真是不容易。