如何检查TinyMCE内的节点类?

时间:2010-07-19 09:44:08

标签: tinymce

我想检查TinyMCE中的节点是否有一个以'border'开头的类。我尝试使用

检索节点的类
 tinyMCE.activeEditor.dom.getClasses();

但它返回null。

有没有办法做到这一点?我需要找出节点是否有任何类用'border'字样盯着它,如果它已经用其他类替换该类。

1 个答案:

答案 0 :(得分:1)

没问题。假设您的编辑器中只有一个节点:

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

使用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");
} 

编辑:如果你想检查内容中的每个节点,你需要递归地遍历body-domtree并检查每个节点:

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

应该在编辑器中获取所有类:

 tinyMCE.activeEditor.dom.getClasses();

但要用这些信息替换它们并不容易。