富文本编辑器我来啦🥹（鼻青脸肿 ing）

我最近做了一个开源富文本编辑器： https://github.com/2234839/range-warp

以前看到为什么都说富文本编辑器是天坑？这个问题还以为和我没什么关系，结果现在就开始踩坑了🤣

为什么做

先说一下为什么已经有了这么多成熟的产品我还在自己做吧

首先我的场景是要给老的富文本编辑器添加书签和修订功能，但老项目已经有点克苏鲁（混沌化）了而且直接替换成其他编辑器显然也不具备可行性，没有足够的时间来做这件事情，所以我想自己做一层适配层来隔绝老代码的精神污染

怎么做

本来只是想要做一个适配层：就是为老富文本编辑器添加各种自定义容器（书签，修订）功能

结果经过研究发现只要实现通过下标选中任意一段文本可以为他添加某容器包裹或者移除某容器包裹居然就可以实现一个基本完备的富文本编辑器了！

于是这个适配层本身也能是一个富文本编辑器，还可以叠加在任何以 contenteditor 为基础实现的富文本系统上，我测试了一下叠加在 ueditor plus 上基本也没啥毛病，，叠加一层中间层果然能解决任何问题😂

但是

这里的细节太多了，太折磨人了，下面是我遇到的一部分问题的思考，还有更多的细节在代码里以及肯定还有好多我没考虑的（从右到左的文字啥的从来就不打算处理，我的场景用不到）

富文本包裹容器问题：所有加粗，高亮等样式效果都可以视为一个包裹容器，所以应用样式和取消样式就是计算包裹容器的范围应该如何处理。

现在有一个问题：跨段落的容器包裹如何处理？

1. 单容器元素包裹：直接创建一个元素将内容包裹进去
2. 分段包裹：为每个段落中的部分创建一个内联容器

   1. 这种方法就失去了包裹语义：考虑如果容器间被插入了容器，显然新容器无法被包裹，但是对于加粗高亮等容器而言这是可接受的

      1. 这是大部分编辑器的做法，解决插入问题他们依赖自定义数据模型和强控制用户输入的方案
   2. 为所有容器分配相同的 id ，来表示他们是一个组，并且这些元素本身可以视为锚点

      1. 剪贴板清洗（ html 规范化）：hack 剪切和复制功能，避免剪切锚点粘贴到其他地方导致包裹范围出现变化，也就是容器注册时应该要注册一下他是否可以被复制（注意不是禁止复制，是复制后的剪贴板中有文本，有 html （这个 html 没有禁止复制的容器，但容器内的其他容器的 html 是可以存在的））
3. 锚点虚拟容器包裹，通过两个锚点来确定一个范围，这样可以解决 2 的问题

   1. 锚点元素被剪切或者复制粘贴了怎么办？