UEditor 二次开发实例，清除css样式功能，清除元素的class和style属性

微wx笑 2023-08-23【前端开发】40 0 0关键字： Ueditor

UEditor 二次开发实例，清除css样式功能，清除元素的class和style属性，可以根据实际情况，保存字体颜色和字体大小参考：UEditor 二次开发实例，添加清除Mac下产生的BS字符（Backspace键）

UEditor 二次开发实例，清除css样式功能，清除元素的class和style属性，可以根据实际情况，保存字体颜色和字体大小55B无知

参考：55B无知

UEditor 二次开发实例，添加清除Mac下产生的BS字符（Backspace键）功能55B无知

55B无知

相关代码：55B无知

100

101

102

103

104

105

106

107

108

109

110

111

function removeAttribute(eles, attrName){
  if (eles.length > 0){
    for (var i = 0; i < eles.length; i++){
      if ("style" == attrName && eles[i].hasAttribute(attrName)){
        var stl = eles[i].getAttribute("style");
        var val = "";
        if (stl.indexOf("color") != -1 || stl.indexOf("font-size") != -1){
          var stls = stl.split(";");
          //eles[i].style = "";
          if (stls.length > 0){
             for (var j = 0; j < stls.length; j++){
               if (stls[j].trim().indexOf("color") == 0 || stls[j].trim().indexOf("font-size") == 0){
                 val += stls[j] + "; ";
               }
             }
          }
          eles[i].setAttribute("style", val);
        }else{
          eles[i].removeAttribute(attrName);
        }
      }else{
        eles[i].removeAttribute(attrName);
      }
       removeAttribute(eles[i].children, attrName);
    }
  }
};
 
function removeAttributeAll(eles, attrName){
  if (eles.length > 0){
    for (var i = 0; i < eles.length; i++){
      eles[i].removeAttribute(attrName);
      removeAttributeAll(eles[i].children, attrName);
    }
  }
};
 
UE.registerUI('remove_css', function(editor, uiName) {
    //注册按钮执行时的command命令，使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
        execCommand: function() {
          removeAttribute(this.document.body.children, "style");
          removeAttribute(this.document.body.children, "class");
          //var ctt = this.getContent();
          //ctt = ctt.replace(/<[^ ]+ (style=\"[^\"']+\")/g, '');
          //  this.setContent(ctt, false);
        }
    });
    //创建一个button
    var btn = new UE.ui.Button({
        //按钮的名字
        name: uiName,
        //提示
        title: "清除样式,但保留颜色和字体",//清除标签的 class 和 style 属性 
        //添加额外样式，指定icon图标，这里默认使用一个重复的icon
        cssRules: 'background-position: -752px -76px;',
        //点击时执行的命令
        onclick: function() {
            //这里可以不用执行命令,做你自己的操作也可
            editor.execCommand(uiName);
        }
    });
    //当点到编辑内容上时，按钮要做的状态反射
    editor.addListener('selectionchange', function() {
        var state = editor.queryCommandState(uiName);
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });
    //因为你是添加button,所以需要返回这个button
    return btn;});
 
UE.registerUI('remove_css_all', function(editor, uiName) {
    //注册按钮执行时的command命令，使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
        execCommand: function() {
          removeAttributeAll(this.document.body.children, "style");
          removeAttributeAll(this.document.body.children, "class");
        }
    });
    //创建一个button
    var btn = new UE.ui.Button({
        //按钮的名字
        name: uiName,
        //提示
        title: "清除标签的 class 和 style 属性",//清除标签的 class 和 style 属性 
        //添加额外样式，指定icon图标，这里默认使用一个重复的icon
        cssRules: 'background-position: -752px -76px;',
        //点击时执行的命令
        onclick: function() {
            //这里可以不用执行命令,做你自己的操作也可
            editor.execCommand(uiName);
        }
    });
    //当点到编辑内容上时，按钮要做的状态反射
    editor.addListener('selectionchange', function() {
        var state = editor.queryCommandState(uiName);
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });
    //因为你是添加button,所以需要返回这个button
    return btn;});