手法，在編輯模式下

用戶選擇的文本

我有這樣的HTML代碼（它位於contenteditable="true"塊）：手法，在編輯模式下

<ol> 
    <li>Mozilla Firefox 1.5+</li> 
    <li>Internet <span>Explorer</span> 6+</li> 
    <li>Opera 9.6+</li> 
    <li>Google Chrome 2+</li> 
    <li>Apple Safari 3+</li> 
</ol>

用戶選擇此列表中的一些文字：

完全字« Chrome»，
或確切的詞「資源管理器」（它是用span標籤包裹）。

單詞«Chrome»和«Explorer»之間的主要區別在於單詞«Explorer»包含span標籤，但「Chrome」不是。

那麼，我怎麼知道選擇的文本是否包含一些HTML標籤？

有一些正則表達式？ - 我不知道如何使用HTML標籤獲取選定的文本（我只知道如何從選擇中獲得純文本）。
有檢測範圍的commonAncestorContainer.parentNode？ - 如果我選擇了「Chrome」字樣，我的parentNode將爲li標記（但li標記不會直接包裹我選擇的字詞，我不想爲li標記設置樣式）。所以，我不能使用commonAncestorContainer.parentNode'因爲這對我沒用。

其實，我只是想設置一些CSS樣式選定文本：

如果用戶選擇的文本已經直接與一些HTML標籤的包裹，我想添加CSS規則此標記（。EQ如果用戶選擇單詞«資源管理»我要添加style="font-weight:bold;"爲span標籤;如果用戶選擇Apple Safari 3+我要添加CSS規則li標籤）
如果用戶選擇的文本只是純文本（不直接包裹帶有一些標籤，如單詞«Chrome»），我想包裝這個文本w用一些標籤並添加一些CSS規則。（有了這個項目我沒有問題，我知道如何做到這一點。）

UPD： 看，當我選擇一些文本，然後運行document.execCommand('Bold', false, null)，瀏覽器包裝我選擇用b標籤。當我再次選擇完全相同的文本並運行相同的document.execCommand('Bold', false, null)命令時，粗體消失。因此，瀏覽器不知何故知道我的選擇是用b標籤包裝並刪除它們（解包）。那麼，瀏覽器如何知道，選擇是否包含標籤？如果瀏覽器知道，爲什麼它很難用JS來實現呢？

來源

2011-10-26 artuska

這是一個稍微複雜的區域：

IE < 9具有用於選擇一個完全不同的API，並從其他瀏覽器
獲取的保持，然後造型所選擇的內容的範圍內需要注意一些DOM操作

這裏有兩個建議：

如果你只是想切換上大膽的選擇，如果你使用的CSS類，而不是元素style屬性/屬性可以使用document.execCommand("bold", false, null)
，你可以用我的Rangy庫的CSS class applier module。

來源

2011-10-26 21:19:00

大膽只是一個例子 - 我有其他的CSS樣式追加選定的文本，document.execCommand不會幫助。 – artuska

另外，我必須設置CSS樣式，而不是類。但是我會檢查Rangy的源代碼，也許我會找到一些解決方案。 – artuska

手法，在編輯模式下

回答

相關問題