在CKEditor-4中遍歷DOM節點

Question

我們有一個bug at this CKEditor plugin，一個通用的解決方案是like to this，將通用字符串過濾器僅應用於DOM的終端文本節點。

QUESTION：如何（需要的代碼示例）遍歷通過的CKEditor-4工具選擇節點（editor.getSelection()），如CKEDITOR.dom.range？

Answer 1

第一步將從當前選擇中獲取範圍。要做到這一點只要致電：

var ranges = editor.getSelection().getRanges(); 

這給你範圍的數組，因爲理論上（和這個理論只由火狐證明）一個選擇可以包含許多範圍。但在99％的實際案例中，您只能處理第一個案例而忽略其他案例​​。所以你有range。

現在，迭代此範圍中每個節點的最簡單方法是使用CKEDITOR.dom.walker。以下面的方式使用它：

var walker = new CKEDITOR.dom.walker(range), 
    node; 

while ((node = walker.next())) { 
    // Log values of every text node in range. 
    console.log(node.type == CKEDITOR.NODE_TEXT && node.getText()); 
} 

但是，在範圍邊界處的文本節點存在問題。請考慮以下範圍：

<p>[foo<i>bar</i>bo]m</p> 

這將記錄：foo，bar和bom。是的 - 整個bom，因爲它是一個單一的節點和沃克不修改DOM（有文檔中的錯誤）。

因此，如果它等於範圍的startContainer或endContainer，並且如果是 - 只轉換範圍內的那部分，則應檢查要轉換的每個節點。

注意：我不知道沃克的內部，我不確定是否可以修改DOM，而迭代它。我建議首先緩存節點，然後進行更改。