在TYPO3 7.6中更改rtehtmlarea按鈕尺寸

Question

我在rtehtmlarea中添加了一個新的Button，現在我希望它具有文本而不是圖標。 我可以通過JavaScript模塊中的以下buttonConfiguration設置文本，以用於新的Button，但是按鈕尺寸保持在圖標尺寸上，並且不包裹文本。 那我該怎么做呢？

configurePlugin: function(editor){
  this.buttonsConfiguration = this.editorConfiguration.buttons;
  this.placeholderConfiguration = this.editorConfiguration.placeholders;
  /*
   * Registering plugin "About" informations
   */
  var pluginInformation = {
    ...
  };
  this.registerPluginInformation(pluginInformation);
  /*
   * Registering the buttons
   */
  var buttonList = this.placeholderConfiguration;
  if(buttonList !== undefined){
    for (var i = 0; i < buttonList.length; ++i) {
      var button = buttonList[i],
          buttonId = button.name;
      var buttonConfiguration = {
        id      : buttonId,
        tooltip     : button.label,
        text        : button.label,
        action      : 'onButtonPress',
        hotKey      : (button.hotkey ? button.hotkey : null),
        dimensions  : {
          // not working for the button, it stays at 24x24 px
          width: 600,
          height: 250
        }
      };
      this.registerButton(buttonConfiguration);
    }
  }
  return true;
}

Answer 1

我自己會很快回答。 不幸的是，Button尺寸由btn-sm類硬編碼。 要更改此設置，必須擴展RTE Button.js模塊。 我通過添加一個新的requireJS模塊來做到這一點，如下所示：

$this->pageRenderer->loadRequireJsModule('TYPO3/CMS/MyExt/HTMLArea/Toolbar/TextButton');

JS模塊必須位於my_ext / Resources / Public / JavaScript / HTMLArea / Toolbar / TextButton.js下 。

該文件的內容通常與typo3 / sysext / rtehtmlarea / Resources / Public / JavaScript / HTMLArea / Toolbar / Button.js下的核心Button相同，但有一些區別：

1. 添加了define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',['TYPO3/CMS/MyExt/HTMLArea/Toolbar/TextButton'],function (Plugin) {return Plugin;}); 到文件的開頭，告訴requireJS用我們的TextButton重寫核心Button模塊
2. 將渲染功能更改為以下內容：

render: function(container) {
  this.el = document.createElement('button');
  this.el.setAttribute('type', 'button');
  Dom.addClass(this.el, 'btn');
  Dom.addClass(this.el, 'btn-default');
  if (this.id) {
    this.el.setAttribute('id', this.id);
  }
  if (typeof this.cls === 'string') {
    Dom.addClass(this.el, this.cls);
  }
  if (typeof this.tooltip === 'string') {
    this.setTooltip(this.tooltip);
  }
  if (this.hidden) {
    Dom.setStyle(this.el, {
      display: 'none'
    });
  }
  container.appendChild(this.el);
  if (typeof this.text === 'string') {
    this.el.innerHTML = this.text;
  } else {
    this.el.innerHTML = '';
    Dom.addClass(this.el, 'btn-sm');
  }
  if (typeof this.iconCls === 'string') {
    var span = document.createElement('span');
    Dom.addClass(span, 'btn-icon');
    Dom.addClass(span, this.iconCls);
    this.el.appendChild(span);
  }
  this.initEventListeners();
},

因此，我們沒有將btn-sm類添加到每個按鈕，而是僅在未提供文本的情況下將其添加到按鈕，因此按鈕的大小可以增加。