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

还是叫明

已于 2022-09-20 16:17:13 修改

阅读量620

点赞数

分类专栏：前端文章标签：流程图思维导图脑图富文本

于 2022-09-20 16:07:32 首次发布

本文链接：https://blog.csdn.net/lweiyue/article/details/126955394

版权

15 篇文章 3 订阅

订阅专栏

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

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

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

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

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

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

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

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

找到选中的内容。通过document.getSelection获取选中部分。
扫描整个根div，生成一个节点树，标注每个节点的字体信息，以及选中信息。有人可能会问，为什么要扫描整个根div，而不只是选中的部分呢？那是因为当改变字体之后，原来的节点可能要分成多个节点，也可能合并成一个节点。
改变选中节点的选中信息。
合并相同字体的部分。例如，假设原来有<span style="font-size:14px">文字1<span><span style="font-size:18px">文字2<span>，当我们把文字2的字体大小改为14px之后，它就跟文字1一样了，两段文字没必要用两个span，合在一起即可。
重新组建div内容。把节点树转换成div。
恢复选中位置。原来选中哪些部分，现在还要选中哪些部分。这也是很困难的，因为有些节点已经合并或分裂，选中的位置信息需要更新。

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

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

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

关注