富文本样式

Now that we have established the basics of the top-level API, we can go a step further and examine how basic rich styling can be added to a Draft editor.

既然我们已经确定了顶级API的基础，我们可以更进一步，检查基础的富文本样式是如何被添加到Draft编辑器的。

A rich text example is also available to follow along.

一个富文本的例子也提供给你参考。

EditorState: 遵从你的命令

The previous article introduced the EditorState object as a snapshot of the full state of the editor, as provided by the Editor core via the onChange prop.

前一篇文章介绍了 EditorState 对象，它通过 onChange prop由 Editor 核心提供，成为编辑器的全部状态的快照。

However, since your top-level React component is responsible for maintaining the state, you also have the freedom to apply changes to that EditorState object in any way you see fit.

然而，既然你的顶层React组件负责了维护state，你也可以通过任何你觉得合适的方式，自由的应用更改到 EditorState对象上。

For inline and block style behavior, for example, the RichUtils module provides a number of useful functions to help manipulate state.

用于行内和块级样式的行为，比如， RichUtils 模块提供了许多有用的方法帮助操作状态。

Similarly, the Modifier module also provides a number of common operations that allow you to apply edits, including changes to text, styles, and more. This module is a suite of edit functions that compose simpler, smaller edit functions to return the desired EditorState object.

同样的，Modifier模块还提供了一些常见的操作，允许您应用编辑，包括但不限于对文本和样式的更改。该模块是一套编辑功能组成的，更简单、更轻量的、返回所需的 EditorState 对象的编辑函数。

For this example, we'll stick with RichUtils to demonstrate how to apply basic rich styling within the top-level component.

在这个例子中，我们将使用 RichUtils 去展示如何在顶层组件中应用基础的富文本样式。

RichUtils和键盘命令

RichUtils has information about the core key commands available to web editors, such as Cmd+B (bold), Cmd+I (italic), and so on.

RichUtils 有着在web编辑器中可用的核心按键命令的信息，比如Cmd + B（bold）、Cmd + I（italic）、以此类推。

We can observe and handle key commands via the handleKeyCommand prop, and hook these into RichUtils to apply or remove the desired style.

我们可以通过 handleKeyCommand prop 观察和处理按键命令，并且把这些钩到 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) {
    const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
    if (newState) {
      this.onChange(newState);
      return 'handled';
    }
    return 'not-handled';
  }
  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        handleKeyCommand={this.handleKeyCommand}
        onChange={this.onChange}
      />
    );
  }
}

handleKeyCommand

The command argument supplied to handleKeyCommand is a string value, the name of the command to be executed. This is mapped from a DOM key event. See Advanced Topics - Key Binding for more on this, as well as details on why the function returns handled or not-handled.

这个提供给 handleKeyCommand 的 command 参数，是一个要执行的命令的名称的string值。这是从DOM按键事件映射的。在进阶话题-按键绑定中获得更多内容，包括为什么方法会返回 handled 或 not-handled 的细节。

UI中的样式控件

Within your React component, you can add buttons or other controls to allow the user to modify styles within the editor. In the example above, we are using known key commands, but we can add more complex UI to provide these rich features.

在你的React组件中，你可以添加按钮或其他控件以允许用户修改编辑器内的样式。在上面的例子中，我们使用已知的按键命令，但我们可以添加更复杂的UI来提供这些丰富的特性。

Here's a super-basic example with a "Bold" button to toggle the BOLD style.

这里有一个很基本的例子：利用一个“Bold”按钮来切换 BOLD 样式。

class MyEditor extends React.Component {
  // …

  _onBoldClick() {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
  }

  render() {
    return (
      <div>
        <button onClick={this._onBoldClick.bind(this)}>Bold</button>
        <Editor
          editorState={this.state.editorState}
          handleKeyCommand={this.handleKeyCommand}
          onChange={this.onChange}
        />
      </div>
    );
  }
}