前端编辑器开发调研思路

liyan

5 min readFeb 21, 2022

需求背景

💡 需要做一款在线编辑器。要求支持中小学到高中的物理，数学，化学公式，还需要兼容旧题库数据格式（latex语法）。尽可能让编辑题目的老师学习成本最低。

技术分析

前端界目前针对公式编辑支持的编辑器主流的有两款，ckeditor 与其次的 ueditor（百度的）。论拓展性和功能全面性，只有ckeditor可选了。

两个编辑器的主要 UI 分别长如下这样：

另外提到公式编辑就不得不提及目前世界上功能最强大使用最简单（支持手写识别）的公式编辑工具，mathtype 唯一遗憾的是非开源非免费。也是这个严苛的条件限制了全球编辑器的发展，其界面如下：

目前 web 领域 mathtype 集成在 react 里，市面上已有的库只有 ckeditor 这家古老而强大的一家。因此想最低成本地实现我们的需求，目前唯一的选择是 ckeditor+mathtype（试用版）。

关于公式在 html 上的展示

完全不同于 web 其它领域的迅猛发展，目前 web 端公式的展示格式几乎只有 latex 唯一一种。新出的 katex 语法也是和 latex 很像并且兼容 latex的。在 latex 领域诞生了两位图灵奖得主，可见这个领域可真不是普通人所能染指的，因此对于大多数人而言，用得顺手就很难得了。这方面比较成熟的库是 mathjax，且至今将 latex 语法与W3C 规范结合并投入生产领域的，无出其右。mathjax 支持将latex 语法转化成浏览器能识别的 mml 格式语法，或 svg ，或图片等。

针对这部分的个人感受：目前集成在主流库（Ng/Vue/React）方面开箱即用的包可以说没有。要想实现定制化的需求，至少前端方面是需要自己研发的，可以做成包或者 sdk，还要考虑不同版本不同厂商的浏览器兼容性问题。总之就是投入产出比很低，除非这方面拥有强大的产品及研发团队并且有很充裕的现金流或者用户需求。

关于传统编辑器

虽然浏览器提供了原生的 contenteditable 属性，看起来给网页编辑带来了强大友好的特性。但事实并非如此，关于鼠标光标定位，编辑器数据管理，浏览器兼容性等种种问题制约了其在生产中的应用。目前市面上多数库还是根据传统的 textarrea 标签二次开发再投入生产的。并且它们有个公共的特点就是总有饱受开发者诟病之处。

对于编辑器数据格式的处理主要分 json 格式和 html string 两大类，并且一般都会支持相互转换。然后围绕三大前端主流框架，目前都有官方或社区的 npm 包可以集成并使用。

对于 slate 编辑器，由于其非常灵活，支持对编辑器很小粒度的控制，所以很适合基于它二次开发，为企业使用。而对于开箱即用的需求并不适用。

富文本编辑器方向 是一个重要且小众的领域，老牌做的较好的是 UEditor 系列，现在论体验和周边功能完善度，做得最好的是语雀编辑器。开源也有很多优秀的实现，比如 Quill、DraftJS、Slate 等等，但现在富文本编辑器核心能力是功能完备性（是否支持视频、脑图、嵌入）、性能、服务化功能打通了多少（是否支持在线解析 pdf、ppt 等文件）、交互自然程度（拷贝内容的智能识别）等等。如果将眼光放到全球，那国外有大量优秀富文本编辑器案例，比如 Google Docs、Word Online、iCloud Pages 等等。

最好用的富文本编辑器往往不开源，因为投入的技术研发成本是巨大的，本身这项技术就是一个产品，卖点就是源码。

富文本编辑器功能强度可以分为三个级别：L0～L2：