在线流程图和思维导图开发技术详解（六）

一、项目概述

二、项目架构

三、几何计算难点

四、鼠标事件处理

五、数据保存与导出

六、文本处理

六、文本处理

6.1 两种富文本展示方式

本项目显示的文本皆是富文本，也就是在一个框里面，文本有多种样式。如下图所示：

在前端展示富文本有两种方式，一是HTML，二是SVG。在本项目，两种方式都用到了。因为有以下场合的技术制约：

• SVG文本不可编辑。

• 导出SVG文件之后，HTML文本无法显示。

这两个需求都是必须的。那么，就存在两种方式的转换方式，这是一个难点。

6.2 富文本编辑

在一个div中启用contenteditable属性之后，它就成为了一个富文本编辑框。结合execCommand，可以实现丰富的文本样式。遗憾的是，execCommand已经被标注为废弃。而且，这种方式也存在着缺陷：

• 自动产生u、font等标签，同样被标注为废弃。

• 字体大小只有7档，1代码9px，2代表12px，3代表16px……连常用的14px都表示不出来。

目前没有很好的解决方案，网上的开源富文本编辑控件都比较复杂，有点大材小用。

所以，本项目实现了execCommand替代方案。

在替代方案中，标签不再使用b、u、font等，而只使用div和span。而字体也就恢复正常，使用px，多少px都可以。

这个实现还是很复杂的，大致流程如下：

1. 找到选中的内容。通过document.getSelection获取选中部分。

2. 扫描整个根div，生成一个节点树，标注每个节点的字体信息，以及选中信息。有人可能会问，为什么要扫描整个根div，而不只是选中的部分呢？那是因为当改变字体之后，原来的节点可能要分成多个节点，也可能合并成一个节点。

3. 改变选中节点的选中信息。

4. 合并相同字体的部分。例如，假设原来有文字1文字2，当我们把文字2的字体大小改为14px之后，它就跟文字1一样了，两段文字没必要用两个span，合在一起即可。

5. 重新组建div内容。把节点树转换成div。

6. 恢复选中位置。原来选中哪些部分，现在还要选中哪些部分。这也是很困难的，因为有些节点已经合并或分裂，选中的位置信息需要更新。

通过上面的步骤，即可实现富文本编辑。

6.3 HTML文本转SVG文本

在HTML中，使用div和span标签包围文本；而在SVG中，使用text和tspan标签包围文本。两者在样式的写法上基本相同，唯一需要注意的是HTML中的color需要转成SVG里的fill。最大的难点是换行问题。

在HTML中，给定一个文本范围，超长的文本会自动换行。但在SVG中，文本是不会换行的，只会超出后被裁剪。那么，原来一行的HTML文本，在SVG中可能要用两个tspan。需要怎样判断一行换行了，还有是在哪里换行呢？方法是有，但比较复杂。步骤如下：

1. 对于一行文本，一个字一个字地选中。

2. 通过getBoundingClientRect，获取每个文字范围的矩形框。我们要用到的是y和height。

3. 记录前一个字符的y+height，当下一个字符的y+height跟前者不一样时，可以判定为换行了。