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，可是存在的問題是都對於表格數據不支持，因此對於老數據的顯示存在風險。