基于TinyMce富文本编辑器的客服自研知识库的技术探索和实践｜得物技术

---

theme: smartblue

一、 背景

客服知识库是一个集中管理和存储与客服相关的信息和资源的系统，在自研知识库上线之前，得物采用的承接工具为第三方知识库系统。伴随着业务的发展，知识的维护体量、下游系统的使用面临的问题愈发明显，而当前的第三方采购系统，已经较难满足内部系统间高效协作的诉求，基于以上业务诉求，我们自研了一套客服知识库。

二、富文本编辑器的选型

以下是经过调研后列出的多款富文本编辑器综合对比情况：

2.1 编辑器的选择

• 自研知识库要求富文本编辑器具备表格的编辑能力，由于Quill不支持表格编辑能力（借助表格插件可以实现该能力，但经过实际验证，插件提供的表格编辑能力不够丰富，使用体验也较差），被首先被排除。

• wangEditor体验过程中发现标题和列表（有序、无序）列表两个功能互斥，体验不太好，而这两个功能都是自研知识库刚需功能，也被排除。

• Lexical是facebook推出的一款编辑器，虽功能很丰富，但相较于CKEditor和TinyMCE，文档不够完善，社区活跃性较低，插件不成熟，故优先选择CKEditor和TinyMCE。

CKEditor和TinyMCE经过对比，由于当前正在使用的第三方知识库采用的是TinyMCE编辑器，选择TinyMC在格式兼容上会更友好，对新老知识库的迁移上更有利。且TinyMCE在功能丰富度上略占优势，故最终选择TinyMCE作为本系统文档知识库的编辑器。

2.2 TinyMce编辑器模式的选择

经典模式（默认模式）

基于表单，使用表单某字段填充内容，编辑器始终作为表单的一部分。内部采用了iframe沙箱隔离，将编辑内容与页面进行隔离。

※ 优势

样式隔离好。

※ 劣势

由于使用iframe，性能会差点，尤其对于多实例编辑器。

内联模式（沉浸模式）

将编辑视图与阅读视图合二为一，当其被点击后，元素才会被编辑器替换。而不是编辑器始终可见，不能作为表单项使用。内容会从它嵌入的页面继承CSS样式表。

※ 优势

性能相对较好，页面的编辑视图与阅读视图合二为一，提供了无缝的体验，实现了真正的所见即所得。

※ 劣势

样式容易受到页面样式的影响。

三、系统总览

3.1 知识创建链路