Tinymce group plugin

2024-04-27 14:10:18

字体：大中小

来源：转载

供稿：网友

Tinymce group plugin

本文介绍一个tinymce插件，用来组合显示下拉的按钮。基于4.x，不兼容3.x。

以前

配置toolbar功能按钮

需要

toolbar1:"codeundoredofullscreen" plugins:"code,fullscreen"

页面就能显示

配置 toolbar下拉的功能按钮集合，需要新写一个插件

插件核心源码：

editor.addButton('undoRedo',{type:'menubutton',icon:'mceIconmce-i-undo',menu:[{text:ed.getLang('Undo'),icon:'mceIconmce-i-bold',onclick:function(){ed.execCommand('Undo');}},{text:ed.getLang('Redo'),icon:'mceIconmce-i-redo',onclick:function(){ed.execCommand('Redo');}}]});

就能看到

现在

现在我们想要实现这类下拉功能菜单：

当然作为备选方案，可以使用使用上面提到的add menuButton的方式。不过这样的缺点是，我们如果需要5个下拉功能菜单，就不得不写五个插件，而都是重复的工作。

当一件事开始重复的时候，就一定有方法可以让其变的简单。

我们的解决办法是，通过一个插件，来配置多个下拉功能菜单。

talk is chip, show you the code:

使用配置：

toolbar1:'undoredo|groupgroupgroupgroupgroup|fullscreen',group_set:[{icon:'alignleft',buttons:'alignleft,aligncenter,alignright',title:'Aligncenter'},{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，group2modifySettingToolbar:function(ed){varindex=1;varsettings=ed.settings;if(!settings.toolbar1&&!settings.toolbar2&&!settings.toolbar3)returnfalse;vartoolbar1=settings.toolbar1.split(''),toolbar2=settings.toolbar2.split(''),toolbar3=settings.toolbar3.split('');[toolbar1,toolbar2,toolbar3].forEach(function(item){for(vari=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));},//创建groupbuttoncreateControl:function(ed){var_set=this.settings;this.modifySettingToolbar(ed);for(vari=1;i<this.toolbarNum;i++){var_item=_set.group_set[i-1];//获取多组信息if(!_item)returnfalse;var_buttons=_item?_item.buttons.split(','):[],subItem=[];for(varj=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:'mceIconmce-i-'+btn,//执行的命令闭包传入当前btnonclick:(function(btn){varcmd=BUTTONS_MAP[btn]&&BUTTONS_MAP[btn][1];returnfunction(e){ed.execCommand(cmd);}})(btn)});}ed.addButton('group'+i,{type:'menubutton',icon:_item.icon||'',menu:subItem});}returnfalse;},

注释已经很详细了，就不讲解代码了。

其中的BUTTONS_MAP是我配置的一个title&cmd的map：

//目前plugingroup支持的一些功能mapvarBUTTONS_MAP={bold:['Bold','Bold'],italic:['Italic','Italic'],underline:['Underline','Underline'],strikethrough:['Strikethrough','Strikethrough'],alignleft:['Alignleft','JustifyLeft'],aligncenter:['Aligncenter','JustifyCenter'],alignright:['Alignright','JustifyRight'],alignjustify:['Alignment','JustifyFull'],bullist:['Bulletlist','InsertUnorderedList'],numlist:['Numberedlist','InsertOrderedList'],outdent:['Decreaseindent','Outdent'],indent:['Increaseindent','Indent'],cut:['Cut','Cut'],copy:['Copy','Copy'],paste:['Paste','Paste'],undo:['Undo','Undo'],redo:['Redo','Redo'],link:['Insertlink','mceLink'],unlink:['Removelink','unlink'],image:['Insertimage','mceImage'],removeformat:['Clearformatting','mceCleanup'],help:['help','mceHelp'],code:['Sourcecode','mceCodeEditor'],hr:['Horizontalline','InsertHorizontalRule'],superscript:['Subscript','subscript'],subscript:['Superscript','superscript'],newdocument:['Newdocument','mceNewDocument'],blockquote:['Blockquote','mceBlockQuote']};

以上就是group的使用方式和源码解释，希望能帮到你。

源码托管在github: 点我下载

上一篇：Javascript非构造函数的继承

下一篇：javascript 特性