查找和CKEditor的

Question

下面的代碼段在螢火返回錯誤選擇元件：

參數不是一個對象 「代碼：」 1003
t.selectNode;（S $。） ckeditor.js（line 11883）

我的代碼基本上是搜索特定類型的元素，例如輸入。然後我要讓selectElement類型的當前元素作爲這裏的API中定義：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.selection.html#selectElement

var selectOption = dialog.getValueOf('find', 'findNext'); 
var documentWrapper = editor.document; // [object Object] ... CKEditor object 
var documentNode = documentWrapper.$; // [object HTMLDocument] .... DOM object 
elementArray = documentNode.getElementsByTagName(selectOption); 
editor.getSelection().selectElement(elementArray[count]); // Trying to make the  current element of type selectElement 
var elementX = editor.getSelection().getSelectedElement(); 
alert('element ' + elementX.getName()); 

如果我手動突出所見即所得區域的元件，然後上面的代碼片段工作的最後兩行，並getSelectedElement被定義爲與selectElement相同的類，所以我不知道爲什麼我會收到錯誤。

Answer 1

一些難點： getElementsByTagName創建一個Node集合，而不是一個數組。 就可用的方法和屬性而言，Node集合非常有限。

下面是關於Node集合重要信息的簡要說明。
集合是不是數組
http://www.sitepoint.com/a-collection-is-not-an-array/

運行的getElementsByTagName後，我提出的集合到一個數組。 這些元素沒有可用的格式，所以我也將它們轉換爲DOM元素。

我沒有處理元素選擇，而是使用從元素Node創建的範圍選擇。我發現範圍要更靈活。
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.range.html

然後在最後我創建了一個包含選定元素的DOM選擇對象。我使用可用於選擇對象的不同方法創建了一些示例對象。
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.selection.html

我看到了關於對象類型[object Object]和[object HTMLDocument]的註釋。 你有沒有嘗試過使用「console.log（）;」與FireBug？它向您顯示每個對象的所有可用方法和屬性。我將它添加到包含的代碼中的大部分對象中。看看你的想法。

查看FireBug中的控制檯面板，查看有關運行日​​志的每個對象的信息。嘗試console.log（CKEDITOR）;以獲得可用的最新概覽。

重要說明：對於Internet Explorer，您需要打開「開發人員工具」窗口並在使用「console.log（）;」時在「腳本」面板中激活「調試」。否則它會拋出一個錯誤。

下面的代碼：

var selectOption = dialog.getValueOf('find', 'findNext'); 
var documentWrapper = editor.document; // [object Object] ... CKEditor object 
var documentNode = documentWrapper.$; // [object HTMLDocument] .... DOM object 

// NEW - This isn't an array. getElementsByTagName creates a Node collection 
// Changed name from elementArray to elementCollection 
elementCollection = documentNode.getElementsByTagName(selectOption); 

// NEW - Can't use array methods on Node Collection, so move into array and 
// change the collection items into DOM elements 
// NEW - Caveat: The collection is live, 
// so if changes are made to the DOM it could modify the var elementCollection 

var nodeArray = []; 

for (var i = 0; i < elementCollection.length; ++i) { 
    nodeArray[i] = new CKEDITOR.dom.element(elementCollection[ i ]); 
} 

// NEW - Working with an element object is problematic. 
// Create a range object to use instead of an element 
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.range.html 
var rangeObjForSelection = new CKEDITOR.dom.range(editor.document); 
console.log(rangeObjForSelection); 

// NEW - Populate the range object with the desired element 
rangeObjForSelection.selectNodeContents(nodeArray[ count ]); 
console.log(rangeObjForSelection); 

// OLD - editor.getSelection().selectElement(elementCollection[count]); 
// Trying to make the current element of type selectElement 
// NEW - Highlight the desired element by selecting it as a range 
editor.getSelection().selectRanges([ rangeObjForSelection ]); 

// OLD - var elementX = editor.getSelection().getSelectedElement(); 
// NEW - Create a DOM selection object. 
var selectedRangeObj = new CKEDITOR.dom.selection(editor.document); 
console.log(selectedRangeObj); 

// NEW - You can look at the properties and methods available 
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.selection.html 
// I've created sample objects using the methods that seem most useful. 

var elementX = selectedRangeObj.getRanges(); 
console.log(elementX); 

var elementX2 = selectedRangeObj.getStartElement(); 
console.log(elementX2); 

var elementX3 = selectedRangeObj.getSelectedText(); 
console.log(elementX3); 

var elementX4 = selectedRangeObj.getNative(); 
console.log(elementX4); 

要好吧， 喬