ueditor工具栏弹出html,UEditor工具栏上自定义按钮、图标、事件、窗口页面

第一步:找到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

};

注意:如果你要此功能,就不要添加【第五步】的操作了。效果图如下:

bf3cbd9180a61969f7b9d8bdd4a4f3d5.png

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

c7b14bd5a69243d9af5a78fee4e27638.png

由于此时未设置对应按钮的图片样式,所以会显示默认的“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)中的位置偏移。如需更改成另外图标,只需添加图标到该图片文件中,然后设置偏移值即可。

b915cdf5ced30ff41daaca54b2fa73f7.png

第五步:到此为止,在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑,但是我们发现点击按钮之后毫无反应。那是必然的,我们还必须为该按钮绑定属于它自己的事件处理方法。

实质上,此时一个默认的事件处理方法已经被UEditor绑定到按钮上了,只不过由于我们还没有定义该方法的具体内容,所以点击之后无任何变化。

下面我们就来定义该方法的具体内容:

找到plugins目录,在该目录中添加一个camnpr.js文件,然后在该文件中输入如下代码:【此句,最新版本1.4.3 请直接在 ueditor.all.js 文件里搜索UE.commands[' 然后在找到的任意一个位置下边添加如下代码】

1

UE.commands['camnpr'] = {

2

execCommand :function(){

3

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

4

}

5

};

13d75dae355c63df6ec0871405beb4ee.png

然后将该文件引入UEditor:打开_examples/editor_api.js文件,在paths数组中的适当位置(一般是指默认提供的插件部分地址的最后)增加一条记录:

'plugins/webapp.js',

'plugins/showmsg.js',

'ui/ui.js',

再次刷新页面点击一下按钮吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562170.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

junit 单元测试报错java.lang.NoClassDefFoundError

查看版本 junit-4.11以上版本不在包含hamcrest。 解决方法: 下载 junit-4.11以下版本或下载hamcrest-core-1.3.jar驱动包

aps后缀是什么文件_APS审核真的取消了么?

今天早上,留德朋友圈被一条看似惊人的消息刷爆了:APS审核取消了。从早上8点开始,老狗微信的提示音就没有消停过,很多学生抱着同样的问题过来询问:老师,APS是不是真的取消了?我马上爬了起来&…

基于java Springboot实现教务管理系统《视频版-建议收藏》

视频演示: 文末获取源码联系 java Springboot教务管理系统研究背景: 在当今信息社会发展中中,计算机科学的飞速发展,大多数学校开始注意办公效率的发展是很关键,对学校的管理起到举足轻重的作用。基于 Internet 网络的…

c调用python gensim包_Jupyter Notebooks嵌入Excel并使用Python替代VBA宏

以前,Excel和Python Jupyter Notebook之间我们只能选择一个。但是现在随着PyXLL-Jupyter软件包的推出,可以将两者一起使用。在本文中,我将向你展示如何设置在Excel中运行的Jupyter Notebook。在这两者之间共享数据,甚至可以从Exce…

基于java Springboot实现课程评分系统设计和实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】 🍅 欢迎点赞 👍 收藏 ⭐留言 &#x1f…

百度-Java中级面试题分享-

BeanFactory 和 ApplicationContext 有什么区别 > BeanFactory 可以理解为含有 bean 集合的工厂类。BeanFactory 包含了种 bean 的定义, 以便在接收到客户端请求时将对应的 bean 实例化。 > BeanFactory 还能在实例化对象的时生成协作类之间的关系。此举将 b…

1t硬盘怎么分区最好_win7系统硬盘怎么分区 win7系统硬盘分区步骤【介绍】

我们在使用win7系统的过程当中,经常都会把硬盘分成几个盘,不过因为一些原因,需要把硬盘进行重新分区,不过很多用户都不知道在不重装系统的情况下进行分区,那么win7系统硬盘如何分区呢?今天为大家分享win7系统硬盘分区…

京东-Java中级面试题分享-

1、哪些情况下的对象会被垃圾回收机制处理掉? 利用可达性分析算法,虚拟机会将一些对象定义为 GC Roots,从 GC Roots 出发沿着引用链向下寻找,如果某个对象不能通过 GC Roots 寻找到,虚拟机就认为该对象可以被回收掉。 …

斑能不能彻底去掉_淡妆能不能只用洗面奶卸掉?

淡妆能不能只用洗面奶卸掉?洗面奶能卸妆吗?洗面奶不可以卸妆。洗面奶一般只能清除掉水溶性的污垢,对于油性的彩妆卸效果不大。如果是化妆之后单纯地用洗面奶洁面的话,彩妆不能清除干净容易堵塞毛孔,造成毛孔粗大,皮肤粗糙。卸妆洁面二合一效果的洗面奶能够清除一部分彩妆,但是…

台式电脑连接宽带远程计算机没反应怎么办,怎么处理宽带连接提示连接被远程计算机终止?...

现在有很多人使用宽带拨号上网,有个小伙伴的宽带有一天就出现了宽带被远程计算机终止,这是怎么一回事呢?这样一来他的宽带就无法上网了,电脑没了网基本什么也干不了。请大家和小编一起来看看这个问题有什么好办法可以解决呢&#…

❤️六W字《计算机基础知识》(一)(建议收藏)❤️

计算机简介: 计算机(computer)俗称电脑,是现代一种用于高速计算的电子计算机器,可以进行数值计算,又可以进行逻辑计算,还具有存储记忆功能。是能够按照程序运行,自动、高速处理海量…

语言中要输出表格_C语言 | 表格输出若干人的信息

“要成为绝世高手,并非一朝一夕,除非是天生武学奇才,但是这种人…万中无一”——包租婆这道理放在C语言学习上也一并受用。在编程方面有着天赋异禀的人毕竟是少数,我们大多数人想要从C语言小白进阶到高手,需要经历的是…

❤️六W字《计算机基础知识》(二)(建议收藏)❤️

上一篇: ❤️六W字《计算机基础知识》(一)❤️ 51、 Access是一种____数据库管理系统。 A、发散型 B、集中型 C、关系型 D、逻辑型 52、 用高级程序设计语言编写的程序,要转换成等价的可执行程序,必须经过____。 A、…

Oracle 数据怎么实时同步到 DM DB 达梦数据库 | 亲测干货建议收藏

摘要 很多 DBA 同学经常会遇到要从一个数据库实时同步到另一个数据库的问题,同构数据还相对容易,遇上异构数据、表多、数据量大等情况就难以同步。我自己亲测了一种方式,可以很方便地完成 Oracle 数据实时同步到 DM DB 达梦数据库&#xff0c…

datagrid底部显示水平滚动_看完《惊奇队长》等彩蛋,我想到了一个制作PPT滚动字幕的方法...

滚动字幕大家都不陌生,每每看完电影,影院亮灯的时候就能看到:电影片尾滚动字幕前两天去看了《惊奇队长》,在等彩蛋的过程中,看着一行行的字幕在面前滚动,我突然想到:这种滚动字幕式动画&#xf…

Oracle 数据怎么实时同步到 Elasticsearch | 亲测干货建议收藏

摘要: 很多 DBA 同学经常会遇到要从一个数据库实时同步到另一个数据库的问题,同构数据还相对容易,遇上异构数据、表多、数据量大等情况就难以同步。我自己亲测了一种方式,很快实现了Oracle 数据实时同步到 Elasticsearch&#xff…

pe估值 python_Python编程学习笔记(7)

欢迎关注我的公众号【小散逆袭大本营】学到目前这个程度,我们已经可以画出个股的PE和PB曲线图了。但是我们知道,对于个股来说,PE或者PB的参考价值很有限,不同类型企业,其PE的市场认可程度是不同。我们几乎不可能通过仅…

Oracle 数据怎么实时同步到 MongoDB | 亲测干货分享建议收藏

摘要: 很多 DBA 同学经常会遇到要从一个数据库实时同步到另一个数据库的问题,同构数据还相对容易,遇上异构数据、表多、数据量大等情况就难以同步。我自己亲测了一种方式,可以非常方便地完成 Oracle 数据实时同步到 MongoDB&#…

html css怎么连在一起,CSS秘密花园:连体字母_html/css_WEB-ITnose

《 CSS Secrets 》是 Lea Verou 最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、南北和彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。和人一样,不是…

Oracle 数据怎么实时同步到 PgSQL | 亲测干货分享建议收藏

摘要: 这段时间负责一个老项目开发的数据库管理工作,这个项目中开发库与测试数据库分离,其中有些系统表数据与基础资料数据经常需要进行同步,相信很多 DBA 同学经常会遇到要从一个数据库实时同步到另一个数据库的问题,…