用於沉重的HTML DOM處理的JS庫

Question

我正在用html，css和Javascript構建一個小型粘滯便箋應用程序。這些便籤的內容不僅僅是純文本。他們可以有內部標籤，如<p>, <span>, <img>等...

因此，當用戶選擇粘滯便箋DIV中的某些內容（設置爲contenteditable = true），然後單擊按鈕時，請說'使文本變粗體'，所選內容應改爲粗體文本。

我正在使用JavaScript的Range對象進行選擇。但問題在於取代現有的節點，並且新格式化的內容非常複雜。說了scneraio ...

樣本HTML：

<p> 
This is some paragraph <b> in bold </b> 
<span>This is some span</span> 
</p> 

而且可以說，用戶從

<p> 
This is <SELECTION-START>some paragraph <b> in bold </b> 
<span>This is some<SELECTION-END> span</span> 
</p> 

所以這個選擇開始從<p>標籤的一半開始，它完全有<b>標籤。並在<span>標籤的中途結束。使用Range JS對象和操縱DOM中的節點似乎很難實現這一點。

我的問題是，

• 是否有適用formatings和其他的東西，HTML DOM選擇任何現有的庫？
• 如果不是請指出一些代碼來實現這個功能。

謝謝..

注：我不希望任何HTML編輯器或插件。只需一個'DOM編輯庫'或'簡單的DOM處理代碼'

Answer 1

我的Rangy庫做了一些這方面的工作。例如，請參閱class applier module。

還有內置的瀏覽器支持樣式，如加粗，儘管您沒有完全控制它產生的標記。您需要的方法是document.execCommand()。對於切換大膽，請使用

document.execCommand("Bold", false, null);