Does anyone know (or have an idea) of how to traverse all nodes in CKEditor's document tree?
I am basically trying to find if the user has created a certain element (e.g - text field, textarea, etc.).
Ideally, i am looking for a solution of the type:
CKEDITOR.instances['idoftextarea'].document.getElementsByTagName()
Thanks!
I am basically trying to find if the user has created a certain element (e.g - text field, textarea, etc.).
Ideally, i am looking for a solution of the type:
CKEDITOR.instances['idoftextarea'].document.getElementsByTagName()
Thanks!

Re: Traversing Nodes/Elements in CKEditor's Content
var a=CKEDITOR.instances['idoftextara']._.elementsPath.list; for(var b=0;b<a.length;b++){ alert(a[b].getNameAtt()); }The above sometimes returns expected results. However, it seems as though the list property is slow in updating and b/c of this delay, this method does not return the correct results ALL the time.
Can anyone shed light on this?
Re: Traversing Nodes/Elements in CKEditor's Content
Basically, the Editor_Object() function returns a document object that will allow you to use the common getElementById() and getElementsByTagName() methods.
Useful Core Functions:
/* Return element id object id-> str|obj: if string, return element id object if object, return object d-> object or undefined (default is document) ###############################*/ function $(id,d){ if(typeof(id)=='string'){ return (isDefined(d)?d:document).getElementById(id); } return id; } /* Return elements by tag t-> tag d-> object or undefined (default is document) ###############################*/ function $et(t,d){ return (isDefined(d)?d:document).getElementsByTagName(t); } /* Tests whether variable is defined a->variable ###############################*/ function isDefined(a){ return typeof(a)=='undefined'?false:true; } /* Returns DOM elements that are members of id (a) having tag (b) a->str|obj: element id or object b->str: tag name ###############################*/ function return_MemOfIdByTag(a,b){ return $et(b,$(a)); }/* Returns Editor Object a->str: id of element converted into an editor ###############################*/ function Editor_Object(a){ a=return_MemOfIdByTag('cke_contents_'+a,'iframe')[0]; return a.contentDocument?a.contentDocument:a.contentWindow.document; }Examples:
<textarea id='editor1'></textarea> var editor_obj=Editor_Object('editor1'); //Get all 'input' tags var input_tags=return_MemOfIdByTag(editor_obj,'input); //Get element having a specific id of 'table1' var table1=$('table1',editor_obj);All of the code should work but I may have made a mistake when copying from my library and script.
Let me know if anyone has issues and I would be more than happy to assist.
Re: Traversing Nodes/Elements in CKEditor's Content
Frederico Knabben
CKEditor Project Lead and CKSource Owner
--
Follow us on: Twitter | Facebook | Google+ | LinkedIn
Re: Traversing Nodes/Elements in CKEditor's Content
Re: Traversing Nodes/Elements in CKEditor's Content
I've been trying to use this to change some elements in the current document like this:
var editor = CKEDITOR.instances['mailtxt']; var arr = editor.document.$.getElementsByTagName("img"); for (i = 0; i < arr.length; i++) { var cl = arr[i].getAttribute('class'); if ((cl == "placeholder_name")) { arr[i].setAttribute('src', "/images/ckeditor/name.png"); } }This finds the elements and changes them, so they appear different. The problem is, when clicking on the "Source code" button, i do not see any changes.. So i think, with editor.document.$ i get only the visual part of the document, the one beeing displayed. how can i traverse and change elements of the source code?
Re: Traversing Nodes/Elements in CKEditor's Content
Re: Traversing Nodes/Elements in CKEditor's Content