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添加手动输入颜色值