在 ckeditor 中查找并选择元素

Question

以下代码片段在 firebug 中返回错误：

参数不是对象”代码：“1003
t.selectNode(s.$); ckeditor.js（第 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());

如果我手动突出显示WYSIWYG 区域然后上述代码片段的最后两行起作用，并且 getSelectedElement 与 selectElement 在同一类中定义，所以我不知道为什么会收到错误。

Answer 1

一些困难：
getElementsByTagName 创建一个 Node 集合，而不是一个数组。
就可用方法和属性而言，Node 集合非常有限。

以下是有关 Node 集合的重要知识的简要说明。
集合不是数组
http://www.sitepoint.com/a-collection-is- not-an-array/

运行 getElementsByTagName 后，我将集合移动到数组中。
这些元素不是可用的格式，因此我还将它们转换为 DOM 元素。

我没有使用元素选择，而是使用从元素节点创建的范围选择。我发现范围使用起来更加灵活。
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] 的注释。
您是否尝试过在 FireBug 中使用“console.log();”？它向您显示每个对象的所有可用方法和属性。我为所包含代码中的大多数对象添加了它。看看你的想法。

查看 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);

祝你好运，
乔