//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" }; //为工具栏添加按钮,以下都是统一的按钮触发命令,所以写在一起 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" ] }; 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 + "" + "
" ); } }); })(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; }; })();