TYPO3でrtehtmlareaボタンのサイズを変更する7.6

Question

rtehtmlareaに新しいButtonを追加しました。これで、アイコンの代わりにテキストが表示されます。新しいButtonの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

私は自分自身でこのクイックにお答えします。残念ながら、Buttonディメンションはクラスbtn-smによってハードコードされています。これを変更するには、RTE Button.jsモジュールを拡張する必要があります。私はこのような新しいrequireJSモジュールを追加することによって、これをしなかった：

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

JSモジュールはmy_ext /リソース/公共/ JavaScriptを/ HTMLArea /ツールバー/ TextButton.jsの下に配置する必要があります。

このファイルの内容は、一般的にTYPO3/SYSEXT/rtehtmlarea /リソース/公共/ JavaScriptを/ HTMLArea /ツールバー/ Button.js下コアボタンと同じですが、いくつかの違いがあります。

は、

：

は、次のように私たちのTextButton 1つの

変更レンダリング機能を有するコアボタンモジュールを上書きするrequireJSを言って、ファイルの先頭にdefine('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',['TYPO3/CMS/MyExt/HTMLArea/Toolbar/TextButton'],function (Plugin) {return Plugin;});を追加しました

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を追加し、私たちは与えられたテキストが存在しない場合、ボタンに追加したいので、ボタンのサイズが成長することができます。