第一次使用富文本編輯器，遇到了很多的坑，與大家分享。

因?yàn)轫?xiàng)目原因，使用了react-draft-wysiwyg；

配合使用插件如下：

1Draft.js

2:draftjs-to-html

3:html-to-draftjs

DEMO1效果圖如下：

DEMO1這就是所謂的富文本編輯器的樣子

steps

一：安裝所用插件

yarn add?react-draft-wysiwyg

yarn add draft-js

yarn add draftjs-to-html

yarn add?html-to-draftjs

二：初始化一個空白的編輯器

（1）引入所需

（2）

（3）

（4）提交到后臺：雙方約定接收html字符串（'<p>12344444</p>'）;

重點(diǎn)來了：

（5）分三步解釋

1）看看“1”處的數(shù)據(jù)結(jié)構(gòu)到底是怎么樣的

這是一個ContentState對像結(jié)構(gòu)

console.log(editorState.getCurrentContent())

2）看看“2”處的數(shù)據(jù)結(jié)構(gòu)

convertToRaw()方法

將一個ContentState對象，轉(zhuǎn)換為一個原始的JS結(jié)構(gòu)。

在保存編輯器狀態(tài)以用于存儲，轉(zhuǎn)換為其他格式或應(yīng)用程序中的其他用途時使用

console.log(convertToRaw(editorState.getCurrentContent()))

注意：多媒體，image的“type”跟普通的text(unstyled)不一樣,是“atomic”。文本的轉(zhuǎn)換之間。

3）看看“3”處的數(shù)據(jù)結(jié)構(gòu)

draftToHtml()方法

將原始js格式轉(zhuǎn)換成html字符串；

console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())))

html字符串

? ??????????????????????第一個demo講解結(jié)束分割線

????????????????????????????????????DEMO2

編輯有值的富文本

難點(diǎn)：解析html字符串，讓其顯示在富文本編輯器中，可編輯。

理想中的效果圖:

效果圖

實(shí)際你遇到的：應(yīng)該顯示圖片的地方卻顯示成一個相機(jī)；

Steps

從后臺獲取的html字符串

draft官網(wǎng)解析的方式。用了自帶的converFromHTML去轉(zhuǎn)換;

看一下轉(zhuǎn)換后的數(shù)據(jù)格式

text值在轉(zhuǎn)換后變成了相機(jī)的樣子。

所以問題就出現(xiàn)在這里了。text值是相機(jī)。

用插件“html-to-draftjs”去轉(zhuǎn)換，type值不再是相機(jī)。問題迎刃而解；

這是我第一次使用富文本，可能有些問題出有其他的解決方案，歡迎前來指教，謝謝！！