第一次使用富文本编辑器，遇到了很多的坑，与大家分享。

因为项目原因，使用了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>'）;

重点来了：

（5）分三步解释

1）看看“1”处的数据结构到底是怎么样的

这是一个ContentState对像结构

console.log(editorState.getCurrentContent())

2）看看“2”处的数据结构

convertToRaw()方法

将一个ContentState对象，转换为一个原始的JS结构。

在保存编辑器状态以用于存储，转换为其他格式或应用程序中的其他用途时使用

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

注意：多媒体，image的“type”跟普通的text(unstyled)不一样,是“atomic”。文本的转换之间。

3）看看“3”处的数据结构

draftToHtml()方法

将原始js格式转换成html字符串；

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

html字符串

                        第一个demo讲解结束分割线

---

                                    DEMO2

---

编辑有值的富文本

难点：解析html字符串，让其显示在富文本编辑器中，可编辑。

理想中的效果图:

效果图

实际你遇到的：应该显示图片的地方却显示成一个相机；

Steps

从后台获取的html字符串

draft官网解析的方式。用了自带的converFromHTML去转换;

看一下转换后的数据格式

text值在转换后变成了相机的样子。

所以问题就出现在这里了。text值是相机。

用插件“html-to-draftjs”去转换，type值不再是相机。问题迎刃而解；

这是我第一次使用富文本，可能有些问题出有其他的解决方案，欢迎前来指教，谢谢！！