LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

[转帖]UEditor百度编辑器,工具栏自定义添加一个普通按钮

freeflydom
2023年3月22日 17:46 本文热度 284

添加一个名叫“macros”的普通按钮在工具栏上:

第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“macros”字符串,

然后找到labelMap数组,对应着添加一个labelMap,用于鼠标移上按钮时的提示。

第二步:找到你所引用的ueditor.all.js文件中的btnCmds数组,在其中同样增加一个“macros”字符串。

第三步:清空缓存或刷新,工具栏的对应位置是否出现了一个自己定义的按钮呢

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

第四步:找到themes/default/css/ueditor.css文件,增加一条样式定义:

.edui-for-macros .edui-icon {    background-position: -680px -40px;}

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


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

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

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

在初始化编辑器的时候,加上自己的事件处理(插入一张图片),如下代码:

  1. var ue = UE.getEditor('editor');

  2. ue.commands['macros'] = {

  3.          execCommand: function() {

  4.            this.execCommand('insertHtml', "<img src='https://www.baidu.com/img/bd_logo1.png' />");

  5.            return true;

  6.          },

  7.          queryCommandState: function() { }

  8.        };

  1. exec:function () {
       this.execCommand('insertHtml', "<input type='button' class='M_scrawl' value='联系人称谓'>");
       return true;
    }



该文章在 2023/3/22 17:46:25 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved