自定義樣式與（出）execCommand（如何處理重疊標籤）

Question

因爲execCommand不能按預期的方式工作，我想自己構建一個類似的功能。應該可以對文本應用不同的樣式。如果我想添加一個樣式，這很容易，因爲我可以簡單地使用range.surroundContents，讓我在選擇範圍內放置一個span標籤。我也可以通過從當前光標位置刪除父節點來刪除標籤。唯一覺得我不能找到一個解決方案是如何重疊標籤處理以下情況：

方案A：

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

想象一下用戶從一些文字，直到並應用下劃線。這種變化應該是這樣的：

<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> 

想象一下用戶從一些文字，直到並應用了大膽的。這種變化應該是這樣的：

<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> 

想象一下用戶從一些文字，直到並應用黃色。改變應該是這樣的：

<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谷歌的Aryeh Gregor在幾年前就工作過了。他還針對當時最新的瀏覽器撰寫了規格未經優化的算法JavaScript implementation。