Draftjs中文翻译3 - Rich Styling丰富的造型

丰富的造型

现在我们已经建立了顶级API的基础知识，我们可以进一步研究如何将基本丰富的样式添加到Draft编辑器中。

---

EditorState：编辑器命令
上一篇文章介绍了该EditorState对象作为编辑器完整状态的快照，由Editor核心通过 onChangeprop提供。

但是，由于您的顶层React组件负责维护状态，因此您还可以自由地EditorState以任何您认为合适的方式将更改应用到该对象。

例如，对于内联和块风格行为，RichUtils模块提供了许多有用的功能来帮助操纵状态。

同样，修改器模块还提供了许多常用操作，允许您应用编辑，包括对文本，样式等的更改。这个模块是一套编辑功能，组成更简单，更小的编辑功能来返回所需的EditorState 对象。

在这个例子中，我们将坚持RichUtils演示如何在顶层组件中应用基本的丰富样式。

RichUtils和主要命令
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 (
      <Editor
        editorState={this.state.editorState}
        handleKeyCommand={this.handleKeyCommand}
        onChange={this.onChange}
      />
    );
  }
}

**handleKeyCommand**

command提供给handleKeyCommand它的参数是一个字符串值，即要执行的命令的名称。这是从DOM关键事件映射而来的。该 editorState参数代表最新的编辑器状态，因为在处理密钥时它可能会在草稿内部进行更改。在里面使用这个编辑器状态的实例handleKeyCommand。见 高级主题-键绑定的更多相关信息，以及细节上为什么函数返回handled或not-handled。

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>
    );
  }
}

---

原文链接：https://draftjs.org/docs/quickstart-rich-styling.html#content

各种翻译工具齐上，如有问题，请指正！