kindeditor添加手动输入颜色值
kindeditor的颜色值是定好的，如何添加手动输入颜色值的输入框，点击按钮格式化选中文本的颜色或者背景色。如果不想用kindeditor，可以换ckeditor，ckeditor可以添加自定义的颜色。
如果不想更换编辑器，继续使用kindeditor，可以按照方法添加自定义输入框和按钮，注意修改的是kindeditor-all.js，压缩后的kindeditor-min.js代码不好阅读，修改也不是难事，只要找到相关关键代码添加上即可，注意压缩后的变量名，效果如下
修改步骤如下，给颜色按钮添加一个blur事件配置，用来给按钮点击调用。搜索'forecolor,hilitecolor'，大概在5583行左右
_each('forecolor,hilitecolor'.split(','), function(i, name) {
self.clickToolbar(name, function() {
self.createMenu({
name : name,
selectedColor : self.cmd.val(name) || 'default',
colors : self.colorTable,
click : function(color) {
self.exec(name, color).hideMenu();
},
//添加blur事件，压缩的文件也是修改这里，注意通过压缩后click生成的参数和语句体替换下blur函数体及参数
blur: function (color) {
self.exec(name, color).hideMenu();
}
});
});
});
给kindeditor颜色选择器添加按钮，搜索.colors，大概4028行，在init方法最后添加下面的代码就可。
_extend(KColorPicker, KWidget, {
init : function(options) {
//.......原来的代码
for (var i = 0; i < colors.length; i++) {
row = table.insertRow(i + 1);
for (var j = 0; j < colors[i].length; j++) {
cell = row.insertCell(j);
self._addAttr(cell, colors[i][j], 'ke-colorpicker-cell');
}
};
///添加下面的3句代码，压缩后的也是搜索.colors定位代码，注意压缩后的table变量，上面的for循环的i变量名称，几options压缩后的名称值
row = table.insertRow(i + 1);
row.innerHTML = '<td colspan="6"><input type="text" style="border:solid 1px #aaa;width:130px" placeholder="如red或者#f00"/><input type="button" style="border:solid 1px #aaa;padding:1px 0;width:30px" value="设置"/></td>';
row.querySelector('[type=button]').onclick = function () { options.blur(row.querySelector('input').value)}
}
原创文章，转载请注明出处：kindeditor添加手动输入颜色值