既然我们已经创建了基础的顶层 api，现在我们可以更进一步，来看一下基础的富文本样式是怎么添加到Draft 编辑器中的。

EditorState：你的命令

上一篇文章中介绍了EditorState 对象是编辑器状态的快照，并且通过 onChange props 能获取到新的EditorState。

然而，你的上层 React 组件维护了编辑器的状态，你还可以选合适的方式来更改编辑器的 EditorState。
对于内联和块级的样式行为，RichUtils 模块提供了许多有用的函数来帮助你处理状态。

同样的，Modifier 模块也提供了许多常见操作，允许你对编辑状态进行修改，包括文本、样式等。这个模块是一组编辑函数，可以实现更简单更细粒度的编辑功能，返回编辑器所需的 EditorState 对象。

对于这个例子，我们将使用 RichUtils 来演示如何在上层组件中对编辑器应用富文本样式。

RichUtils 和 键盘命令

RichUtils 包含了一些键盘命令的信息，比如 Cmd + B（粗体)，Cmd + I（斜体)等。
我们能通过 prop 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 (
      <Editor
        editorState={this.state.editorState}
        handleKeyCommand={this.handleKeyCommand}
        onChange={this.onChange}
      />
    );
  }
}

提供给 handleKeyCommand 的 command 参数是一个字符串值，即要执行的命令的名称。这是从 DOM的键盘事件映射的。更多的信息，以及为什么函数返回处理或未被处理的详细信息，请参阅高阶主题-键盘绑定。

在 UI 中控制样式

在我们的 React 组件中，你能够添加按钮或者其它控制元素来允许用户在编辑器中控制样式。在上面的例子中，我们使用键盘来绑定命令，但是我们也能够通过添加很复杂的 UI 元素来支持这些丰富的样式。

这有一个非常简单的例子，使用 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>
    );
  }
}