富文本編輯器:
富文本編輯器是一種可內(nèi)嵌于瀏覽器的文本編輯器，富文本編輯器又不同于普通文本編輯器，程序員可到網(wǎng)上下載免費(fèi)的富文本編輯器內(nèi)嵌于自己的網(wǎng)站或程序里（當(dāng)然付費(fèi)的功能會更強(qiáng)大些），方便用戶編輯文章或信息。
React-draft-wysiwyg?的簡單使用:
這是一個(gè)基于 ReactJS 和 DraftJS 的一種富文本組件，想使用首先我們需要安裝依賴，我們可以使用 nodejs 中的 npm 或者?yarn?來安裝：
1. ? ?npm install -Sreact-draft-wysiwyg
2. ? ?yarn addreact-draft-wysiwyg
接下來你還需安裝的包和對應(yīng)版本：
1.?draft-js:0.10.x
2.?immutable:3.x, 4.x
最后我們就可以來簡單的使用這個(gè)組件
import React, {Component } from 'react';
import { Editor } from'react-draft-wysiwyg';
import '../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
const EditorComponent= () =>
React-draft-wysiwyg?的樣式設(shè)計(jì)：
默認(rèn)情況下編輯器將使用 DraftJS 編輯器，因?yàn)樗鼪]有任何樣式，它將占用100%寬度的容器。可以通過組件自帶的類或樣式對象來改變富文本編輯器的樣式。
1.wrapperClassName：類應(yīng)用于編輯器和工具欄上
2.editorClassName： 類應(yīng)用于編輯器的周圍
3.toolbarClassName： 類應(yīng)用于工具欄中的
4.wrapperStyle：樣式對象在編輯器和工具欄上應(yīng)用
5.editorStyle： 樣式對象在編輯器中應(yīng)用
6.toolbarStyle： 樣式對象在工具欄上應(yīng)用
React-draft-wysiwyg?中的 state：
編輯器可以實(shí)現(xiàn)為受控組件，可實(shí)現(xiàn)非受控構(gòu)件的自動(dòng)生成。
1.defaultEditorState：屬性在創(chuàng)建編輯器狀態(tài)時(shí)初始化一次，可用來改變EditorState。
2.EditorState：以受控方式更新編輯器狀態(tài)的屬性。
3.onEditorStateChange：每當(dāng)編輯器的狀態(tài)發(fā)生變化時(shí)都會調(diào)用函數(shù)，可用來改變 EditorState。
4.defaultContentState：屬性在創(chuàng)建編輯器狀態(tài)時(shí)初始化一次。
5.contentState：以受控方式更新編輯器狀態(tài)的屬性。
6.onChange：每當(dāng)編輯器的狀態(tài)發(fā)生變化時(shí)都調(diào)用函數(shù)。
7.onContentStateChange：每當(dāng)編輯器文本框內(nèi)容的狀態(tài)發(fā)生變化時(shí)都會調(diào)用函數(shù)，可用來改變 contentState。
代碼示例：
class ControlledEditor extends Component {
? constructor(props) {
??? super(props);
??? this.state = {
????? editorState:EditorState.createEmpty(), //用來清空編輯器中的內(nèi)容
??? };
? }
? onEditorStateChange:Function = (editorState) => {
??? this.setState({
????? editorState,
??? });
? };
? render() {
??? const { editorState} = this.state;
??? return (
???????editorState={editorState}
???? ???editorClassName="editor-class"
toolbarStyle="tool-style"???????
onEditorStateChange={this.onEditorStateChange}//每次改變編輯器中的內(nèi)容時(shí)都調(diào)用這個(gè)函數(shù)來把參數(shù)傳入 editorState
????? />
??? )
? }
}
獲取 React-draft-wysiwyg 文本框中的值：
我們可以從上面介紹的?contentState?中獲取到文本框的內(nèi)容，下面我們來看下獲取到的 json 值的格式：
{"entityMap":{},"blocks":[{"key":"637gr","text":"Initializedfromontentstate.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}]};
內(nèi)容主要是存在了 blocks 中其中的 text 就是你在文本框輸入的內(nèi)容，后面的 type 傳的是你是否改變了原文本格式，如有改變后面會給出文本框樣式的改變。接下來就可以簡單的來使用富文本編輯器?react-draft-wysiwyg。
React-draft-wysiwyg在網(wǎng)站中的應(yīng)用：
實(shí)際應(yīng)用 React-draft-wysiwyg 的過程中，我們不僅需要獲取 React-draft-wysiwyg 中的值，我們還需要把這個(gè)值上傳到服務(wù)器，而它本身是 json 格式的值，我們需要序列化之后再上傳到服務(wù)器，這樣可以方便以后從服務(wù)器接收數(shù)據(jù)。
序列化代碼如下：
JSON.stringify(contentState)
其中?contentState?就是在上文中提到的文本輸入框的狀態(tài)。
從服務(wù)器中接收到數(shù)據(jù)后，我們需要再把數(shù)據(jù)反序列化在把數(shù)據(jù)轉(zhuǎn)化回來，在顯示到文本框中。
反序列化代碼如下：
this.setState({
contentState：JSON.parse(服務(wù)器數(shù)據(jù))
?})
先把服務(wù)器數(shù)據(jù)反序列化之后，再把數(shù)據(jù)從新傳回 contentState，這樣從服務(wù)器返回的數(shù)據(jù)就被加載到文本框中了。
