UEditor 二次开发实例，清除css样式功能，清除元素的class和style属性
微wx笑
2023-08-23【前端开发】
0
0关键字：
Ueditor
UEditor 二次开发实例，清除css样式功能，清除元素的class和style属性，可以根据实际情况，保存字体颜色和字体大小参考：UEditor 二次开发实例，添加清除Mac下产生的BS字符（Backspace键）
UEditor 二次开发实例，清除css样式功能，清除元素的class和style属性，可以根据实际情况，保存字体颜色和字体大小
参考：
相关代码：
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;});本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2023-08-23/1947.html
