富文本编辑器 UEditor如何新增自定义按钮

技术知识
0 2280
小师傅 小师傅2020-07-20
积分:2386

在使用UEditor的时候,有些场景下可能需要增加一些插件本身没有的功能,这时候可以通过添加按钮来实现。

  1. 在ueditor.config.js中找到toolbars的数组,并在数组中添加一个你需要新增的按钮功能名称如下图所示

    在这里我是要增加一个标题样式的功能;

toolbars的数组中添加标签

2.在ueditor.config.js中找到toolbars的数组下面 找到labelMap并添加如下图所示,主要是用于鼠标放置上去显示的文字提示内容

自定义按钮的文字提示

3.在ueditor.all.js  中找到"btnCmds" ,在数组的最后添加"smalltitle",如下图所示

smalltitle配置

4.这是该按钮的样式是默认的,可以修改为自己想要的样式,在ueditor.css中添加如下所示

定义新增按钮的图标

5.自定义按钮的功能代码,在ueditor.all.js中添加如下代码,并加入你需要的功能

自定义按钮的点击事件

6. 配置成功后,查看效果

smalltitle效果



更多相关信息参考:

UEditor工具栏上自定义按钮、图标、事件、窗口页面


字数统计
精选帖子
Android 可可影视 v3.3.6无广告纯净版 1035
Android QQ音乐 v11.3.7 定制版解锁免费听歌无广告版 1699
Android 草图大师SKP v1.5 解锁会员版 7096
Android OmoFun追漫神器 v4.2.1 无广告绿色版 4166
AdobeGenP Adobe全家桶系列激活工具 v3.5.0/3.4.14.1 绿色版 4783
Android 七猫免费听书 v1.4 解锁高级版 2985
超良心的抢票神器——Bypass1.16 2386
Android 玲珑加速器 v6.10.9.40 解锁无限时间 1584
Android 大师兄影视 v3.3.8 去广告会员版 718
热门帖子
电脑和手机最新网络翻外墙教程:免费手机电脑梯子推荐及操作指南 1132
第一视角影视独白,目前是红利期,靠平台分成月赚几W+ 1075
Android TikTok_v40.6.3 免拔卡解锁全球版 986
电脑云机项目 暴力撸金玩法,不需要养机 配置没有要求 单机100个窗口一… 985
Android 酷我音乐 v11.3.1.1 去广告解锁会员版 692
超高网速梯子软件推荐:8款好用的梯子软件免费与付费全包含 636
PC微信多开终身定制版,超级简单,几行代码搞定,永不失效 560
全自动游戏搬砖项目天花板,日入千元,新手小白秒上手 295
Android 抠图P图软件 v7.8.20 解锁会员版 243