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