根据网上前辈提供的,还真的不错,下面也整理一下

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

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

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

//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
, toolbars:[
['fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe','insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
'print', 'preview', 'searchreplace', 'help', 'macros',
] ] 

//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准 
,labelMap:{ 'macros': 'hello' }

第二步:找到你所引用的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绑定到按钮上了,只不过由于我们还没有定义该方法的具体内容,所以点击之后无任何变化。

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

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

var ue = UE.getEditor('editor');
ue.commands['macros'] = {
execCommand: function() {
this.execCommand('insertHtml', "<img src='https://www.baidu.com/img/bd_logo1.png' />");
return true;
},
queryCommandState: function() { }
};
点击执行动作代码和效果图片:
exec:function () {
this.execCommand('insertHtml', "<input type='button' class='M_scrawl' value='联系人称谓'>");
return true;
}

附: 百度编辑器官方也提供有接口,功能是可以,体验不好,如:1. 不能自定义工具栏toolbars数组配置显示;2. 源码编辑时还能点

UEditor百度编辑器,工具栏上自定义添加一个普通按钮的更多相关文章

  1. UEditor百度编辑器,工具栏自定义添加一个普通按钮

    根据网上前辈提供的,还真的不错,下面也整理一下 添加一个名叫“macros”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“macros” ...

  2. ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义

    百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...

  3. ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传

    第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...

  4. 织梦替换ueditor百度编辑器,支持图片水印 教程

    1下载ueditor百度编辑器 2 把下载的zip解压得到ueditor文件夹,把解压到的ueditor文件夹扔进你网站的include文件夹去 3 打开 /include/inc/inc_fun_f ...

  5. VC/MFC 工具栏上动态添加组合框等控件的方法

    引言 工具条作为大多数标准的Windows应用程序的一个重要组成部分,使其成为促进人机界面友好的一个重要工具.通过工具条极大方便了用户对程序的操作,但是在由Microsoft Visual C++开发 ...

  6. 为jEasyUi的日期控件添加一个“清空”按钮----通过修改1.4的easyui.min.js

    为 jQuery EasyUI 1.4 的datebox或datetimebox添加一个清空按钮 使用场景:为用户指定了日期的格式,且日期可以为空 修改语言包easyui-lang-zh_CN.js ...

  7. ueditor 百度编辑器,取消或自定义右键菜单

    如图:有2种自定义方法,一种是改源码,一种是初始化 初始化,如下代码: var ue = UE.getEditor('XXXid',{ // contextMenu:[ {label:'', cmdN ...

  8. ueditor 百度编辑器,自定义右键菜单

    如图:有2种自定义方法,一种是改源码,一种是初始化 初始化,如下代码: var ue = UE.getEditor('XXXid',{ // contextMenu:[ {label:'', cmdN ...

  9. Ueditor百度编辑器插件的安装

    目录 插件下载地址: 1. 引入 2. 编辑器显示处 id="content" 3.底部 4.ueditor编辑器按钮配置方法 定制工具栏图标 修改配置项的方法: 插件下载地址: ...

随机推荐

  1. js跨域那些事

    原文:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其 ...

  2. WPF系列 Style

        参考 WPF: Customize your Application with Styles and Control Templates (Part 2 of 2)

  3. 【转载、推荐】不要自称是程序员,我十多年的 IT 职场总结

    注评:一气读完后,有些和我的观点类似.这篇文章显然是外国老写的,但是不妨碍我们的跨国交流. 如果我可以给每个工程教育增加一门课,它不会涉及编译器.门电路或是时间复杂度,而是一门介绍行业现实的入门课,因 ...

  4. ANSI Common Lisp Practice - My Answers - Chatper - 2

    I work out the questions by myself Chapter 2 question 4. (defun greater (x y) (if (> x y) x y ) ) ...

  5. POJ2484 A Funny Game[博弈论]

    A Funny Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5401   Accepted: 3381 Desc ...

  6. Struts2 OGNL案例

    一>>原始类型与包装类型 先定义两个实体类User和Address User package cn.entity; public class User { private String n ...

  7. 嵌入式Linux驱动学习之路(十八)LCD驱动

    驱动代码: /************************************************************************* > File Name: lcd ...

  8. php 时间加减

    <?php date_default_timezone_set('PRC'); //默认时区 echo "今天:",date("Y-m-d",time() ...

  9. JS禁止选中文本方法

    if (typeof(element.onselectstart) != "undefined") { // IE下禁止元素被选取 element.onselectstart = ...

  10. JS组件系列——封装自己的JS组件,你也可以

    前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...