javascript - 在 ckeditor 中查找并选择元素

Question

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

Parameter is not an object" code: "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 元素。

我没有使用元素选择，而是使用了从元素节点创建的范围选择。我发现使用范围更灵活。
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);

body 健康，乔