简单的实现一个富文本编辑器

使用过 office 文档的同学一定知道他的便捷，不仅可以很好的编辑文档，还可以赋予它一定的格式、段落、缩进，还可以使用等等。

如果我们在 web 上也想要实现这样的效果，那么我们应该怎么做呢？

我们可以在网上找到已经封装好的插件，例如：draft 或者 pell，这些插件都是开箱即用的，也可以在此之上进行封装。

当然，我们也可以选择自己封装一个我们需要的插件。

那怎么才能实现一个富文本编辑器呢？

我们可以选择 documentexecCommand 来实现一个简易的富文本编辑器。

下面先来看下 documentexecCommand 语法：

我们分别看看参数的含义：

既然知道了语法，那我们现在封装一个执行函数用来执行指令：

接下来，我们来做下工具栏的设计和封装。

假设工具栏有很多格式化的按钮，当我们点击的时候所选择的区域的文字会做相应改变，按钮既有显示的样式，还有执行功能的方法，可以使用对象来表示，所有按钮属性的集合形成了工具栏。

我们使用 actions 作为工具栏按钮的集合，即：

现在，我们来讲解下字段：

我们已经完成了工具栏的部分，现在我们实现下完整的页面和编辑区域吧！

首先创建富文本容器，在容器内分别放置工具栏和编辑区域：

我们最后来看一下实现的效果吧：

应用效果怎么样呢？我们看下面：

我们已经简单的实现了一个富文本编辑器，但是这个编辑器还有很大的空间等待我们去优化，比如：点击工具栏闪烁的问题，更多的功能等。

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

因为项目原因，使用了 react-draft-wysiwyg ；

配合使用插件如下：

1 Draftjs

2: draftjs-to-html

3: html-to-draftjs

DEMO1效果图如下：

一：安装所用插件

二：初始化一个空白的编辑器

（4）提交到后台：双方约定接收html字符串（'<p>12344444</p>'）;

重点来了：

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

这是一个ContentState对像结构

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

convertToRaw()方法

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

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

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

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

draftToHtml() 方法

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

编辑有值的富文本

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

理想中的效果图:

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

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

看一下转换后的数据格式

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

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

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

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

---