Draft.js 是一个基于 React 开发的用来搭建富文本编辑器的框架。使用不可变的模型并且抽象了各种浏览器之间的差异。不管你是简单的给几行可编辑的文本添加样式，还是构建一个复杂的完整的富文本编辑器，使用 Draft.js 都很容易做到。

安装

Draft.js 发布在 npm 上，依赖 React 和 React DOM，安装时这两个包也要装好。

  1. npm install draft-js react react-dom
  2. # or alternately
  3. yarn add draft-js react react-dom

Draft.js使用es6语法开发，一些浏览器上不支持。可以使用一些shim和polyfill来解决。

npm install draft-js react react-dom babel-polyfill
# or
yarn add draft-js react react-dom es6-shim

注意api改变

在开始之前，我们需要注意最近我们要改变 Draft 中 Entity 的 API。在v0.10.0版本中我们同时支持新api和旧api。在版本v0.11.0中我们将去掉对旧api的支持。如果你有兴趣帮助解决问题或者跟进项目进展。

使用

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
function MyEditor() {
  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty(),
  );
  return <Editor editorState={editorState} onChange={setEditorState} />;
}
ReactDOM.render(<MyEditor />, document.getElementById('container'));

因为 Draft.js 支持 unicode，所以你必须把下面的 meta 标签添加到你html页面的 中。

<meta charset="utf-8" />

在渲染编辑器前我们需要引用 Draft.css 。
接下来我们将学习 Draft.js 的基础api和你能用 Draft.js 做什么事情。