//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 +
"" +
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;
};
})();