draft Draft.js在后台系统的应用实践

颜浩良

去哪儿旅游度假事业部前端工程师一直从事移动前端的开发，热衷于新技术的探索和实践，致力于提供更好的用户体验和更高的开发效率。

Draft.js是facebook推出的基于React的富文本编辑器构建框架。

Draft.js 的使用场景

我们遇到的场景有以下特点:

文章有段落和简单格式，数据存储、传输和显示需要格式化，编辑过程与富文本交互

支持插入结构化数据，如图片和产品信息

整个项目基于React技术栈

Draft.js进入我们的视线有几个原因:

Draft.js的实现是纯功能性的，编辑器的状态封装在一个EditorState类型的不可变对象中。一旦确定了内容，编辑器的状态也就确定了

Draft.js只提供了丰富的操作编辑器状态的方法，业务代码可以灵活定制其功能，方便我们控制编辑器状态，避免引入不必要的样式信息

Draft.js可以轻松控制快捷键、粘贴、拖动等带来的副作用，尽量保持编辑器状态“干净”。

一般来说，使用Draft.js类似于声明一个输入框:

类QEditor扩展了React。组件{

构造函数{

super；

this . state = { editor state:editor state . create empty}；

this.onChange = editorState = & gtthis . setstate；

}

render {

退货<。editor editor state = { editor state } OnChange = { this . OnChange }/& gt；

}

}

相对于传统的富文本编辑器，Draft.js更像是一个“状态翻译器”。每个用户操作都会对应editorState的更新，Draft.js充当从状态到呈现的翻译；同时，如果状态更新的反馈被禁用，Draft.js也可以退化为一个表示组件。

EditorState 与 ContentState

EditorState如何封装编辑器的状态？如下图所示

基本概念