Draft.js 是一个基于React用于构建富文本编辑器的框架，由持久化数据层作为驱动，并且跨浏览器兼容。Draft.js使得创建任何类型的文本输入框都变得容易，无论你仅仅是想支持一些内联文本样式还是为了长篇文章构建的复杂编辑器。
Draft.js在2016年2月的React.js Conf公开与众。

安装

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 使用了一些先进的ECMAScript特性，目前这些特性还不支持IE11和create-react-app使用的默认的babel配置。如果你在开箱即用的配置上使用产生了问题，请尝试安装shim 或者 polyfill 在声明Draft之前。

  1. npm install draft-js react react-dom babel-polyfill
  2. # or
  3. yarn add draft-js react react-dom es6-shim

学习更多关于 在Draft中使用 shim。

API Changes Notice(API 改变点提示)

在开始之前，请注意我们正在更改实体(Entity)存储的API。最近的版本v0.10.0，支持新旧api共存。紧接着我们就会发布v0.11.0，移除老的API。如果你想帮助我们，或者追踪这个项目的进展，请看issue 839。

基本使用

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {Editor, EditorState} from 'draft-js';
  4. class MyEditor extends React.Component {
  5.   constructor(props) {
  6.     super(props);
  7.     this.state = {editorState: EditorState.createEmpty()};
  8.     this.onChange = editorState => this.setState({editorState});
  9.   }
  10.   render() {
  11.     return (
  12.       <Editor editorState={this.state.editorState} onChange={this.onChange} />
  13.     );
  14.   }
  15. }
  16. ReactDOM.render(<MyEditor />, document.getElementById('container'));

从React 16.8版本开始，你能够使用Hooks 是的 EditorState 生效，而不需要使用class

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {Editor, EditorState} from 'draft-js';
  4. function MyEditor() {
  5.   const [editorState, setEditorState] = React.useState(
  6.     EditorState.createEmpty(),
  7.   );
  8.   return <Editor editorState={editorState} onChange={setEditorState} />;
  9. }
  10. ReactDOM.render(<MyEditor />, document.getElementById('container'));

由于Draft.js 支持unicode,所以你必须在 <head></head> 标签中声明下面的meta标签在你的HTML文件中:

  1. <meta charset="utf-8" />

Draft.css 需要在编辑器渲染的时候被包含进来。了解更多关于为什么。
下一步，让我们走进基本的API并且学习其他Draft.js能做的事情.