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元素，可是目前的项目需求用不到，这里就不展开了。

优点

1. 简洁美观大方。
2. 对于用户从各类地方粘贴过来的文字兼容得很好，无论你以前带有什么奇奇怪怪的格式，通通转化成了带有<p></p>标签的的文本。
3. 跟 Ant Design 和 React 的融入度很是高，能够很方便的放在<Form></Form>做为一个受控组件。传入的 value 就是 HTML 字符串，不须要作任何格式转换。

劣势

1. 图片格式是转成了base64，这跟目前项目中图片上传方式不兼容。虽然这个问题有解决方法，React-Quill中的图片上传及显示。
2. 不支持 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'
]

优点

1. 有“全屏”功能，能够全屏编辑内容，仍是很炫酷的。
2. 做者是中国人，文档清晰易读。

劣势

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

总结

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