富文本编辑器调研

富文本编辑器draft-js调研

需求

移动端和PC端富文本编辑器技术选型, Facebook开源框架draft-js调研

与现有富文本编辑器比较

项目	draft	现有
样式	可以自定义，引用css文件，内联样式	可以自定义，引用css文件
自定义块组件	用draft提供的语法，自定义块，定义策略类型，根据类型渲染组件	拼HTML
移动端支持	官网申明不支持	未测试
上手	需熟悉提供的接口及一些概念，一系列接口	操作DOM,调用原生浏览器提供的方法
数据存储	自定义的object对象，带来调试难点，需熟悉数据格式	html
格式转换	提供convertToRaw接口，将draft的ContentState转成js对象，不直接提供HTML(点击事件，交互等). 需要插件转HTML(自定义组件特殊功能插件可能不支持)	以HTML格式存储
编辑器中DOM操作，获取焦点(删除商品块无法整个删除，编辑区有video，按删除键，无法删除)	demo中有问题	实际使用也有问题，可以通过hack方式解决

存在的风险点

1. 移动端兼容性

2. 数据存储为draft自定义格式，开发调试困难，在展示时，需要转成HTML，官方未提供转换插件，转换过程会造成所见非所得的情况

3. 对外提供的API封装原生的方法，开发难度大

4. 由于内部封装逻辑过重，遇到问题从根源处解决难度大

结论

1. 由于存在风险点较多，暂时不考虑以draft为基础框架。

2. 目前富文本编辑器框架对移动端支持普遍不够，会持续调研现有框架，如quilljs, 小米社区等。