id: getting-started title: 总览

onPageNav: ‘none’

Draft.js是一个框架，用于在React中构建富文本编辑器，该框架由不可变模型提供支持并跨浏览器差异进行抽象。

Draft.js允许您构建任何类型的RTF输入，无论您是要支持几种嵌入式文本样式，还是构建复杂的文本编辑器来撰写长篇文章。

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。

  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变更通知

开始之前，请注意，我们最近在Draft中更改了实体存储的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';
  5. class MyEditor extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.     this.state = {editorState: EditorState.createEmpty()};
  9.     this.onChange = editorState => this.setState({editorState});
  10.   }
  12.   render() {
  13.     return (
  14.       <Editor editorState={this.state.editorState} onChange={this.onChange} />
  15.     );
  16.   }
  17. }
  19. ReactDOM.render(<MyEditor />, document.getElementById('container'));

自从React 16.8发布以来，您可以使用Hooks作为一种使用方法，而EditorState无需使用类。

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

因为Draft.js支持unicode，所以您必须在<head></head>HTML文件的块中具有以下meta标记：

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

Draft.css渲染编辑器时应包括在内。详细了解原因。

接下来，让我们进入API的基础知识，并学习使用Draft.js还可以做什么。