ueditor如何添加自定义按钮
ueditor版本:ueditor-1.4.3.3,据说这种修改方法只适用于1.2以上版本。
博主当前想在ueditor中添加一个保存按钮。
修改流程如下:
第一步:
找到ueditor.config.js文件中的toolbars参数,增加一个“savebook”字符串
, toolbars: [[
..., 'cleardoc', '|','savebook'
]]
第二步:
找到zh-cn.js文件中的labelMap参数,增加一个“'savebook': '保存'”字符串,这是用于鼠标移到按钮时出现的提示;
'labelMap':{
... , 'charts': '图表', 'savebook': '保存'
},
第三步:
找到ueditor.all.js文件中的btnCmds参数,增加一个savebook字符串;
var btnCmds = [..., 'drafts','savebook'];
第四步:
添加自定义图标,网上一个比较通用的方法如下:
.edui-default .edui-toolbar .edui-for-savebook .edui-icon {
background-image: url(../images/savebook.png); //你自己选好的图标
background-repeat: no-repeat;
70px !important;
background-position: 0px 2px;
}
但是在ueditor自带的图标集icons.png,中正好有个保存图标,我们正好可以直接用上,所以博主这边就不自己画了。
博主这边修改如下:
.edui-default .edui-toolbar .edui-for-savebook .edui-icon {
width: 24px !important; background-position: -479px -19px;
}
最终运行效果如下,保存按钮,我们就添加好了。
第五步:
添加按钮触发事件,你可以直接添加到你的自定义js文件中,如下:
$(function () {
UE.commands['savebook'] = {
execCommand: function () {
alert("OK");
}
};
});
另一种是将触发事件直接写到ueditor.all.js中,两种方法都能触发弹窗事件。
UE.commands['savebook'] = {
execCommand: function () {
alert("OK");
}
};