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

富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实现与原按钮相同的功能。本篇将介绍更为简单粗暴的方式。

传送门

1.富文本编辑器UEditor自定义工具栏(一、基础配置与字体、背景色、行间距、超链接实现)

2.富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

 一、效果图

自定义工具栏功能按钮图标效果如下

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

 

二、自定义工具栏按钮图标实现 1.增加自定义按钮 (1)打开文件 ueditor/themes/default/css/ueditor.css,添加样式 .edui-for-customimage

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

 

/*增加自定义图片图标*/ .edui-default .edui-for-customimage .edui-icon { background-image: url('../images/customicons/ne_toolsicon17.png') !important; background-repeat:no-repeat; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyxfdg.html