使用Ueditor二次开发功能,自动识别表格内数字的小数点后数字的位数,再显示不同底色。方便找到少数点后位数不一致的单元格。
无小数点的整数显示橙底色,1位小数点的绿底色,2位小数点的黄底色,同时对有两位小数点 的错误数字标红底。
UE.registerUI('xsdColor', function(editor, uiName) {
//注册按钮执行时的command命令,使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function() {
alert('execCommand:' + uiName)
}
});
//创建一个button
var btn = new UE.ui.Button({
//按钮的名字
name: uiName,
//提示
title: '小数点后数字不同位数颜色!',
//添加额外样式,指定icon图标,这里默认使用一个重复的icon
cssRules: 'background-position: -834px -100px;',
//点击时执行的命令
onclick: function() {
//获取编辑器中的内容,转化为uNode节点,再获取指定Node节点进行遍历,即可任意操作了。
var root = UE.htmlparser(UE.getEditor('editor' ).getContent(), true);
var tds = new Array();
var tds = root.getNodesByTagName('td' );
var i1=0;
var j1=tds.length;
var k;
var regdErr = new RegExp(/\.\d*\.\d*$/);
var regd00 = new RegExp(/\.\d\d$/);
var regd0 = new RegExp(/\.\d$/);
var regd = new RegExp(/\d+$/);
for (i1=0;i1<j1;i1++){
k=tds[i1].innerText();
if(!isNaN(k)){
k=k.toString();
if(regd.test(k)){
tds[i1].setAttr({
'style': 'background-color: #FFCC9A;'//橙色,无小数点整数数字
})
}
if(regd0.test(k)){
tds[i1].setAttr({
'style': 'background-color: #99FF0A;'//绿色,一位小数点数字
})
}
if(regd00.test(k)){
tds[i1].setAttr({
'style': 'background-color: #FFFF9A;'//黄色,两位小数点数字
})
}
}else{
if(regdErr.test(k)){
tds[i1].setAttr({
'style': 'background-color: #FF000A;'//红色,两个小数点的错误数字
})
}
}
}
editor.setContent(root.toHtml());
}
});
//当点到编辑内容上时,按钮要做的状态反射
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;
});