在 TYPO3 7.6 中更改 rtehtmlarea 按钮尺寸

Question

我在 rtehtmlarea 中添加了一个新按钮，现在我想让它成为文本而不是图标。我可以通过 JavaScript 模块中的以下 buttonConfiguration 为我的新按钮设置文本，但按钮尺寸保持在图标尺寸并且不换行文本。那我该怎么做呢？

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

我会自己快速回答这个问题。不幸的是，按钮尺寸是由 class 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下的cores Button大体相同，但有一些区别：

将 define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',['TYPO3/CMS/MyExt/HTMLArea/Toolbar/TextButton'],function (Plugin) {return Plugin;}); 添加到文件的最开头，告诉 requireJS 用我们的 TextButton 一个覆盖核心 Button 模块
将渲染函数更改为以下内容：

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();
},

因此，我们不想将 class btn-sm 添加到每个按钮，如果没有给定文本，我们只想将它添加到按钮，这样按钮就可以变大。

在 TYPO3 7.6 中更改 rtehtmlarea 按钮尺寸

Changing rtehtmlarea button dimensions in TYPO3 7.6

javascript

typo3

rte