大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
什么是 Draft.js
Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.
Draft.js 是一个 JavaScript 富文本编辑器框架，专为 React 构建，并由不可变模型支持。具有以下突出特点：
可扩展且可定制：提供构建块，以实现从基本文本样式到嵌入式媒体等各种富文本编写体验。
声明性富文本：Draft.js 可无缝融入 React 应用程序，使用熟悉的声明性 API 抽象出渲染、选择和输入行为的细节。
不可变编辑器状态：Draft.js 模型使用 immutable-js 构建，提供具有功能状态更新的 API，并积极利用数据持久性来实现可扩展的内存使用。
注意：Draft.js 用于 Facebook 的生产，包括状态和评论输入、Notes 和 messenger.com。
目前 Draft.js 在 Github 通过 MIT 协议开源，有超过 22.6k 的 star、2.6k 的 fork、150k 的项目依赖量、代码贡献者 2250+、妥妥的前端优质开源项目。
如何使用 Draft.js
首先需要安装相应依赖：
npm install draft-js react react-dom babel-polyfill// 或者yarn add draft-js react react-dom es6-shimnpm install draft-js react react-dom// 或者yarn add draft-js react react-dom
Draft.js 依赖于 React 和 React DOM，因此也必须安装。下面是 Draft.js 的简单示例：
import React from 'react';import ReactDOM from 'react-dom';import {Editor, EditorState} from 'draft-js';import 'draft-js/dist/Draft.css';class MyEditor extends React.Component { constructor(props) { super(props); this.state = {editorState: EditorState.createEmpty}; this.onChange = editorState => this.setState({editorState}); // 注册 onChange 事件 } render { return (
RichUtils 包含有关 Web 编辑器可用的核心按键命令的信息，例如 Cmd+B（粗体）、Cmd+I（斜体）等。
开发者可以通过 handleKeyCommand 属性观察和处理按键命令，并将它们挂接到 RichUtils 中以应用或删除所需的样式。
import {Editor, EditorState, RichUtils} from 'draft-js';class MyEditor extends React.Component { constructor(props) { super(props); this.state = {editorState: EditorState.createEmpty}; this.onChange = editorState => this.setState({editorState}); this.handleKeyCommand = this.handleKeyCommand.bind(this); } handleKeyCommand(command, editorState) { const newState = RichUtils.handleKeyCommand(editorState, command); if (newState) { // 新的状态 this.onChange(newState); return 'handled'; } return 'not-handled'; } render { return (
在 React 组件中，开发者还可以添加按钮或其他控件以允许用户在编辑器中修改样式。在上面的示例中使用了已知的按键命令，但可以添加更复杂的 UI 来提供这些丰富的功能。
下面是一个非常基本的示例，其中有一个 “粗体” 按钮用于切换粗体样式。
class MyEditor extends React.Component { // 点击加粗按钮 _onBoldClick { this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD')); } render { return (
Draft.js 还涵盖了很多高级主题，比如：装饰器、键绑定、管理焦点、块样式、自定义块渲染、自定义块组件、复杂内联样式、嵌套列表、文本方向、EditorState 竞争条件等等，因为篇幅问题本文不再过多展开。同时，更多关于 Draft.js 的用法和示例可以参考文末资料，本文不再过多展开。
参考资料
