【开源我写的富文本】打造全网最劲富文本系列之大话技术难点与特色设计。

文章开始前先上个图：

大话富文本技术概要：

　　在web领域，一提到富文本，大伙都觉得很高深，很难，很复杂。但是如果你看了我这篇简短的技术分析，你会发现其实富文本不算高深，称不上很难，只是比较复杂，需要用点心，折腾几回你也能做一个富文本编辑器。下面我将采用“问题+答疑”方式聊聊web端富文本。

 

问题一、富文本是怎么形成的？

　　有网友在切换【源码】状态下看到一大堆html + css修饰时，竟然向我提问：“怎么是这样的一堆东西？”。网友很惊讶，我也很惊讶。作为一个web开发者，写不了富文本，那也不至于不了解web富文本的构成吧！所以我觉得有必要声明一下这个基础知识：web富文本是由html标签 + css修饰形成的 ！君不信，可以去翻看ueditor、tinymce、kingeditor等等富文本编辑器。

 

问题二、富文本既然是html + css修饰形成的，那怎么做才能根据用户操作进行修饰呢？

回答这个问题，需要从两方面来解析：

1、javascript脚本是如何知道用户光标所在的选区？

　　答案：range对象。

　　每个浏览器中的window对象之下都存在一个range对象。range对象存放着当前光标所在的选区信息。现代浏览器(ie10、chrome、firefox)对range的支持都很良好，如果是旧版本的ie浏览器，range对象的获取，其内部的某些api可能有不同的差异，需要做兼容性处理。根据range对象获得选区信息是开发者操控选区html内容的第一个步骤。

2、得到了选区后，如何进行css修饰，比如修饰color=“red”？

　　这可以说是富文本技术实现的麻烦之处(难点)。玩过富文本技术的同学，肯定会想到“document.execcommand()”这个大名鼎鼎的对象。目前市面上的富文本基本都是基于这个对象打造。比如对选区执行一个加粗修饰，你可以直接调用“document.execcommand('bold')”。该api会将用户选择的文本都加上一个"strong"标签。

　　然而，document.execcommand不是万能的，比如不支持插入文件、视频，行高、边距修饰等。所以基于这个api的富文本都必须扩展execcommand接口。execcommand除了支持有限外，还有个很令人不爽的地方，其执行的修饰并不符合web规范的要求，比如加粗采用“strong”标签，而不是css修饰里的“font-weight:bold”，而且多次修饰操作会产生n层嵌套。基于execcommand打造的富文本可以说没有规律而言。其输出的html内容，不适用于后端转word、pdf等需求场景。

 

问题三、execcommand是富文本技术的核心，但也是周身缺点，请问有何良方？

　　良方：依靠range，提取用户选择的文本，将文本采用span标签包装，然后采用标准的css对span标签进行修饰！

 

问题四、良方思想很好，实现上有什么难点吗？

　　难点肯定有，而且需要一些巧妙的设计及实现。

　　1、选区丢失问题

　　　　选区丢失问题，execcommand方案同样存在。表现为：用户划选了选区，当点击修饰按钮时候，由于浏览器的鼠标焦点机制，选区丢失了，造成点击事件的修饰功能找不到选区。

　　　　解决办法：利用编辑器区域的mouseleave，修饰按钮的mousedown、mouseup组合应用对选区进行暂存和恢复。

　　2、span标签组装问题

 　　　　span标签组装？是什么意思呢？请看下面一个选区demo，用户划选的内容是跨元素节点的复杂选区。

　　　　

　　　　 用户划选的区域，覆盖了前后两个span、中间一个纯文本。根据修饰需求，需要对 “节点中间内容结束” 这个划选的内容进行加粗。那么需要将上述选区转为span包装后利用css修饰：

　　　　

　　　　 从上述demo，可以看出用户划选的内容可能是一个标签内的，也可能是跨多个标签而形成的。开发者需要编写一个算法将划选内容提取组装为多个span水平包装的结构。

　　3、span水平包装算法实现要点

　　　　根据range对象的collapsed属性判断是否是跨标签选区。

　　　　1）非跨标签选区：根据range.startoffset、range.endoffset拆分内容形成一个数组，然后对每个数组的内容进行span包装。

　　　　2）跨标签选区：根据range.startcontainer、range.endcontainer、range.startoffset、range.endoffset，将内容进行拆分，并将拆分后的内容进行span包装。

　　4、span包装引起的选区丢失恢复问题

　　　　在span包装的算法中，由于需要对dom节点进行删除、插入，会引起选区丢失。故需要在进行span组装前，将当期选区的信息暂存起来，组装好span后，根据暂存信息进行选区恢复。

算法思想总结

　　1、利用range对象获取用户选区信息。

　　2、根据range信息，将用户选择的内容进行拆分组合，形成水平结构的span包装。

　　3、上述算法中，由于焦点变化，dom删除插入的影响，存在选区丢失的问题，需要将选区信息暂存，并在适当时候恢复选区。

 

特色功能设计实现思想

　　在bui-editor富文本中，提供了比较有特色的 “浮动文本、图片”，左右边距拖动调整，流程图绘制等特色功能。下面介绍一下这些特色功能的实现。

　　浮动文本/图片功能

　　　　1.web开发者都知道，html的浮动是利用position:absolute来实现的，absolute要求父元素是relatvie或者absulote。bui-editor同样是利用这个技术点来实现浮动文本/图片需求。

　　　　2.bui-editor中会将编辑区域用一个声明了relative的div进行包装，在这个包装div之下，是存放段落的div和浮动的div，这样从结构设计上满足段落的流式布局，又满足了浮动的需求。

　　　　3.编辑区域内既然已经存在了流式段落div和浮动div，那么需要对这两种不同的div内容分别做处理。

　　左右边距拖动调整功能

　　　　边距拖动：利用range选区提取当前覆盖的段落，通过拖动两边的边线，调整段落的margin-left、width进行实现段落左右边距的调整。

　　流程图绘制功能

　　　　流程图功能：利用bui-flow设计器绘制好流程，通过canvas技术导出base64位的图片数据，然后插入到富文本中。富文本中将流程图的json数据保存起来并实现流程图的可编辑。

 

富文本结构设计

　　目前市面上的富文本几乎都是利用execcommand api来实现，这个api输出的富文本html结构是混乱的（标签不规范、n层嵌套、非css修饰）。这样的富文本结构限制了富文本应用的后端扩展，难以实现word、pdf的转换。为此，bui-editor对富文本的输出结构做了规范化的定义：

　　1、段落结构采用div标签，为什么不采用p标签呢？p标签是一个内容标签，而我们的段落内还存在table(表格)，采用p标签不符合w3c规范了。

　　2、段落内采用水平化的span子标签，利用span子标签包装内容，这样便于将修饰设置到span标签上，同时水平化的结构避免了嵌套的问题。

　　3、段落div内除了span子标签，还存在table标签、image标签、pre代码块标签的可能性。

　　4、table单元格内采用p标签作为单元格内的基本输入单位，这样可以解决单元格内回车换行的需求。

　　

技术要点总结：

　　1、掌握range对象

　　2、理解选区丢失的场景、原因，及其对应策略

　　2、实现span拆分包装算法

　　4、设计好富文本的html结构，抛弃execcommand api

 

我相信，如果你对上述要点都有了理解，只要你愿意多动几次手，开发富文本不是个很难的事情。

 

欢迎访问项目： https://gitee.com/kevin-huang/bui-editor-public

 

欢迎访问我正在开发的流程设计器demo ：