本文介绍一个tinymce插件，用来组合显示下拉的按钮。基于4.x，不兼容3.x。
以前
配置toolbar功能按钮
需要
toolbar1: "code undo redo fullscreen"
plugins: "code, fullscreen"
页面就能显示
配置 toolbar下拉的功能按钮集合，需要新写一个插件
插件核心源码：
editor.addButton(‘undoRedo‘, {
type: ‘menubutton‘,
icon: ‘mceIcon mce-i-undo‘,
menu: [
{
text: ed.getLang(‘Undo‘),
icon: ‘mceIcon mce-i-bold‘,
onclick: function() {
ed.execCommand(‘Undo‘);
}
},
{
text: ed.getLang(‘Redo‘),
icon: ‘mceIcon mce-i-redo‘,
onclick: function() {
ed.execCommand(‘Redo‘);
}
}
]
});
就能看到
现在
现在我们想要实现这类下拉功能菜单：
当然作为备选方案，可以使用使用上面提到的add menuButton的方式。不过这样的缺点是，我们如果需要5个下拉功能菜单，就不得不写五个插件，而都是重复的工作。
当一件事开始重复的时候，就一定有方法可以让其变的简单。
我们的解决办法是，通过一个插件，来配置多个下拉功能菜单。
talk is chip, show you the code:
使用配置：
toolbar1: ‘undo redo | group group group group group | fullscreen‘,
group_set: [{
icon: ‘alignleft‘,
buttons: ‘alignleft,aligncenter,alignright‘,
title: ‘Align center‘
}, {
icon: ‘bullist‘,
buttons: ‘bullist,numlist‘,
title: ‘advanced.bullist_desc‘
}, {
icon: ‘indent‘,
buttons: ‘indent,outdent‘,
title: ‘advanced.indent_desc‘
}, {
icon: ‘subscript‘,
buttons: ‘superscript,subscript‘,
title: ‘advanced.sup_desc‘
},{
icon: ‘image‘,
buttons: ‘alitophotobank,image, aliphotobank‘,
title: ‘advanced.sup_desc‘
}];
效果:
plugin group实现
修改 toolbar 配置
toolbar1配置了5个group占位符，但是addButton的第一个参数name一定要和toolbar上的占位配置一致，所以第一步是修改 settings.toolbar上的group占位符。
// 修改 setting中toolbar上的group，group为group1，group2
modifySettingToolbar: function(ed) {
var index = 1;
var settings = ed.settings;
if(!settings.toolbar1 && !settings.toolbar2 && !settings.toolbar3) return false;
var toolbar1 = settings.toolbar1.split(‘ ‘),
toolbar2 = settings.toolbar2.split(‘ ‘),
toolbar3 = settings.toolbar3.split(‘ ‘);
[toolbar1, toolbar2, toolbar3].forEach(function(item) {
for (var i = 0; i < item.length; i++) {
if(item[i] == ‘group‘) {
item[i] = ‘group‘ + index;
index ++;
}
};
});
this.toolbarNum = index;
settings.toolbar1 = toolbar1.join(‘ ‘);
settings.toolbar2 = toolbar2.join(‘ ‘);
settings.toolbar3 = toolbar3.join(‘ ‘);
},
插件核心代码
//编辑器初始化后将初始化一个插件实例
init: function(ed, url) {
//在这个实例中我们保存一些编辑器的公用信息
this.ed = ed;
//保留配置信息
this.settings = ed.settings;
// 注意 4.x 没有3.x的 ed.onInit 方法
ed.on(‘init‘, function() {
this.createControl(ed);
}.bind(this));
},
// 创建 group button
createControl: function(ed) {
var _set = this.settings;
this.modifySettingToolbar(ed);
for (var i = 1; i < this.toolbarNum; i++) {
var _item = _set.group_set[i-1]; //获取多组信息
if(!_item) return false;
var _buttons = _item ? _item.buttons.split(‘,‘) : [],
subItem = [];
for (var j = 0, l = _buttons.length; j < l; j++) {
btn = _buttons[j] && _buttons[j].trim();
subItem.push({
//配置标题信息则需要考虑到语言和主题
text: ed.getLang(BUTTONS_MAP[btn] && BUTTONS_MAP[btn][0]),
//图标类自己创建的话则需要注意格式
icon: ‘mceIcon mce-i-‘ + btn,
//执行的命令 闭包传入当前btn
onclick: (function(btn) {
var cmd = BUTTONS_MAP[btn] && BUTTONS_MAP[btn][1];
return function(e) {
ed.execCommand(cmd);
}
})(btn)
});
}
ed.addButton(‘group‘ + i, {
type: ‘menubutton‘,
icon: _item.icon || ‘‘,
menu: subItem
});
}
return false;
},
注释已经很详细了，就不讲解代码了。
其中的BUTTONS_MAP是我配置的一个title&cmd的map：
// 目前 plugin group支持的一些功能map
var BUTTONS_MAP = {
bold : [‘Bold‘, ‘Bold‘],
italic : [‘Italic‘, ‘Italic‘],
underline : [‘Underline‘, ‘Underline‘],
strikethrough : [‘Strikethrough‘, ‘Strikethrough‘],
alignleft : [‘Align left‘, ‘JustifyLeft‘],
aligncenter : [‘Align center‘, ‘JustifyCenter‘],
alignright : [‘Align right‘, ‘JustifyRight‘],
alignjustify : [‘Alignment‘, ‘JustifyFull‘],
bullist : [‘Bullet list‘, ‘InsertUnorderedList‘],
numlist : [‘Numbered list‘, ‘InsertOrderedList‘],
outdent : [‘Decrease indent‘, ‘Outdent‘],
indent : [‘Increase indent‘, ‘Indent‘],
cut : [‘Cut‘, ‘Cut‘],
copy : [‘Copy‘, ‘Copy‘],
paste : [‘Paste‘, ‘Paste‘],
undo : [‘Undo‘, ‘Undo‘],
redo : [‘Redo‘, ‘Redo‘],
link : [‘Insert link‘, ‘mceLink‘],
unlink : [‘Remove link‘, ‘unlink‘],
image : [‘Insert image‘, ‘mceImage‘],
removeformat : [‘Clear formatting‘, ‘mceCleanup‘],
help : [‘help‘, ‘mceHelp‘],
code : [‘Source code‘, ‘mceCodeEditor‘],
hr : [‘Horizontal line‘, ‘InsertHorizontalRule‘],
superscript : [‘Subscript‘, ‘subscript‘],
subscript : [‘Superscript‘, ‘superscript‘],
newdocument : [‘New document‘, ‘mceNewDocument‘],
blockquote : [‘Blockquote‘, ‘mceBlockQuote‘]
};
以上就是group的使用方式和源码解释，希望能帮到你。
源码托管在github: 点我下载