最近想在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;
}
就显示自己的图标了。下面是我做的效果
相关推荐
kindeditor自定义添加网络视频插件-,修改批量图片上传方式flash为h5上传kindeditor自定义添加网络视频插件-,修改批量图片上传方式flash为h5上传
用法JavaScript为Kindeditor自定义按钮增加Audio标签_.docx
非常方便文本编辑插件,内容丰富,可以自定义工具按钮
非常好 是一个很棒的文本编辑器插件。非常好 是一个很棒的文本编辑器插件
使用kindeditor实现自定义邮件模板,后台根据不同数据动态生成邮件进行发送,前端简单实现demo
主要介绍了使用JavaScript为Kindeditor自定义按钮增加Audio标签的方法,KindEditor是一套开源的HTML可视化编辑器,需要的朋友可以参考下
vue 使用kindeditor粘贴复制图片上传给自己服务器,单独图片上传,避免用户到处寻找,解决了用户粘贴复制截图时候,图片变成base64,上传给后台的时候长度过于长,所以在粘贴的时候就上传给服务器,最后以形式显示在富...
kindeditor自定义添加网络视频插件,修改批量图片上传方式flash为h5
基于jquery修改kindeditor的表情插件 将emoticons.rar解压后替换kindeditor中plugin下的emoticons即可
ecshop小京东v5富文本编辑器在使用其多图上传是会出现按钮消失,或者在移动端按钮不显示的问题,针对此问题,我将其多图上传插件更改为diyupload
自己整合的一个表情插件,他自带的表情个人觉得太难看了
KindEditor4+web截屏(收费控件)
kindeditor主要用于让用户在网站上获得所见即所得编辑效果
解决kindeditor在使用验证插件下点两次才提交的问题
kindeditor插件,用来实现附件上传功能,jsp版的,可惜应用量不大,由于电脑上没有JSP环境,因此未能测试,感谢您对烈火下载的支持。
kindeditor编辑器flvplayer播放器,Kindeditor编辑器是挺好用的,可是上传的flv视频文件在前台是无法访问的。使用这个播放器可以解决这个问题。
基于插件的方式设计,所有功能都是插件,增加自定义和扩展功能非常简单。 4. 修改编辑器风格很容易,只需修改一个CSS文件。 5. 支持大部分主流浏览器,比如IE、Firefox、Safari、Chrome、Opera。
kindeditor编辑器插件_html可视化编辑器_网页可视化 kindeditor编辑器插件_html可视化编辑器_网页可视化
基于插件的方式设计,所有功能都是插件,增加自定义和扩展功能非常简单。 4. 修改编辑器风格很容易,只需修改一个CSS文件。 5. 支持大部分主流浏览器,比如IE、Firefox、Safari、Chrome、Opera。
3. 基于插件的方式设计,所有功能都是插件,增加自定义和扩展功能非常简单。 4. 修改编辑器风格很容易,只需修改一个CSS文件。 5. 支持大部分主流浏览器,比如IE、Firefox、Safari、Chrome、Opera。