Find and select element in ckeditor

Question

The following code snippet is returning an error in firebug:

Parameter is not an object" code: "1003
t.selectNode(s.$); ckeditor.js (line 11883)

My code is basically searching for elements of a certain type e.g input. I then want to make the current element of type selectElement as defined in the API here: 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());

If I manually highlight an element in the WYSIWYG area then the last two lines of the above code snippet work, and getSelectedElement is defined in the same class as selectElement so I dont know why I'm getting the error.

Solution

Some difficulties: getElementsByTagName creates a Node collection, not an array. The Node collection is very limited as far as available methods and properties are concerned.

Here is a concise explanation of the important things to know about Node collections.
A collection is not an array
http://www.sitepoint.com/a-collection-is-not-an-array/

After running getElementsByTagName, I moved the collection into an array. The elements were not in a usable format, so I also converted them into DOM elements.

Rather than working with an element selection, I used a range selection created from the element Node. I found ranges to be more flexible to work with.
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.range.html

Then at the end I created a DOM selection object containing the selected element. I created some sample objects using different methods that are available for a selection object.
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.selection.html

I saw your notes about the object types [object Object] and [object HTMLDocument]. Have you tried using " console.log(); " with FireBug? It shows you all the available methods and properties for each object. I added it for most of the objects in the included code. see what you think.

Look at the Console panel in FireBug to see the infomation about each object that log is run on. Try console.log( CKEDITOR ); to get a good overview of whats available.

Important Note: For Internet Explorer you need to open the Developer Tools window and activate Debugging in the Script panel while using " console.log(); ". Otherwise it will throw an error.

Here's the code:

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

Be Well, Joe

Comments

[oggiemc]

Hi Joe, thanks alot again for a clear and comprehensive answer..Yeah im using firebug, but i usually just use the breakboint functionality to check the values of my varaibles at different points..Im going to try out the code now..I will let you know how i get on..Once again, many thanks..there is not much feedback on the ckeditor forums so this is much welcome to say the least :)

[codewaggle]

Hi oggiemc, Glad it's helpful. I need some sleep, but I'll check this evening to see if you have any questions. Joe

[oggiemc]

This works great thanks joe..Will mark as correct answer..Was wondering if you could have a look at a question i have which leads on from this? stackoverflow.com/questions/7052974/… Thank you :)

[codewaggle]

@Ramesh I don't have access to IE9 at this time. You could try including the console.log statements and looking at it with the IE Developer Tools to see where the problem occurs.

[Ramesh]

I am getting error as "Unable to get value of the property 'selectRanges': object is null or undefined" In the Line "editor.getSelection().selectRanges( [ rangeObjForSelection ] );"..

[codewaggle]

@Ramesh I suggest that you open a new question where you can put the exact code that you're using along with the values of the console.log() output like the output for rangeObjForSelection and elementCollection. Also showing what values are used in dialog.getValueOf('find', 'findNext');. You can explain your goal, it will be a lot easier to get help that way.

[codewaggle]

@Ramesh Having looked at your other questions, I see that you are working with a text value within an element rather than an HTML element. The code here is based on selecting a collection of HTML elements via the HTML tag name, which is why it isn't working for your situation.