Tinymce group plugin

本文介紹一個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:  點我下載