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

原文地址：