Draft.js

Draft.js 2/22, 2016 React conference 第一天所發表的產品,是一套與以往不同的編輯器,簡述提到:

Plain text is boring. At Facebook, we want to give our users the ability to add mentions, emoticons, hashtags, styles, and embedded media within the content they share. The result is that nearly every input on Facebook requires rich text features.

這是一個非常非常非常客製化的編輯器的 Open Source,提供了許多詳細操作細節的API功能,但目前 Document 沒有太詳盡的敘述用法,也只能靠著邊實作邊看API邊讀Source Code來抓到感覺 .. 這兩天花些時間看了看,似乎有抓到一些東西,順便記錄下來。

Document
github

我覺得這是一個相當有趣的開放原始碼,裡面加入了許多可以自由擴充的方法,我覺得在這編輯器裡可以做到無限種可能!

一些相關記錄

此編輯器使用了

  • React
  • Immutable
  • es6

初始化物件

所有一切都從一個 Editor, EditorState 開始

npm install draft-js
import { Editor, EditorState } from ‘draft-js’;

接下來需要加一個 state 創造空的 EditorState 物件

this.state = { editorState: EditorState.createEmpty() }

最後就是利用 API 操作各種 editorState 物件來達到我們要做的事情

Draft.js 的 EditorState 物件中存放了非常龐大的資訊,包含我們最基本的編輯器內容的所有配置全部都會細分成很小的資料格式儲存起來。

Entities 此物件是存放額外的格式配置儲存區,如:a link 的配置就會放裡面
Decorators 此物件是存放類似元件樣貌配置的儲存區,如:a link 的 component

Draft.js 中也提供了客製化的 css 操作,物件傳入 Editor 中的 customStyleMap props 裡

Draft.js 還有提供 redo, undo 的功能,配合 command hot-key 會變得超強大

筆記 — 取得 EditorState 內的物件內容

如果要取得 ContentState 的所有物件內容則用 EditorState.getCurrentContent();
如果要取得 Selection 的所有物件內容則用 editorState.getSelection();
如果要取得 ContentBlock 的所有物件內容則用 EditorState.getCurrentContent().getBlockForKey(key);
如果要取得 ContentBlock 的 key 則用 editorState.getSelection().getStartKey()
如果要取得指定的 Entity 則用 Entity.get(key)
如果想做些文字變化或連結等之類的操作則用 RichUtils API 來幫忙
如果要 undo, redo 直接用 EditorState.undo/redo 就可以了