第一步:找到editor_config.js文件中的toolbars参数,增加一个“showmsg”字符串,对应着添加一个labelMap,用于鼠标移上按钮时的提示。
复制代码
第二步:找到ui/editorui.js文件中的btnCmds数组,在其中同样增加一个“showmsg”字符串。
复制代码
第三步:清空缓存刷新下页面吧!工具栏的对应位置是否出现了一个自己定义的按钮呢?如下图所示:
由于此时未设置对应按钮的图片样式,所以会显示默认的“B”字符。要想让其显示成自己需要的图标样式,接着按照下面的步骤动手吧。
第四步:找到themes/default/ueditor.css文件,增加一条样式定义:
复制代码
此处的样式定义了showmsg图标在UEditor默认的精灵Icon图片(themes/default/images/icons.png)中的位置偏移。如需更改成另外图标,只需添加图标到该图片文件中,然后设置偏移值即可。
第五步:到此为止,在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑,但是我们发现点击按钮之后毫无反应。那是必然的,我们还必须为该按钮绑定属于它自己的事件处理方法。
实质上,此时一个默认的事件处理方法已经被UEditor绑定到按钮上了,只不过由于我们还没有定义该方法的具体内容,所以点击之后无任何变化。
下面我们就来定义该方法的具体内容:
找到plugins目录,在该目录中添加一个showmsg.js文件,然后在该文件中输入如下代码:
复制代码
然后将该文件引入UEditor:打开_examples/editor_api.js文件,在paths数组中的适当位置(一般是指默认提供的插件部分地址的最后)增加一条记录:
复制代码
再次刷新页面点击一下按钮吧!
- toolbars:[
- [..., 'searchreplace','help','showmsg']
- ],
- labelMap:{
- 'anchor':'', 'undo':'','showmsg':'简单按钮'
- }
第二步:找到ui/editorui.js文件中的btnCmds数组,在其中同样增加一个“showmsg”字符串。
- var btnCmds = [..., 'mergecells', 'deletetable', 'showmsg'];
第三步:清空缓存刷新下页面吧!工具栏的对应位置是否出现了一个自己定义的按钮呢?如下图所示:
由于此时未设置对应按钮的图片样式,所以会显示默认的“B”字符。要想让其显示成自己需要的图标样式,接着按照下面的步骤动手吧。
第四步:找到themes/default/ueditor.css文件,增加一条样式定义:
- .edui-for-showmsg .edui-icon {
- background-position: -640px -40px;
- }
第五步:到此为止,在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑,但是我们发现点击按钮之后毫无反应。那是必然的,我们还必须为该按钮绑定属于它自己的事件处理方法。
实质上,此时一个默认的事件处理方法已经被UEditor绑定到按钮上了,只不过由于我们还没有定义该方法的具体内容,所以点击之后无任何变化。
下面我们就来定义该方法的具体内容:
找到plugins目录,在该目录中添加一个showmsg.js文件,然后在该文件中输入如下代码:
- UE.commands['showmsg'] = {
- execCommand : function(){
- alert("Hello,UE developer!");
- }
- };
- 'plugins/webapp.js',
- 'plugins/showmsg.js',
- 'ui/ui.js',