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:  点我下载