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元件中，你可以新增按鈕或者其他的控制來允許使用者在編輯器中修改文字樣式。