富文本编辑器UEditor自定义工具栏（三、自定义工具栏功能按钮图标及工具栏样式简单修改）...

 

 导读

富文本编辑器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-repe