Question

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

参数不是对象“code：”1003
t.selectNode（S $）; ckeditor.js（第11883行）

我的代码基本上是搜索特定类型的元素，例如输入。然后，我想在此处定义API中定义的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在同一类中定义，所以我不知道为什么我'我得到了错误。

Answer 1

一些困难： getElementsByTagName创建一个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);

好吧，乔

在ckeditor中查找并选择元素

1 个答案: