富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实现与原按钮相同的功能。本篇将介绍更为简单粗暴的方式。
传送门1.富文本编辑器UEditor自定义工具栏(一、基础配置与字体、背景色、行间距、超链接实现)
2.富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
一、效果图自定义工具栏功能按钮图标效果如下
二、自定义工具栏按钮图标实现 1.增加自定义按钮 (1)打开文件 ueditor/themes/default/css/ueditor.css,添加样式 .edui-for-customimage
/*增加自定义图片图标*/ .edui-default .edui-for-customimage .edui-icon { background-image: url('../images/customicons/ne_toolsicon17.png') !important; background-repeat:no-repeat; }