浅谈富文本编辑器

铭馨
463 阅读4分钟

有句话不知当讲不当讲，富文本编辑器是前端的噩梦，也是所有前端开发的“天坑”。

前言

本人是做CRM管理中台开发的前端小白一枚，很多人可能不理解，一个文本编辑器组件为啥能难倒这么多人（当然也有一小部分例外，总之我不是）。那么请看接下来开发富文本编辑器需要考虑的一些基本因素：

  • 浏览器兼容性、输入法兼容性

    • chrome、safari、firefox、ie
    • 中英文、小语种

  • 复杂多变的需求、交互和 UI

    • 标题中不可出现图片
    • codeblock 不可 at
    • at 文本不可添加超链接
    • 数学公式的光标定位及排版
    • 动画、图片、视频编辑器

  • 用户的操作自由度非常大

    • 复制粘贴、拖拽、语音输入、直接改 DOM
    • 在线协同编辑文档
    • 低代码

  • 性能问题

    • 渲染优化
    • 协同策略
    • 数据结构
    • 差异化算法
    • 中间件缓存

不同的业务会有不同的需求，但一款面向大众的富文本编辑器却要同时兼容各种条件，那自然只能满足普遍大众的利益。小编这儿对富文本的功能需求非常大，市场普遍的富文本基本功能不足以满足需求（压力山大！！！），进而需要对富文本插件进行自定义开发，然后使用web components打包。

好像是2022年末的时候，对市场的富文本都做了一些基本的调研，其中大家最常用的几款应该是：

  • ProseMirror 基于 ContentEditable 的所见即所得 HTML 编辑器，功能强大，支持协作编辑和自定义文档模式 ProseMirror 库由多个单独的模块组成。一个理想的富文本编辑器产生结构化的、语义化的、有意义的文档的同时还要能够让用户能够容易的理解与使用。ProseMirror 试着在 Markdown 编辑体验和传统的 WYSIWYG 编辑体验中寻找一种融合的方法。它通过实现一个比普通的 HTML 具有更多的限制和结构化的 WYSIWYG 风格的接口来做到这点。你可以自定义编辑器创建的文档的结构和内容，使它们符合你应用的需要。
  • Draft.js 是Facebook 的一个开源项目，是 React 项目首选的富文本编辑器框架。这是一个健壮、可扩展和可定制的框架。Draft.js 遵循与 React 中的受控组件相同的范例，并提供了一个 Editor 呈现富文本输入的组件。它还公开了一个EditorStateAPI 来处理/存储Editor组件中的状态更新。
  • wangEditor 双越大佬的作品，使用Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费。它兼容常见的 PC 浏览器：Chrome，Firefox，Safar，Edge，QQ 浏览器，IE11。
  • slate.js 受 Draft.js 启发的富文本编辑器。它是一个可深度定制的富编辑器框架，专用于 React。与 Draft.js 类似，它具有良好的 API、强大的插件基础设施以及与 React 的深度连接。此外，插件生态系统比 Draft.js 小一些，但它的插件质量会更好。
  • CKEditor CKEditor 5 是一个超现代的 JavaScript 富文本编辑器，具有 MVC 架构、自定义数据模型和虚拟 DOM。它是在 ES6 中从头开始编写的，并且具有出色的 webpack支持。可以使用与Angular、React和Vue.js的原生集成。

其实市面上还有很多一小众的富文本编辑，例如：ByteMD、Syllepsis、Quill.js、TinyMCE。。。（应该还有几款，搜不到了）

富文本数据格式

熟悉富文本开发的应该都了解富文本数据不外乎两种，一种是html字符串格式，另一种是生成 JSON 输出。

<p>This is some sample content. It can be replaced with your own.</p>
<p><strong>加粗</strong></p>
<p><i>倾斜</i></p>
<p><i><strong>加粗和倾斜</strong></i></p>
<p><a href="www.baidu .com">链接</a></p>

html字符串格式数据类型的富文本对应用于只需要展示和编辑相关的业务需求来讲，还是比较好开源即用的，无需对数据进行二次的封装和转化。

{
    type: 'paragraph',
    children: [{ text: 'A line of text in a paragraph.' }],
}

JSON对象输出对前后端来讲开发和维护成本都有所提高，但对业务来讲方便在富文本的数据内添加跟业务有挂钩的数据参数或特殊字符，最常见的比如@某人或某字段等等。。。

性能优化

小白一枚，对富文本编辑器的性能优化确实想不出有啥办法，自己二次封装的能够优化的只有针对json数据结构转化的算法进行优化。其次，编译web component编译出来的富文本已经成个盲盒了，减少数据更新对其的渲染重刷也是提升用户交互体验的优化手段之一。各位大佬如果有其他观点也欢迎下方留言评论。

avatar
文章
阅读
粉丝