乐趣区

React中富文本编辑器的技术选型调研

前言
富文本编辑器是项目中不可或缺的部分,目前市面上可以选择的富文本编辑器种类繁多,如何在项目中选择一款集轻量,美观,稳定,坑少,满足需求的富文本编辑器变成了团队中一个重要的问题。
现在项目中使用的是 WangEditor,为了寻找到更好的替代品,我针对 Ant Design 官方推荐的两款的富文本编辑器做了调研。Ant Design 称它们为“社区精选组件”,在心理层面上觉得应该会比较稳定,尤其是结合 Ant Design 使用。
我对这两款富文本编辑器都进行了使用,并结合目前的项目需求进行了比较。下面是我的使用体验。
react-quill
第一款富文本编辑器叫作 react-quill,是国外一个社区维护的,贡献者有二三十人。quill 在英文中是鹅毛笔的意思,听起来还是很有美感的。点击这里查看 demo
基本使用
下面是 react-quill 的最基本的用法,非常简单。
import ReactQuill from ‘react-quill’;
import ‘react-quill/dist/quill.snow.css’

class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = {text: ”}
this.handleChange = this.handleChange.bind(this)
}

handleChange(value) {
this.setState({text: value})
}

render() {
return (
<ReactQuill value={this.state.text} onChange={this.handleChange} />
)
}
}
自定义工具栏
核心就是配置 modules 和 formats。modules 是配置工具栏上的内容,即决定工具栏上有什么;formats 是决定哪些工具栏选项可以启用,即决定工具栏的哪些可以生效。实例代码如下:
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
text: ”,
}
}

modules = {
toolbar: [
[{‘header’: [1, 2, false] }],
[‘bold’, ‘italic’, ‘underline’,’strike’, ‘blockquote’],
[{‘list’: ‘ordered’}, {‘list’: ‘bullet’}, {‘indent’: ‘-1’}, {‘indent’: ‘+1’}],
[‘link’, ‘image’],
[‘clean’]
],
};

formats = [
‘header’,
‘bold’, ‘italic’, ‘underline’, ‘strike’, ‘blockquote’,
‘list’, ‘bullet’, ‘indent’,
‘link’, ‘image’
];

render() {
return (
<div className=”text-editor”>
<ReactQuill modules={this.modules} formats={this.formats} />
</div>
);
}
}
这里还有更高级的用法,我们可以在工具栏上加入自己设计的 JXS 元素,但是目前的项目需求用不到,这里就不展开了。
优势

简洁美观大方。
对于用户从各种地方粘贴过来的文字兼容得很好,不管你之前带有什么奇奇怪怪的格式,统统转化成了带有 <p></p> 标签的的文本。
跟 Ant Design 和 React 的融入度非常高,可以很方便的放在 <Form></Form> 作为一个受控组件。传入的 value 就是 HTML 字符串,不需要做任何格式转换。

劣势

图片格式是转成了 base64,这跟目前项目中图片上传方式不兼容。虽然这个问题有解决方法,React-Quill 中的图片上传及显示。
不支持 Excel 格式的数据。因为目前项目中使用的 WangEditor 支持表格数据,所以如果老数据中存在表格,那么替换后的表格数据显示将成为一个问题。

braft-editor
这是由中国人开发的个人项目,点这里查看 demo。
基本使用
实例代码如下,需要注意的一点是,接收的 value 不再是 HTML 字符串了,而是 editorState 格式。可以通过 editorState.toHTML() 得到 HTML 字符串。
import React from ‘react’;
import ‘braft-editor/dist/index.css’;
import BraftEditor from ‘braft-editor’;

class Braft extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: BraftEditor.createEditorState(null) };
}
handleChange = editorState => {
this.setState({editorStste});
};
render() {
return (
<BraftEditor value={this.state.editorStste} onChange={this.handleChange}/>
);
}
}
自定义工具栏
通过配置属性 controls 来自定义工具栏,也可以自定义工具栏图标的文字和样式。示例如下:
const controls = [
‘undo’, ‘redo’, ‘separator’,
{
key: ‘bold’, // 使用 key 来指定控件类型
title: ‘ 加粗选中文字哦 ’, // 自定义控件 title
text: ‘ 点我加粗 ’, // 使用自定义文案来代替默认图标 (B),此处也可传入 jsx
},
‘italic’, ‘underline’, ‘strike-through’
]
优势

有“全屏”功能,可以全屏编辑内容,还是很炫酷的。
作者是中国人,文档清晰易读。

劣势

图片格式转成了 base64,跟目前项目中图片上传方式不兼容。
不支持 Excel 格式的数据。

总结
这两款编辑器的稳定性和对异常文本的处理能力都强于 WangEditor,但是存在的问题是都对于表格数据不支持,所以对于老数据的显示存在风险。

退出移动版