本文档提供了Draft API基础的概述。你也可以跟着可以运行的例子进行学习。

受控的输入

这个Editor React组件是作为一个受控的内容编辑的组件所构建的,我们的目标是提供一个顶级的API,它以我们熟悉的React受控输入API为模型。

简单的复习一下,受控输入符合以下两点:

  • 一个value属性代表了输入的状态
  • 一个onChange函数属性接收输入更新

这种方法允许拥有输入的组件能够严格控制输入的状态,同时仍然允许对DOM进行更新,以提供关于用户编写的文本的信息。

  1. class MyInput extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.state = {value: ''};
  5. this.onChange = evt => this.setState({value: evt.target.value});
  6. }
  7. render() {
  8. return <input value={this.state.value} onChange={this.onChange} />;
  9. }
  10. }

顶级组件可以通过这个value状态属性来对输入状态进行控制。

控制富文本

在一个React的富文本场景中,然而,会存在两个比较明显的问题:

  • 纯文本字符串不足以表示富编辑器的复杂状态。
  • 在ContentEditable节点中不存在onChange事件可以用。

因此,State代表了单一的immutable EditorState对象,并且 onChange 是在Editor组件核心中实现的,它将这个状态提供到顶层了。

这个EditorState对象是一个完整的 editor编辑器状态的快照,包括了contents(内容),cursor(游标),撤销(undo)/重做(redo) 历史. 所有针对编辑器内容和光标的改变都将重新创建出一个新的EditorState对象。值得注意的是,这依旧会十分高效,由于immutable对象具有的数据持久特性。

  1. import {Editor, EditorState} from 'draft-js';
  2. class MyEditor extends React.Component {
  3. constructor(props) {
  4. super(props);
  5. this.state = {editorState: EditorState.createEmpty()};
  6. this.onChange = editorState => this.setState({editorState});
  7. }
  8. render() {
  9. return (
  10. <Editor editorState={this.state.editorState} onChange={this.onChange} />
  11. );
  12. }
  13. }

对于editor DOM中发生的任何编辑和光标选择更改,你的onChange处理程序将基于这些改变,计算和产生出最新的EditorState对象。