Изменение размеров кнопки rtehtmlarea в TYPO3 7.6

Я добавил новую кнопку в область rtehtml, и теперь я хочу, чтобы она была текстом, а не значком. Я могу установить текст с помощью следующей конфигурации кнопки в моем модуле JavaScript для моей новой кнопки, но размеры кнопки остаются на размерах значков и не переносят текст. Итак, как я могу это сделать?

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

введите здесь описание изображения


javascript typo3 rte
person Euli    schedule 06.09.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я быстро отвечу сам. К сожалению, размеры 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.

Содержимое этого файла в целом идентично основному элементу Button в разделе typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Toolbar/Button.js, но есть некоторые отличия:

  1. добавлено define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',['TYPO3/CMS/MyExt/HTMLArea/Toolbar/TextButton'],function (Plugin) {return Plugin;}); в самое начало файла, сообщая, что requireJS переопределяет основной модуль Button нашим модулем TextButton
  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 к каждой кнопке, мы просто хотим добавить его к кнопке, если нет заданного текста, чтобы кнопка могла увеличиваться в размерах.

person Euli    schedule 15.09.2016