KindEditor插件改用自定义图标

2019独角兽企业重金招聘Python工程师标准>>>

关键代码：

kindeditor目录/themes/default/default.css

.ke-toolbar-icon-url {
 background-image: url(default.png);
}

也就是说插件所用图片默认是

kindeditor目录/themes/default/default.png

比如超级链接按钮

.ke-icon-link {
 background-position: 0px -624px;
 width: 16px;
 height: 16px;
}

取消超级链接
.ke-icon-unlink {
 background-position: 0px -640px;
 width: 16px;
 height: 16px;
}

有一个background-position:的属性，说明了图片所在位置。

自定义的插件也受到默认图标的影响。怎样把自己的小图标加进来呢？

首先把

default.css文件里的

.ke-toolbar-icon-url {
 background-image: url(default.png);
}

注释掉

/*

.ke-toolbar-icon-url {
 background-image: url(default.png);
}

*/

然后再把所有的.ke-icon-  的css里面加上 background-image: url(default.png);
如：超链接的图标

.ke-icon-link {

 background-image: url(default.png);
 background-position: 0px -624px;
 width: 16px;
 height: 16px;
}

记住要所有的都加上 background-image: url(default.png); 否则影响常用的图标。
然后找到default.css里面要使用自定义样式的插件名，将原样式位置删除，引用的图片改为自己想换的图片

如：

.ke-icon-media {
   background-image: url(media.jpg);
   width: 16px;
   height: 16px;
}

就显示自己的图标了。下面是我做的效果

转载于:https://my.oschina.net/u/3268478/blog/1573744