draft 学习笔记

draft.js 是 facebook 的一个基于 react 的 编辑器 类库.它强于一般的 编辑器/富文本编辑器 插件或组件.

因此 draft.js 不是普通的富文本编辑器, 他是构成富文本编辑器的基础设施

背景

hcm 项目中需要使用到富文本编辑器, 用于编辑一个邮件模板.

邮件模板中就会存在变量, 通常是用特殊符号包裹起来的一小块, 如我做的项目中的 ${variable} ,用 ${}包裹起来.

需求: 为了更清晰地看到整个模板中, 变量的位置, ${} 包裹起来的文本需要高亮显示.

由于之前使用的富文本编辑器 froala-react-wysiwyg 不能完美兼容 react, 并且实现这个需求的过程存在不少坑:

因此, 从任何角度讲我都要寻找下一个, 更优秀的富文本编辑器.

大致了解 draft.js 并查看了一两个 demo, 我就已经发现, 使用 draft.js 要实现我上面描述的需求简直太简单了.

大致就如这个 myeditor demo 所示.