(翻译)draft.js 入门

安装：(draft.js 依赖react， 因此需要同时安装react)

install –save draft-js react react-dom

draft.js 的顶层API 模拟了Input ，包含editorState(对应input 的value，包含了编辑器的所有属性，包括内容、鼠标cursor、编辑历史等) 和onChange 两个属性，实现了双向的绑定

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
    constructor(props) {
        super(props);
        // 编辑器状态
        this.state = {editorState: EditorState.createEmpty()};
        // 双向绑定
        this.onChange = (editorState) => { 
            this.setState({editorState: editorState})
        };
    }

    render() {
        return (
            <Editor editorState={this.state.editorState} onChange={this.onChange}/>
        );
    }
}

ReactDOM.render(
    <MyEditor />,
    document.getElementById('container')
);