Draft.js 教程

Draft.js

Draft.js 是 Facebook 开源的开发 React 富文本编辑器开发框架。和其它富文本编辑器不同，draft.js 并不是一个开箱即用的富文本编辑器，而是一个提供了一系列开发富文本编辑器的工具。本文通过开发一些简单的富文本编辑器，来介绍 draft.js 提供的各种能力。

draft.js 解决的问题

• 统一 html 标签 contenteditable=”true”，在编辑内容时，不同浏览器下产生不同 dom 结构的问题；
• 给 html 的改变赋予 onChange 时的监听能力；
• 使用不可变的数据结构，每次修改都生成新的状态，保证里历史记录的可回溯；
• 可以结构化存储富文本内容，而不需要保存 html 片段。

不可变的数据结构

这里要介绍下不可变的数据，draft.js 使用 immutable.js 提供的数据结构。draft.js 中所有的数据都是不可变的。每次修改都会新建数据，并且内存中会保存原来的状态，方便回到上一步，这里很符合 react 的单向数据流的设计思路。

Editor 组件

Draft.js 提供了一个 Editor 组件。

Editor 组件是内容呈现的载体。我们先看一个基础编辑器。

import React, {Component} from 'react';import {Editor, EditorState} from 'draft-js';
export default class extends Component {    constructor(props) {        super(props);        this.state = {
            editorState: EditorState.createEmpty()
        };
        this.onChange = editorState => {
            this.setState({editorState});
        };
    }
    render() {
        return (
            <div className="basic">
                基础编辑器
                <div className="editor">
                    <Editor
                        editorState={this.state.editorState}
                        onChange={this.onChange}/>
                </div>
            </div>
        )
    }
}

这里的 Editor 组件接收 2 个 props：editorState 是整个编辑器的状态，类似文本框的 value；onChange 监听状态改变并把新的状态传给对应的函数。初始化的时候我们使用了 EditorState 提供的 createEmpty 方法，根据语意我们很容易知道这个是生成一个没有内容的 EditorState 对象。

总结

draft.js 提供了很多丰富的功能，还有自定义快捷键等功能本文没有提及。在使用过程中，感觉主要难点在 decorator 和 entity 的理解上。希望本文能够对你了解 draft.js 有所帮助。