html怎么把按钮做成可以百度,ueditor百度编辑器 自定义— 按钮、图标、事件、窗口页面...

第一步：找到ueditor文件夹下的ueditor.config.js下toolbars参数，新增一个字符串showmsg(根据添加功能自定义命名)，同时新增一个labelMap用于鼠标移入显示自定义提示信息

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义

, toolbars: [[

......,print', 'preview', 'searchreplace', 'help'

//, 'drafts' 从草稿箱加载

//新增自定义按钮

,'showmsg'

]]

//自定义按钮鼠标移入提示

,labelMap:{

'showmsg':'显示提示信息'

}

第二步：找到ueditor文件夹下的ueditor.all.js的btnCmds数组，添加字符串'showmsg'

这个时候刷新页面就可以在help按钮后面新增了一个按钮，但是按钮的图标显示的是B(默认的样式)

第三步：在显示出来按钮后，我们发现按钮的图标不是我们想要的，然后我们找到ueditor文件夹下的themes文件夹下的default文件夹下的css文件夹下的ueditor.css,在文件的末尾加上如下css：

.edui-for-showmsg .edui-icon{

background-position:-200px -40px;

}

这时候再刷新页面就发现图标已经换掉了，这里要解释下就是图标都是使用themes/default/images/icons.png这个图片文件通过偏移量来选择图标的，如果有自定义图标，只需要将制作好的图标加入到icons.png中，然后设置偏移量就可以了。

第四步：在ueditor文件夹,dialogs目录下定义一个showmsg的文件夹，然后新建一个showmsg.js，showmsg.jsp(用于弹出的窗口)等文件

showmsg.js 自定义窗体，数据逻辑处理，如下调用：

第五步：

(1)找到ueditor文件夹下的ueditor.all.js，dedialogBtns对象 ok属性中添加字符串"showmsg"

(2)找到ueditor文件夹下的ueditor.all.js,在iframeUrlMap数组中添加自定页页面路径

(3)当我们点击按钮时发现没有反应，其实在第二步完成后ueditor已经为我们将这个按钮的点击事件绑定好了，只不过是这个点击方法是空的而已，现在就需要我们自己去重写这个点击方法了UE.commands['showmsg'] = {}。

UE.commands['showmsg'] = {     execCommand : function(){         }     },     queryCommandState:function(){          var images = this.document.getElementsByTagName("img" );          for(var i=0;i