在 ckeditor 中查找和 select 元素

Question

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

参数不是对象”代码：“1003
t.selectNode(s.$); ckeditor.js（11883行）

我的代码基本上是在搜索某种类型的元素，例如输入。 然后，我想在此处的selectElement中定义 selectElement 类型的当前元素： 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 在相同的selectElement中定义，所以我不知道为什么会出现错误。

Answer 1

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

以下是关于节点 collections 的重要信息的简要说明。
集合不是数组
http://www.sitepoint.com/a-collection-is-not-an-array/

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

我没有使用元素选择，而是使用从元素节点创建的范围选择。 我发现使用范围更灵活。
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.range.html

最后，我创建了一个包含所选元素的 DOM 选择 object。 我使用可用于选择 object 的不同方法创建了一些示例对象。
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.selection.html

我看到你关于 object 类型 [object Object] 和 [object HTMLDocument] 的注释。 您是否尝试过将“console.log();”与 FireBug 一起使用？ 它向您展示了每个 object 的所有可用方法和属性。 我为包含的代码中的大多数对象添加了它。 看你怎么想。

查看 FireBug 中的控制台面板以查看有关运行日志的每个 object 的信息。 试试console.log（CKEDITOR）； 以获得对可用内容的全面了解。

重要提示：对于 Internet Explorer，您需要打开开发工具 window 并在使用“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);

好起来，乔