kindeditor添加手动输入颜色值

  kindeditor的颜色值是定好的,如何添加手动输入颜色值的输入框,点击按钮格式化选中文本的颜色或者背景色。如果不想用kindeditor,可以换ckeditor,ckeditor可以添加自定义的颜色。

kindeditor添加手动输入颜色值

  如果不想更换编辑器,继续使用kindeditor,可以按照方法添加自定义输入框和按钮,注意修改的是kindeditor-all.js,压缩后的kindeditor-min.js代码不好阅读,修改也不是难事,只要找到相关关键代码添加上即可,注意压缩后的变量名,效果如下

kindeditor添加手动输入颜色值

 

  修改步骤如下,给颜色按钮添加一个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添加手动输入颜色值

评论(0)Web开发网
阅读(52)喜欢(0)JavaScript/Ajax开发技巧