ueditor编辑器|ueditor自定义工具栏,图标,弹窗

废话不多说,知道程序员们大多不喜欢看长篇大论,喜欢看清楚一些的操作步骤。
第一步、找到ueditor.config.js文件,找到toolbars,在里面添加audio
ueditor编辑器|ueditor自定义工具栏,图标,弹窗
文章图片




第二步、添加labelMap,鼠标悬浮进行提示
,labelMap:{
audio:'素材-音频'
}

ueditor编辑器|ueditor自定义工具栏,图标,弹窗
文章图片


第三步、找到ueditor.all.js文件,找到btnCmds,添加audio
ueditor编辑器|ueditor自定义工具栏,图标,弹窗
文章图片


第四步、ueditor.all.js找到dialogBtns,如果设置弹窗,在ok里面添加audio
ueditor编辑器|ueditor自定义工具栏,图标,弹窗
文章图片




第五步、在ueditor.all.js添加如下代码:大约25877的位置
editorui["audio"] = function (editor, iframeUrl) {
var cmd = "audio";
var ui = new editorui.MultiMenuPop({
title:editor.options.labelMap[cmd] || editor.getLang("labelMap."+ cmd + "") || '',
editor:editor,
className:'edui-for-' + cmd,
iframeUrl:editor.ui.mapUrl(iframeUrl || (editor.options.iframeUrlMap || {})[cmd] || iframeUrlMap[cmd])
});
editorui.buttons[cmd] = ui;
editor.addListener('selectionchange', function () {
ui.setDisabled(editor.queryCommandState(cmd) == -1)
});
return ui;
};

ueditor编辑器|ueditor自定义工具栏,图标,弹窗
文章图片


第六步、在dialogs下面新建audio文件夹,在文件夹里面新建audio.html,内容自己定义,是弹框的内容
ueditor编辑器|ueditor自定义工具栏,图标,弹窗
文章图片




第七步、ueditor.all.js找到iframeUrlMap,添加如下代码
'audio': '~/dialogs/audio/audio.html',

【ueditor编辑器|ueditor自定义工具栏,图标,弹窗】ueditor编辑器|ueditor自定义工具栏,图标,弹窗
文章图片




现在就好了,可以试一下新建的按钮的弹窗了
下一篇给工具栏按钮换图标


    推荐阅读