Search code examples
javascripttypo3rte

Changing rtehtmlarea button dimensions in TYPO3 7.6

I've added a new Button to the rtehtmlarea and now I want to have it a text instead of an icon. I can set text via the following buttonConfiguration in my JavaScript Module for my new Button, but the button dimensions stay at the icons dimensions and do not wrap the text. So how can I do this?

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;
}

enter image description here

Solution

  • I'll answer this quick by myself. Unfortunately, the Button dimensions are hardcoded by the class btn-sm. To change this, one has to extend the RTE Button.js module. I did this by adding a new requireJS module like this:

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

    The JS module has to be located under my_ext/Resources/Public/JavaScript/HTMLArea/Toolbar/TextButton.js.

    The content of this file generally is identical to the cores Button under typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Toolbar/Button.js, but there are some differences:

    1. added define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',['TYPO3/CMS/MyExt/HTMLArea/Toolbar/TextButton'],function (Plugin) {return Plugin;}); to the very beginning of the file, telling requireJS to override the core Button module with our TextButton one
    2. change the render function to the following: 
    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();
},

    So instead of adding the class btn-sm to every button, we just want to add it to the button if there is no text given, so the button can grow in size.