javascript - 自定义样式 with(out) execCommand(如何处理重叠标签)

Question

因为 execCommand 没有按预期工作，所以我想自己构建一个类似的函数。应该可以对文本应用不同的样式。如果我想添加一种样式，这很容易，因为我可以简单地使用 range.surroundContents，它让我可以在选择周围放置一个 span-tag。我还可以通过从当前光标位置移除父节点来移除标签。我唯一找不到解决方案的是如何处理以下带有重叠标签的情况:

案例 A:

<span class="bold">This is some text</span> that goes on <span class="italic">and on until the end</span>

假设用户选择从 some 到 until 的文本并应用下划线。变化应该是这样的:

<span class="bold">This is <span class="unterline">some text</span></span><span class="underline"> that goes on </span><span class="italic"><span class="underline">and on until</span> the end</span>

案例 B:

<span class="bold">This is some text</span> that goes on <span class="italic">and on until the end</span>

假设用户选择从 some 到 until 的文本并应用粗体。变化应该是这样的:

<span class="bold">This is some text that goes on </span><span class="italic"><span class="bold">and on until</span> the end</span> ... or similar valid output.

案例 C:

<span class="color-orange">This is some text</span> that goes on <span class="color-blue">and on until the end</span>

假设用户选择了从 some 到 until 的文本并应用了黄色。变化应该是这样的:

<span class="color-orange">This is </span><span class="color-yellow">some text that goes on and on until</span><span class="color-blue"> the end</span>

我怎样才能做到这一点？由于这似乎是一个常见问题，我很确定有人已经解决了这个问题，但我还没有找到任何东西。希望 SO 周围的人至少可以指出我正确的方向。谢谢!

Answer 1

简短的回答:对于一般情况，很难明智而可靠地做到这一点。我开始为此开发一个 Rangy 模块，但陷入困境并放弃了它。

看看 draft HTML Editing specification几年前，Google 的 Aryeh Gregor 曾在该项目工作。他还写了一个未优化的 JavaScript implementation他的规范中的算法针对的是当时最新的浏览器。