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

2019独角兽企业重金招聘Python工程师标准>>>

第一步：找到editor_config.js（或者ueditor.config.js）文件中的toolbars参数，增加一个“camnpr”字符串，对应着添加一个labelMap，用于鼠标移上按钮时的提示。

`1`	`toolbars:[`

`2`	`[...,` `'searchreplace','help','camnpr']`

3 ],

`4`	`labelMap:{`

`5`	`'anchor':'',` `'undo':'','camnpr':'郑州网建'`

6 }

第二步：找到ui/editorui.js文件中的btnCmds数组，在其中同样增加一个“camnpr”字符串。【如果找不到editorui.js，请直接在ueditor.all.js文件里搜索var btnCmds = [】

`1`	`var` `btnCmds = [...,` `'mergecells',` `'deletetable',` `'camnpr'];`

找到此位置，我们可以看到：

`1`	`var` `iframeUrlMap = {`

2 //...

`3`	`'emotion':'~/dialogs/emotion/emotion.html',`

4 //...

5 }

在此我们可以添加一个

'camnpr': '~/dialogs/emotion1/camnpr.html'

这个camnpr.html页面时自定义的页面，如果你要点击此按钮弹出这个页面，还需要加入如下代码（先在ueditor.all.js页面找到 editorui["emotion"] = function 在这段代码下边加入）：

`01`	`editorui["camnpr"] =` `function` `(editor, iframeUrl) {`

`02`	`var` `cmd =` `"camnpr";`

`03`	`var` `ui =` `new` `editorui.MultiMenuPop({`

`04`	`title:editor.options.labelMap[cmd] \|\| editor.getLang("labelMap."+ cmd +` `"") \|\|` `'',`

`05`	`editor:editor,`

`06`	`className:'edui-for-'` `+ cmd,`

`07`	`iframeUrl:editor.ui.mapUrl(iframeUrl \|\| (editor.options.iframeUrlMap \|\| {})[cmd] \|\| iframeUrlMap[cmd])`

08 });

`09`	`editorui.buttons[cmd] = ui;`

`10`	`editor.addListener('selectionchange',` `function` `() {`

`11`	`ui.setDisabled(editor.queryCommandState(cmd) == -1)`

12 });

`13`	`return` `ui;`

14 };

注意：如果你要此功能，就不要添加【第五步】的操作了。效果图如下：
UEditor自定义窗口页面

第三步：清空缓存刷新下页面吧！工具栏的对应位置是否出现了一个自己定义的按钮呢？如下图所示：
UEditor自定义按钮

由于此时未设置对应按钮的图片样式，所以会显示默认的“B”字符。要想让其显示成自己需要的图标样式，接着按照下面的步骤动手吧。

第四步：找到themes/default/ueditor.css（或者themes/default/css/ueditor.css）文件，增加一条样式定义:

`1`	`.edui-for-camnpr .edui-icon` `{`

`2`	`background-position:` `-640px` `-40px;`

3 }

此处的样式定义了camnpr图标在UEditor默认的精灵Icon图片（themes/default/images/icons.png）中的位置偏移。如需更改成另外图标，只需添加图标到该图片文件中，然后设置偏移值即可。
UEditor自定义图标

第五步：到此为止，在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑，但是我们发现点击按钮之后毫无反应。那是必然的，我们还必须为该按钮绑定属于它自己的事件处理方法。
实质上，此时一个默认的事件处理方法已经被UEditor绑定到按钮上了，只不过由于我们还没有定义该方法的具体内容，所以点击之后无任何变化。
下面我们就来定义该方法的具体内容：
找到plugins目录，在该目录中添加一个camnpr.js文件，然后在该文件中输入如下代码：【此句，最新版本1.4.3 请直接在 ueditor.all.js 文件里搜索UE.commands[' 然后在找到的任意一个位置下边添加如下代码】

`1`	`UE.commands['camnpr'] = {`

`2`	`execCommand :` `function(){`

`3`	`alert("你好，这是自定义按钮的事件");`

4 }

5 };

UEditor自定义事件
然后将该文件引入UEditor：打开_examples/editor_api.js文件，在paths数组中的适当位置（一般是指默认提供的插件部分地址的最后）增加一条记录：
'plugins/webapp.js',
'plugins/showmsg.js',
'ui/ui.js',
再次刷新页面点击一下按钮吧！

转载于:https://my.oschina.net/mickelfeng/blog/744460

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

ueditor工具栏弹出html,UEditor工具栏上自定义按钮、图标、事件、窗口页面
第一步:找到editor_config.js(或者ueditor.config.js)文件中的toolbars参数,增加一个"camnpr"字符串,对应着添加一个labelMap, ...
messagrbox自定义按钮c语言,基于dialogbox修改可自定义按钮及事件的弹出框插件
插件描述:基于dialogbox1.0修改可自定义按钮及事件的弹出框插件,每个按钮可绑定单独的触发事件,并且能支持将弹出框作为一个表单来填入数据并获取 $('body').dialogbox({ ty ...
echarts工具栏增加自定义按钮显示隐藏其他按钮(更多操作)
项目中遇到一个需求,要求再echarts toolbox工具栏增加自定义按钮来隐藏显示其他按钮,因为此部分资料较少,耗了不少时间,这里分享给大家. 效果图: 其实关键的就是改变按钮属性后要重新渲染一次 ...
UEditor 百度编辑器工具栏新增自定义按钮及功能
由于项目中用到了强大的UEditor富文本在线编辑器,因项目相关功能需求,而在UEditor编辑器原有的功能插件中没有我们想要的功能,所以就要在UEditor中新增一个(多个方法也一样)按扭并添加相应 ...
qt 自定义按钮图标
自定义按钮样式,鼠标悬停时,鼠标离开时,鼠标点击时.按钮有文本.背景.图标可设置. 1.设置背景直接通过setStyleSheet样式设计即可如: ui->pushButton_3->s ...
Python-python程序打包为独立的EXE文件，并配上自定义的图标
http://mini.eastday.com/mobile/171219033905969.html python是解释型语言,学习阶段都是用解释器加载运行的.不过在教小朋友的时候,如果先教会他们如 ...
为ListView每个Item上面的按钮添加事件
1.先看下效果图: 在这里仅供测试,我把数据都写死了,根据需要可以自己进行修改,此外实现ListView上面每个Item上的Button的事件有两种方法: 1.使用final变量扩展局部 ...
uniapp app 导航自定义按钮图标
1.https://www.iconfont.cn/ 2.选择图标,添加到项目中 3.下载到本地获取iconfont.ttf文件 4.复制iconfont.ttf 到相应路径 5.text 属性 u ...
怎样关闭烦人的eclipse工具栏上的调试图标
如图,差不多从2019年开始 ,eclipse默认工具栏加上了这个又长又没用的图标,乍一找还真不容易找到它是怎么关的.这里给出方法:

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

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

最新文章

热门文章