kindeditor自定义插件改用自己的图标

        最近想在kindeditor的基础上设计一个表单设计器，kindeditor自定义插件时，加自己的图标遇到了问题，总是不显示自己的图标。这个问题困扰了我一天，最终还是改了一下源代码才解决了。想和大家一起分享一下。

问题所在：

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); 否则影响常用的图标。
然后找到kindeditor-min.js里面使用.ke-toolbar-icon-url 样式的地方，将这个样式删除

最后定义自己的插件图标的时候就可以随心所欲了

如：

在default.css里加入

.ke-icon-text {
        background-image: url(../../../images/formtext.gif);
        width: 20px;
        height: 20px;
}

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

 

 

评论

1 楼 yesorno828 2014-02-21  

有用。。。