Aloha编辑器：在aloha-multisplit-expanded框中添加新样式（aloha-button）

Question

如何在aloha-multisplit-expanded框中添加新的aloha按钮。 （我想补充的风格unlimted数量的能力的过程，而不是通过管理员，但硬编码。）

Answer 1

添加样式ALOHA编辑： 我将在这里展示如何添加一个名为“MEG”

简约风格

1. 为site \ all \ libraries \ aloha \ aloha \ plugins \ common \ format \ nls文件中的按钮添加define为“root”。 “button.meg.tooltip”：“Meg format desctiption”

2. 在sites \ all \ libraries \ aloha \ aloha \ plugins \ common \ format \ lib \ format-plugin.js添加到“默认按钮配置”中“配置”数组，类的名称，这样：

   配置：[“强”，“梅格”，“时间” ...]

3. 添加实施初始化样式按钮，在“initButtons”功能： 在开关（按钮）下，为新款式添加'case'：

   注意：'span'标签用于实施ordina具有中性标记的ry css类。

4. 定义类“span.meg”为独特风格： 加入你的CSS主文件（Drupal站点主题的CSS）中的“span.meg”类：

   span.meg { 
   color: green; } 
   

5. 刷新网站重建，并使用新的风格浮动ALOHA

示例代码

// Additional special styles 
case 'charm-meg': 
    that.multiSplitItems.push({ 
     'name' : button, 
     'tooltip' : i18n.t('button.' + button + '.tooltip'), 
     'iconClass' : 'aloha-button ' + i18n.t('aloha-button-' + button), 
     'markup' : jQuery('<span class=' + button + '></span>'), 
     'click' : function() { 
      var 
       markup = jQuery('<span class=' + button + '></span>'), 
       rangeObject = Aloha.Selection.rangeObject, 
       foundMarkup, 
       selectedCells = jQuery('.aloha-cell-selected'); 

      // formating workaround for table plugin 
      if (selectedCells.length > 0) { 
       var cellMarkupCounter = 0; 
       selectedCells.each(function() { 
        var cellContent = jQuery(this).find('div'), 
         cellMarkup = cellContent.find(button); 

        if (cellMarkup.length > 0) { 
         // unwrap all found markup text 
         // <td><b>text</b> foo <b>bar</b></td> 
         // and wrap the whole contents of the <td> into <b> tags 
         // <td><b>text foo bar</b></td> 
         cellMarkup.contents().unwrap(); 
         cellMarkupCounter++; 
        } 
        cellContent.contents().wrap('<span class=' + button + '></span>'); 
       }); 

       // remove all markup if all cells have markup 
       if (cellMarkupCounter == selectedCells.length) { 
        selectedCells.find(button).contents().unwrap(); 
       } 
       return false; 
      } 
      // formating workaround for table plugin 

      // check whether the markup is found in the range (at the start of the range) 
      foundMarkup = rangeObject.findMarkup(function() { 
       return this.nodeName.toLowerCase() == markup.get(0).nodeName.toLowerCase(); 
      }, Aloha.activeEditable.obj); 

      if (foundMarkup) { 
       // remove the markup 
       if (rangeObject.isCollapsed()) { 
        // when the range is collapsed, we remove exactly the one DOM element 
        GENTICS.Utils.Dom.removeFromDOM(foundMarkup, rangeObject, true); 
       } else { 
        // the range is not collapsed, so we remove the markup from the range 
        GENTICS.Utils.Dom.removeMarkup(rangeObject, markup, Aloha.activeEditable.obj); 
       } 
      } else { 
       // when the range is collapsed, extend it to a word 
       if (rangeObject.isCollapsed()) { 
        GENTICS.Utils.Dom.extendToWord(rangeObject); 
       } 

       // add the markup 
       GENTICS.Utils.Dom.addMarkup(rangeObject, markup); 
      } 
      // select the modified range 
      rangeObject.select(); 
      return false; 
     }, 
     'tooltip' : i18n.t('<span class=' + button + '></span>'), 
     'toggle' : true 
    }); 
    break;