Найти и выбрать элемент в ckeditor

Question

Следующий фрагмент кода возвращает ошибку в firebug:

Параметр не является объектом "code:" 1003
t.selectNode (ы $.); 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.

Вместо того, чтобы работать с выбором элемента, я использовал выбор диапазона, созданный из элемента 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] и [объект 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);

Будь здоров, Джо