CODEWITHSUNDEEP
javascriptckeditor
oggiemc
oggiemc

Reputation: 273

Find and select element in ckeditor

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.

Upvotes: 2

Views: 11813

Answers (1)

codewaggle
codewaggle

Reputation: 4943

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

Upvotes: 7

Related Questions