react draft api 简介

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中以应用或删除所需的样式。

handleKeyCommand
传给handleKeyCommand的command参数是一个字符串值，即须要被运行命令的名字。这是从DOM键盘事件映射的。

Styling Controls in UI

在React组件中，你能够添加按钮或者其余的控制来容许用户在编辑器中修改文本样式。