本文档提供了Draft
API基础的概述。你也可以跟着可以运行的例子进行学习。
受控的输入
这个Editor
React组件是作为一个受控的内容编辑的组件所构建的,我们的目标是提供一个顶级的API,它以我们熟悉的React受控输入API为模型。
简单的复习一下,受控输入符合以下两点:
- 一个value属性代表了输入的状态
- 一个onChange函数属性接收输入更新
这种方法允许拥有输入的组件能够严格控制输入的状态,同时仍然允许对DOM进行更新,以提供关于用户编写的文本的信息。
class MyInput extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.onChange = evt => this.setState({value: evt.target.value});
}
render() {
return <input value={this.state.value} onChange={this.onChange} />;
}
}
顶级组件可以通过这个value
状态属性来对输入状态进行控制。
控制富文本
在一个React的富文本场景中,然而,会存在两个比较明显的问题:
- 纯文本字符串不足以表示富编辑器的复杂状态。
- 在ContentEditable节点中不存在
onChange
事件可以用。
因此,State代表了单一的immutable EditorState对象,并且 onChange 是在Editor组件
核心中实现的,它将这个状态提供到顶层了。
这个EditorState
对象是一个完整的 editor编辑器状态的快照,包括了contents(内容),cursor(游标),撤销(undo)/重做(redo) 历史. 所有针对编辑器内容和光标的改变都将重新创建出一个新的EditorState
对象。值得注意的是,这依旧会十分高效,由于immutable对象具有的数据持久特性。
import {Editor, EditorState} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = editorState => this.setState({editorState});
}
render() {
return (
<Editor editorState={this.state.editorState} onChange={this.onChange} />
);
}
}
对于editor DOM中发生的任何编辑和光标选择更改,你的onChange处理程序将基于这些改变,计算和产生出最新的EditorState
对象。