react draft api 简介 - HelloWorld开发者社区

draft.js api
https://draftjs.org/docs/quic...

基础API

这个文档提供了一些基础的draftapi概览。

Controlled Input

Editor组件构建了一个可控的可编辑的组件。这个组件提供了一个顶级api模型与react的可控Input组件相似的api.
做一个简短的回顾，可控input组件包括两个关键：
1.一个value代表input的状态
2.一个onChange函数属性，使input更新。
这个方法允许组合input组件来严格控制Input的状态，于此同时仍然允许更新DOM来展示用户已经输入的信息。
顶级的组件能通过value属性的state值来保持控制输入状态。

Controlling Rich Text

在react富文本脚本中有两个显著的问题：
1.一段纯文本不足以展示富文本编辑器的复杂状态
2.在可编辑的元素总，没有像onChange的这样的事件可用。
State因此被表示为一个不可变的EditorState对象。并且onChange被Editor的内部代码实现来提供一个state的值给上层。
这个EditorState对象是一个复杂的Editor的 state的快照。包括内容，光标和撤消/重做历史记录。所有在编辑器内部对内容和选择的修改都会创建一个新的EditorState对象。请注意，由于不可变对象上的数据持续存在，这仍然是有效的。
对于在编辑器DOM中发生的任何编辑或选择更改，您的onChange处理程序将根据这些更改使用最新的EditorState对象执行。

Rich Styling

现在我们已经确定了基本的顶层api，我们可以进一步的思考怎么可以给Draft编辑器添加一些基本的样式。

EditorState: Yours to Command

以前的文章介绍了EditorState对象作为编辑器的完整状态的快照，由编辑器核心通过onChange支持提供。
然而，你的顶层的React组件是负责维护状态的，你还可以以任何你认为合适的方式将更改应用于该EditorState对象。
对于inline和block样式，例如，RichUntils模块提供了一些可用的方法来帮助操作这些状态。
相似的，Modifier模块也提供了一些常见的操作来使你的编辑生效，包括对文本，样式的修改等等。这个模块是一系列由更小的，更简单的编辑函数组成的编辑函数来返回所需的EditorState对象。
对于这个例子，我们将坚持使用RichUtils来演示如何在顶级组件中应用基本的丰富样式。

RichUtils and Key Commands

RichUtils 有一些对于web编辑器来说可用的核心关键命令，例如： Cmd+B (加粗), Cmd+I (斜体), 等等.
我们可以观察并且处理关键命令通过我们可以通过handleKeyCommand prop来观察和处理关键命令，并将它们绑定到RichUtils中以应用或删除所需的样式。