丰富的造型
现在我们已经建立了顶级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
各种翻译工具齐上,如有问题,请指正!