//ui跟编辑器的适配層 //那个按钮弹出是dialog,是下拉筐等都是在这个js中配置 //自己写的ui也要在这里配置,放到baidu.editor.ui下边,当编辑器实例化的时候会根据ueditor.config中的toolbars找到相应的进行实例化 (function () { var utils = baidu.editor.utils; var editorui = baidu.editor.ui; var _Dialog = editorui.Dialog; editorui.buttons = {}; editorui.Dialog = function (options) { var dialog = new _Dialog(options); dialog.addListener('hide', function () { if (dialog.editor) { var editor = dialog.editor; try { if (browser.gecko) { var y = editor.window.scrollY, x = editor.window.scrollX; editor.body.focus(); editor.window.scrollTo(x, y); } else { editor.focus(); } } catch (ex) { } } }); return dialog; }; var iframeUrlMap = { 'anchor':'~/dialogs/anchor/anchor.html', 'insertimage':'~/dialogs/image/image.html', 'link':'~/dialogs/link/link.html', 'spechars':'~/dialogs/spechars/spechars.html', 'searchreplace':'~/dialogs/searchreplace/searchreplace.html', 'map':'~/dialogs/map/map.html', 'gmap':'~/dialogs/gmap/gmap.html', 'insertvideo':'~/dialogs/video/video.html', 'help':'~/dialogs/help/help.html', 'preview':'~/dialogs/preview/preview.html', 'emotion':'~/dialogs/emotion/emotion.html', 'wordimage':'~/dialogs/wordimage/wordimage.html', 'attachment':'~/dialogs/attachment/attachment.html', 'insertframe':'~/dialogs/insertframe/insertframe.html', 'edittip':'~/dialogs/table/edittip.html', 'edittable':'~/dialogs/table/edittable.html', 'edittd':'~/dialogs/table/edittd.html', 'webapp':'~/dialogs/webapp/webapp.html', 'snapscreen':'~/dialogs/snapscreen/snapscreen.html', 'scrawl':'~/dialogs/scrawl/scrawl.html', 'music':'~/dialogs/music/music.html', 'template':'~/dialogs/template/template.html', 'background':'~/dialogs/background/background.html', 'charts': '~/dialogs/charts/charts.html', 'subtitle': '~/dialogs/subtitle/subtitle.html' }; //为工具栏添加按钮,以下都是统一的按钮触发命令,所以写在一起 var btnCmds = ['undo', 'redo', 'formatmatch', 'bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase', 'strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent', 'blockquote', 'pasteplain', 'pagebreak', 'selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink', 'insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow', 'deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts']; for (var i = 0, ci; ci = btnCmds[i++];) { ci = ci.toLowerCase(); editorui[ci] = function (cmd) { return function (editor) { var ui = new editorui.Button({ className:'edui-for-' + cmd, title:editor.options.labelMap[cmd] || editor.getLang("labelMap." + cmd) || '', onclick:function () { editor.execCommand(cmd); }, theme:editor.options.theme, showText:false }); editorui.buttons[cmd] = ui; editor.addListener('selectionchange', function (type, causeByUi, uiReady) { var state = editor.queryCommandState(cmd); if (state == -1) { ui.setDisabled(true); ui.setChecked(false); } else { if (!uiReady) { ui.setDisabled(false); ui.setChecked(state); } } }); return ui; }; }(ci); } //清除文档 editorui.cleardoc = function (editor) { var ui = new editorui.Button({ className:'edui-for-cleardoc', title:editor.options.labelMap.cleardoc || editor.getLang("labelMap.cleardoc") || '', theme:editor.options.theme, onclick:function () { if (confirm(editor.getLang("confirmClear"))) { editor.execCommand('cleardoc'); } } }); editorui.buttons["cleardoc"] = ui; editor.addListener('selectionchange', function () { ui.setDisabled(editor.queryCommandState('cleardoc') == -1); }); return ui; }; //排版,图片排版,文字方向 var typeset = { 'justify':['left', 'right', 'center', 'justify'], 'imagefloat':['none', 'left', 'center', 'right'], 'directionality':['ltr', 'rtl'] }; for (var p in typeset) { (function (cmd, val) { for (var i = 0, ci; ci = val[i++];) { (function (cmd2) { editorui[cmd.replace('float', '') + cmd2] = function (editor) { var ui = new editorui.Button({ className:'edui-for-' + cmd.replace('float', '') + cmd2, title:editor.options.labelMap[cmd.replace('float', '') + cmd2] || editor.getLang("labelMap." + cmd.replace('float', '') + cmd2) || '', theme:editor.options.theme, onclick:function () { editor.execCommand(cmd, cmd2); } }); editorui.buttons[cmd] = ui; editor.addListener('selectionchange', function (type, causeByUi, uiReady) { ui.setDisabled(editor.queryCommandState(cmd) == -1); ui.setChecked(editor.queryCommandValue(cmd) == cmd2 && !uiReady); }); return ui; }; })(ci) } })(p, typeset[p]) } //字体颜色和背景颜色 for (var i = 0, ci; ci = ['backcolor', 'forecolor'][i++];) { editorui[ci] = function (cmd) { return function (editor) { var ui = new editorui.ColorButton({ className:'edui-for-' + cmd, color:'default', title:editor.options.labelMap[cmd] || editor.getLang("labelMap." + cmd) || '', editor:editor, onpickcolor:function (t, color) { editor.execCommand(cmd, color); }, onpicknocolor:function () { editor.execCommand(cmd, 'default'); this.setColor('transparent'); this.color = 'default'; }, onbuttonclick:function () { editor.execCommand(cmd, this.color); } }); editorui.buttons[cmd] = ui; editor.addListener('selectionchange', function () { ui.setDisabled(editor.queryCommandState(cmd) == -1); }); return ui; }; }(ci); } var dialogBtns = { noOk:['searchreplace', 'help', 'spechars', 'webapp','preview'], ok:['attachment', 'anchor', 'link', 'insertimage', 'map', 'gmap', 'insertframe', 'wordimage', 'insertvideo', 'insertframe', 'edittip', 'edittable', 'edittd', 'scrawl', 'template', 'music', 'background', 'charts', 'subtitle'] }; for (var p in dialogBtns) { (function (type, vals) { for (var i = 0, ci; ci = vals[i++];) { //todo opera下存在问题 if (browser.opera && ci === "searchreplace") { continue; } (function (cmd) { editorui[cmd] = function (editor, iframeUrl, title) { iframeUrl = iframeUrl || (editor.options.iframeUrlMap || {})[cmd] || iframeUrlMap[cmd]; title = editor.options.labelMap[cmd] || editor.getLang("labelMap." + cmd) || ''; var dialog; //没有iframeUrl不创建dialog if (iframeUrl) { dialog = new editorui.Dialog(utils.extend({ iframeUrl:editor.ui.mapUrl(iframeUrl), editor:editor, className:'edui-for-' + cmd, title:title, holdScroll: cmd === 'insertimage', fullscreen: /charts|preview/.test(cmd), closeDialog:editor.getLang("closeDialog") }, type == 'ok' ? { buttons:[ { className:'edui-okbutton', label:editor.getLang("ok"), editor:editor, onclick:function () { dialog.close(true); } }, { className:'edui-cancelbutton', label:editor.getLang("cancel"), editor:editor, onclick:function () { dialog.close(false); } } ] } : {})); editor.ui._dialogs[cmd + "Dialog"] = dialog; } var ui = new editorui.Button({ className:'edui-for-' + cmd, title:title, onclick:function () { if (dialog) { switch (cmd) { case "wordimage": var images = editor.execCommand("wordimage"); if (images && images.length) { dialog.render(); dialog.open(); } break; case "scrawl": if (editor.queryCommandState("scrawl") != -1) { dialog.render(); dialog.open(); } break; default: dialog.render(); dialog.open(); } } }, theme:editor.options.theme, disabled:(cmd == 'scrawl' && editor.queryCommandState("scrawl") == -1) || ( cmd == 'charts' ) }); editorui.buttons[cmd] = ui; editor.addListener('selectionchange', function () { //只存在于右键菜单而无工具栏按钮的ui不需要检测状态 var unNeedCheckState = {'edittable':1}; if (cmd in unNeedCheckState)return; var state = editor.queryCommandState(cmd); if (ui.getDom()) { ui.setDisabled(state == -1); ui.setChecked(state); } }); return ui; }; })(ci.toLowerCase()) } })(p, dialogBtns[p]); } editorui.snapscreen = function (editor, iframeUrl, title) { title = editor.options.labelMap['snapscreen'] || editor.getLang("labelMap.snapscreen") || ''; var ui = new editorui.Button({ className:'edui-for-snapscreen', title:title, onclick:function () { editor.execCommand("snapscreen"); }, theme:editor.options.theme }); editorui.buttons['snapscreen'] = ui; iframeUrl = iframeUrl || (editor.options.iframeUrlMap || {})["snapscreen"] || iframeUrlMap["snapscreen"]; if (iframeUrl) { var dialog = new editorui.Dialog({ iframeUrl:editor.ui.mapUrl(iframeUrl), editor:editor, className:'edui-for-snapscreen', title:title, buttons:[ { className:'edui-okbutton', label:editor.getLang("ok"), editor:editor, onclick:function () { dialog.close(true); } }, { className:'edui-cancelbutton', label:editor.getLang("cancel"), editor:editor, onclick:function () { dialog.close(false); } } ] }); dialog.render(); editor.ui._dialogs["snapscreenDialog"] = dialog; } editor.addListener('selectionchange', function () { ui.setDisabled(editor.queryCommandState('snapscreen') == -1); }); return ui; }; editorui.insertcode = function (editor, list, title) { list = editor.options['insertcode'] || []; title = editor.options.labelMap['insertcode'] || editor.getLang("labelMap.insertcode") || ''; // if (!list.length) return; var items = []; utils.each(list,function(key,val){ items.push({ label:key, value:val, theme:editor.options.theme, renderLabelHtml:function () { return '
' + (this.label || '') + '
'; } }); }); var ui = new editorui.Combox({ editor:editor, items:items, onselect:function (t, index) { editor.execCommand('insertcode', this.items[index].value); }, onbuttonclick:function () { this.showPopup(); }, title:title, initValue:title, className:'edui-for-insertcode', indexByValue:function (value) { if (value) { for (var i = 0, ci; ci = this.items[i]; i++) { if (ci.value.indexOf(value) != -1) return i; } } return -1; } }); editorui.buttons['insertcode'] = ui; editor.addListener('selectionchange', function (type, causeByUi, uiReady) { if (!uiReady) { var state = editor.queryCommandState('insertcode'); if (state == -1) { ui.setDisabled(true); } else { ui.setDisabled(false); var value = editor.queryCommandValue('insertcode'); if(!value){ ui.setValue(title); return; } //trace:1871 ie下从源码模式切换回来时,字体会带单引号,而且会有逗号 value && (value = value.replace(/['"]/g, '').split(',')[0]); ui.setValue(value); } } }); return ui; }; editorui.fontfamily = function (editor, list, title) { list = editor.options['fontfamily'] || []; title = editor.options.labelMap['fontfamily'] || editor.getLang("labelMap.fontfamily") || ''; if (!list.length) return; for (var i = 0, ci, items = []; ci = list[i]; i++) { var langLabel = editor.getLang('fontfamily')[ci.name] || ""; (function (key, val) { items.push({ label:key, value:val, theme:editor.options.theme, renderLabelHtml:function () { return '
' + (this.label || '') + '
'; } }); })(ci.label || langLabel, ci.val) } var ui = new editorui.Combox({ editor:editor, items:items, onselect:function (t, index) { editor.execCommand('FontFamily', this.items[index].value); }, onbuttonclick:function () { this.showPopup(); }, title:title, initValue:title, className:'edui-for-fontfamily', indexByValue:function (value) { if (value) { for (var i = 0, ci; ci = this.items[i]; i++) { if (ci.value.indexOf(value) != -1) return i; } } return -1; } }); editorui.buttons['fontfamily'] = ui; editor.addListener('selectionchange', function (type, causeByUi, uiReady) { if (!uiReady) { var state = editor.queryCommandState('FontFamily'); if (state == -1) { ui.setDisabled(true); } else { ui.setDisabled(false); var value = editor.queryCommandValue('FontFamily'); //trace:1871 ie下从源码模式切换回来时,字体会带单引号,而且会有逗号 value && (value = value.replace(/['"]/g, '').split(',')[0]); ui.setValue(value); } } }); return ui; }; editorui.fontsize = function (editor, list, title) { title = editor.options.labelMap['fontsize'] || editor.getLang("labelMap.fontsize") || ''; list = list || editor.options['fontsize'] || []; if (!list.length) return; var items = []; for (var i = 0; i < list.length; i++) { var size = list[i] + 'px'; items.push({ label:size, value:size, theme:editor.options.theme, renderLabelHtml:function () { return '
' + (this.label || '') + '
'; } }); } var ui = new editorui.Combox({ editor:editor, items:items, title:title, initValue:title, onselect:function (t, index) { editor.execCommand('FontSize', this.items[index].value); }, onbuttonclick:function () { this.showPopup(); }, className:'edui-for-fontsize' }); editorui.buttons['fontsize'] = ui; editor.addListener('selectionchange', function (type, causeByUi, uiReady) { if (!uiReady) { var state = editor.queryCommandState('FontSize'); if (state == -1) { ui.setDisabled(true); } else { ui.setDisabled(false); ui.setValue(editor.queryCommandValue('FontSize')); } } }); return ui; }; editorui.paragraph = function (editor, list, title) { title = editor.options.labelMap['paragraph'] || editor.getLang("labelMap.paragraph") || ''; list = editor.options['paragraph'] || []; if (utils.isEmptyObject(list)) return; var items = []; for (var i in list) { items.push({ value:i, label:list[i] || editor.getLang("paragraph")[i], theme:editor.options.theme, renderLabelHtml:function () { return '
' + (this.label || '') + '
'; } }) } var ui = new editorui.Combox({ editor:editor, items:items, title:title, initValue:title, className:'edui-for-paragraph', onselect:function (t, index) { editor.execCommand('Paragraph', this.items[index].value); }, onbuttonclick:function () { this.showPopup(); } }); editorui.buttons['paragraph'] = ui; editor.addListener('selectionchange', function (type, causeByUi, uiReady) { if (!uiReady) { var state = editor.queryCommandState('Paragraph'); if (state == -1) { ui.setDisabled(true); } else { ui.setDisabled(false); var value = editor.queryCommandValue('Paragraph'); var index = ui.indexByValue(value); if (index != -1) { ui.setValue(value); } else { ui.setValue(ui.initValue); } } } }); return ui; }; //自定义标题 editorui.customstyle = function (editor) { var list = editor.options['customstyle'] || [], title = editor.options.labelMap['customstyle'] || editor.getLang("labelMap.customstyle") || ''; if (!list.length)return; var langCs = editor.getLang('customstyle'); for (var i = 0, items = [], t; t = list[i++];) { (function (t) { var ck = {}; ck.label = t.label ? t.label : langCs[t.name]; ck.style = t.style; ck.className = t.className; ck.tag = t.tag; items.push({ label:ck.label, value:ck, theme:editor.options.theme, renderLabelHtml:function () { return '
' + '<' + ck.tag + ' ' + (ck.className ? ' class="' + ck.className + '"' : "") + (ck.style ? ' style="' + ck.style + '"' : "") + '>' + ck.label + "<\/" + ck.tag + ">" + '
'; } }); })(t); } var ui = new editorui.Combox({ editor:editor, items:items, title:title, initValue:title, className:'edui-for-customstyle', onselect:function (t, index) { editor.execCommand('customstyle', this.items[index].value); }, onbuttonclick:function () { this.showPopup(); }, indexByValue:function (value) { for (var i = 0, ti; ti = this.items[i++];) { if (ti.label == value) { return i - 1 } } return -1; } }); editorui.buttons['customstyle'] = ui; editor.addListener('selectionchange', function (type, causeByUi, uiReady) { if (!uiReady) { var state = editor.queryCommandState('customstyle'); if (state == -1) { ui.setDisabled(true); } else { ui.setDisabled(false); var value = editor.queryCommandValue('customstyle'); var index = ui.indexByValue(value); if (index != -1) { ui.setValue(value); } else { ui.setValue(ui.initValue); } } } }); return ui; }; editorui.inserttable = function (editor, iframeUrl, title) { title = editor.options.labelMap['inserttable'] || editor.getLang("labelMap.inserttable") || ''; var ui = new editorui.TableButton({ editor:editor, title:title, className:'edui-for-inserttable', onpicktable:function (t, numCols, numRows) { editor.execCommand('InsertTable', {numRows:numRows, numCols:numCols, border:1}); }, onbuttonclick:function () { this.showPopup(); } }); editorui.buttons['inserttable'] = ui; editor.addListener('selectionchange', function () { ui.setDisabled(editor.queryCommandState('inserttable') == -1); }); return ui; }; editorui.lineheight = function (editor) { var val = editor.options.lineheight || []; if (!val.length)return; for (var i = 0, ci, items = []; ci = val[i++];) { items.push({ //todo:写死了 label:ci, value:ci, theme:editor.options.theme, onclick:function () { editor.execCommand("lineheight", this.value); } }) } var ui = new editorui.MenuButton({ editor:editor, className:'edui-for-lineheight', title:editor.options.labelMap['lineheight'] || editor.getLang("labelMap.lineheight") || '', items:items, onbuttonclick:function () { var value = editor.queryCommandValue('LineHeight') || this.value; editor.execCommand("LineHeight", value); } }); editorui.buttons['lineheight'] = ui; editor.addListener('selectionchange', function () { var state = editor.queryCommandState('LineHeight'); if (state == -1) { ui.setDisabled(true); } else { ui.setDisabled(false); var value = editor.queryCommandValue('LineHeight'); value && ui.setValue((value + '').replace(/cm/, '')); ui.setChecked(state) } }); return ui; }; var rowspacings = ['top', 'bottom']; for (var r = 0, ri; ri = rowspacings[r++];) { (function (cmd) { editorui['rowspacing' + cmd] = function (editor) { var val = editor.options['rowspacing' + cmd] || []; if (!val.length) return null; for (var i = 0, ci, items = []; ci = val[i++];) { items.push({ label:ci, value:ci, theme:editor.options.theme, onclick:function () { editor.execCommand("rowspacing", this.value, cmd); } }) } var ui = new editorui.MenuButton({ editor:editor, className:'edui-for-rowspacing' + cmd, title:editor.options.labelMap['rowspacing' + cmd] || editor.getLang("labelMap.rowspacing" + cmd) || '', items:items, onbuttonclick:function () { var value = editor.queryCommandValue('rowspacing', cmd) || this.value; editor.execCommand("rowspacing", value, cmd); } }); editorui.buttons[cmd] = ui; editor.addListener('selectionchange', function () { var state = editor.queryCommandState('rowspacing', cmd); if (state == -1) { ui.setDisabled(true); } else { ui.setDisabled(false); var value = editor.queryCommandValue('rowspacing', cmd); value && ui.setValue((value + '').replace(/%/, '')); ui.setChecked(state) } }); return ui; } })(ri) } //有序,无序列表 var lists = ['insertorderedlist', 'insertunorderedlist']; for (var l = 0, cl; cl = lists[l++];) { (function (cmd) { editorui[cmd] = function (editor) { var vals = editor.options[cmd], _onMenuClick = function () { editor.execCommand(cmd, this.value); }, items = []; for (var i in vals) { items.push({ label:vals[i] || editor.getLang()[cmd][i] || "", value:i, theme:editor.options.theme, onclick:_onMenuClick }) } var ui = new editorui.MenuButton({ editor:editor, className:'edui-for-' + cmd, title:editor.getLang("labelMap." + cmd) || '', 'items':items, onbuttonclick:function () { var value = editor.queryCommandValue(cmd) || this.value; editor.execCommand(cmd, value); } }); editorui.buttons[cmd] = ui; editor.addListener('selectionchange', function () { var state = editor.queryCommandState(cmd); if (state == -1) { ui.setDisabled(true); } else { ui.setDisabled(false); var value = editor.queryCommandValue(cmd); ui.setValue(value); ui.setChecked(state) } }); return ui; }; })(cl) } editorui.fullscreen = function (editor, title) { title = editor.options.labelMap['fullscreen'] || editor.getLang("labelMap.fullscreen") || ''; var ui = new editorui.Button({ className:'edui-for-fullscreen', title:title, theme:editor.options.theme, onclick:function () { if (editor.ui) { editor.ui.setFullScreen(!editor.ui.isFullScreen()); } this.setChecked(editor.ui.isFullScreen()); } }); editorui.buttons['fullscreen'] = ui; editor.addListener('selectionchange', function () { var state = editor.queryCommandState('fullscreen'); ui.setDisabled(state == -1); ui.setChecked(editor.ui.isFullScreen()); }); return ui; }; // 表情 editorui["emotion"] = function (editor, iframeUrl) { var cmd = "emotion"; 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; }; editorui.autotypeset = function (editor) { var ui = new editorui.AutoTypeSetButton({ editor:editor, title:editor.options.labelMap['autotypeset'] || editor.getLang("labelMap.autotypeset") || '', className:'edui-for-autotypeset', onbuttonclick:function () { editor.execCommand('autotypeset') } }); editorui.buttons['autotypeset'] = ui; editor.addListener('selectionchange', function () { ui.setDisabled(editor.queryCommandState('autotypeset') == -1); }); return ui; }; /* 简单上传插件 */ editorui["simpleupload"] = function (editor) { var name = 'simpleupload', ui = new editorui.Button({ className:'edui-for-' + name, title:editor.options.labelMap[name] || editor.getLang("labelMap." + name) || '', onclick:function () {}, theme:editor.options.theme, showText:false }); editorui.buttons[name] = ui; editor.addListener('ready', function() { var b = ui.getDom('body'), iconSpan = b.children[0]; editor.fireEvent('simpleuploadbtnready', iconSpan); }); editor.addListener('selectionchange', function (type, causeByUi, uiReady) { var state = editor.queryCommandState(name); if (state == -1) { ui.setDisabled(true); ui.setChecked(false); } else { if (!uiReady) { ui.setDisabled(false); ui.setChecked(state); } } }); return ui; }; })();