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組件中，你能夠添加按鈕或者其餘的控制來容許用戶在編輯器中修改文本樣式。