tags:

views:

24

answers:

1

I want to check if the node inside the tiny mce has a class starting with word 'border'. I tried to retrieve classes of the node, using

 tinyMCE.activeEditor.dom.getClasses();

but it returned null. Is there any way to do this ? I need to find if the node has any class staring with word 'border', if it has then replace that class with other.

A: 

No problem. Assuming you have only one node inside your editor it is:

class_string = tinyMCE.activeEditor.getBody().firstChild.class;

class_string_array = class_string.split(" ");

for (i=0; i < class_string_array.length; i++){
   if (class_string_array[i].search("border") !== -1) {
      alert("class found!");
      class_string_array[i] = "new_class";

      class_string = class_string_array.join(" ");
      tinyMCE.activeEditor.getBody().firstChild.setAttribute('class',class_string);

      break;      
   }
}

It is much easier to use jQuery:

node = tinyMCE.activeEditor.getBody().firstChild;
if ( $(node).hasClass("border_xxx") ){ // need to check for explicit className
   $(node).removeClass("border_xxx");
   $(node).addClass("new_class");
} 

EDIT: If you want to check for every node inside the content you will need to go through the body-domtree recursivly and check for each node:

function getTextNodesValues(tinymce,node) {
    if ( $(node).hasClass("border_xxx") ){ // need to check explicit className
       $(node).removeClass("border_xxx");
       $(node).addClass("new_class");
    } 

    for (var i=0; i<node.childNodes.length; i++) {
      el = node.childNodes[i];
      if ( $(node).hasClass("border_xxx") ){ // need to check explicit className
         $(node).removeClass("border_xxx");
         $(node).addClass("new_class");
      } 
      if (el.childNodes.length > 0) getTextNodesValues(tinymce,el);
    }
}

getTextNodesValues(tinymce, getTextNodesValues(tinymce,node) );

Should get you all Classes inside the Editor:

 tinyMCE.activeEditor.dom.getClasses();

but it is not easy to replace them with that info.

Thariama
tinyMCE.activeEditor.getBody().firstChild.class; returns undefined. :(
KutePHP
in that case you eigther have no node inside the editor or this node does not have a class attribute. what do you get using console.log(tinyMCE.activeEditor.getBody().firstChild); ?
Thariama
I have node inside editor and it has class attribute also. The element has been added to page by dragging and on click event editor is loaded. Does it mean, tinyMCE.activeEditor.getBody().firstChild; has to work only with the existing elements in the page and not with the elements which will be added dynamically ?
KutePHP
In that case you have more than one node inside the editor iframe body. Then you need to go down from bodynode recursive - I will edit my post
Thariama
I could do it using tinyMCE.activeEditor.dom.getAttrib(targetToStyle, 'Class'); Thanks Thariama :)
KutePHP
glad it works for you now
Thariama