Stile aus tinymce.css werden im TinyMCE nicht zur Auswahl angezeigt

[mario0511]

Moin zusammen,

ich habe das Template be_tinyMCE.html5 erstellt und versuche hier custom css Stile im TinyMCE auswählbar zu machen.

Das Template ist wie folgt angelegt:

<?php

namespace Contao;

if ($GLOBALS['TL_CONFIG']['useRTE']):

?>
<script>window.tinymce || document.write('<script src="<?= $this->asset('js/tinymce.min.js', 'contao-components/tinymce4') ?>">\x3C/script>')</script>
<script>
window.tinymce && tinymce.init({
  skin: 'contao',
  selector: '#<?= $this->selector ?>',
  language: '<?= Backend::getTinyMceLanguage() ?>',
  element_format: 'html',
  document_base_url: '<?= Environment::get('base') ?>',
  entities: '160,nbsp,60,lt,62,gt,173,shy',
  branding: false,
  setup: function(editor) {
    editor.getElement().removeAttribute('required');
  },
  init_instance_callback: function(editor) {
    if (document.activeElement && document.activeElement.id && document.activeElement.id == editor.id) {
      editor.editorManager.get(editor.id).focus();
    }
    editor.on('focus', function() { Backend.getScrollOffset(); });
  },
  file_browser_callback: function(field_name, url, type, win) {
    Backend.openModalBrowser(field_name, url, type, win, '<?= $this->source ?>');
  },
  file_browser_callback_types: <?= json_encode($this->fileBrowserTypes) ?>,
  content_css: [
      'system/themes/<?= Backend::getTheme() ?>/tinymce.min.css'
      <?php
          $customTinyCssFile = Config::get('uploadPath') . '/theme/css/tinymce.css';
          if(file_exists($customTinyCssFile)):
      ?>
      ,'<?= $customTinyCssFile . '?' . time() ?>'
      <?php endif; ?>
  ],
  plugins: 'autosave charmap code fullscreen image importcss link lists paste searchreplace stripnbsp tabfocus table visualblocks visualchars',
  browser_spellcheck: true,
  tabfocus_elements: ':prev,:next',
  importcss_append: true,
  extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption',
  menubar: 'file edit insert view format table',
  toolbar: 'link unlink | image table | formatselect | bold italic | bullist numlist | code',
  paste_as_text: true,
  importcss_selector_converter: function(selector) {
    return false;
  },
  style_formats_merge: true,
  style_formats: [
      {title: 'Theme Styles', items: [
          {title: 'Red Text - Inline Style', styles: {color: 'red'}}
      ]}
  ]
});
</script>
<?php endif; ?>

Die CSS-Datei ist wie folgt angelegt:

.stil1 { color: red; }
.stil2 { color: red; }
.stil3 { color: red; } 

Das Attribute importcss_selector_converter, style_formats und style_formats_merge habe ich nur testweise eingesetzt, in der Hoffnung das es was hilft.

Die custom css-Datei tinymce.css existiert und wird im Header des IFRAME geladen.

Ich verwende Contao 4.9.23 (LTS).

Keine Ahnung was ich falsch mache.
Danke für eure Hilfe.

[mario0511]

Nachtrag:

Die Stile werden in der Vorschau umgesetzt/angezeigt (color: red).

Nur die Auswahl (Dropdown o.ä.) steht nicht zur Verfüfung.

Ist es so das man jeden Stil händisch in der be_tinyMCE.html5 definieren muss? ...ging früher ja automatisch

[mario0511]

An alle die das Problem haben, das Stile aus der eigenen tinymce.css nicht zur Auswahl angezeigt werden.
Bei mir hing es wohl mit dem Leeren des "Prod.-Cache" zusammen. War mir beim Überfliegen der Dokumentation entgangen.
Siehe: https://docs.contao.org/manual/de/an...konfiguration/


Bezüglich dem Anzeigen eigener Stile im TinyMCE ist meine Erfahrung die, das es besser ist die Stile-Palette in der eigenen be_tinyMCE.html5 selbst zu definieren, da sich so die Anwendung der Stile/Formate genauer festlegen/eingrenzen lässt.

Bezugnehmend auf einen Beitrag hier im Forum, habe ich nachfolgend einige Ansätze zusammengefasst.

Die einfachste Variante ist die, wonach man eine eigene CSS-Datei mit den gewünschten Stilen im TinyMCE einbindet und die Anwendung der Stile, der Vordefinition des TinyMCE überlässt.

Alternativ kann man in der be_tinyMCE.html5 über importcss_selector_converter und/oder importcss_selector_filter die Anwendung der Stile aus der eigenen CSS-Datei weiter eingrenzen/filtern/definieren.

importcss_selector_converter: function(selector) {
  if(selector.charAt(0) == '.') {
    return {title: selector.substr(1), inline: 'span', selector: '*', classes: selector.substr(1), merge_siblings: true};
  }
} 

Anleitungen/Ansätze hierzu:
https://www.tiny.cloud/docs/plugins/...ctor_converter
https://www.tiny.cloud/docs-4x/plugi...ctor_converter
https://www.tiny.cloud/docs/configur...nt-formatting/


Am besten finde ich jedoch, die Stile in der be_tinyMCE.html5, unter Verwendung von style_formats: [...] und style_formats_merge: false selbst zu definieren und damit die Auswahl der angewandten Formate/Stile einzuschränken.
Hierdurch und durch das Ausblenden der Menü-Leiste (menubar: false) inkl. der ganzen built-in Formate, ist man bei der Eingabe im Tiny zwar relativ eingeschränkt, bleibt Stil-mäßig jedoch innerhalb der Vorgaben des Designs/Layouts.

Hier meine Beispiel be_tinyMCE.html5:

<?php

namespace Contao;

if ($GLOBALS['TL_CONFIG']['useRTE']):

// Use document.write() here in case TinyMCE is loaded in a subpalette (see #1424)
?>
<script>window.tinymce || document.write('<script src="<?= $this->asset('js/tinymce.min.js', 'contao-components/tinymce4') ?>">\x3C/script>')</script>
<script>
window.tinymce && tinymce.init({
  skin: 'contao',
  selector: '#<?= $this->selector ?>',
  language: '<?= Backend::getTinyMceLanguage() ?>',
  element_format: 'html',
  document_base_url: '<?= Environment::get('base') ?>',
  entities: '160,nbsp,60,lt,62,gt,173,shy',
  branding: false,
  setup: function(editor) {
    editor.getElement().removeAttribute('required');
  },
  init_instance_callback: function(editor) {
    if (document.activeElement && document.activeElement.id && document.activeElement.id == editor.id) {
      editor.editorManager.get(editor.id).focus();
    }
    editor.on('focus', function() { Backend.getScrollOffset(); });
  },
  file_browser_callback: function(field_name, url, type, win) {
    Backend.openModalBrowser(field_name, url, type, win, '<?= $this->source ?>');
  },
  file_browser_callback_types: <?= json_encode($this->fileBrowserTypes) ?>,
  content_css: [
    'system/themes/<?= Backend::getTheme() ?>/tinymce.min.css'
    <?php
        $customTinyCssFile = Config::get('uploadPath') . '/theme/css/tinymce.css';
        if(file_exists($customTinyCssFile)):
    ?>
    ,'<?= $customTinyCssFile . '?' . time() ?>'
    <?php endif; ?>
  ],
  plugins: 'autosave charmap code image importcss link lists paste searchreplace stripnbsp tabfocus table visualblocks visualchars',
  browser_spellcheck: true,
  tabfocus_elements: ':prev,:next',
  importcss_append: true,
  extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption',
  menubar: false,
  toolbar: 'link unlink | image table | bold | subscript superscript | bullist numlist | charmap | formatselect | styleselect | code',
  paste_as_text: true,
  importcss_selector_converter: function(selector) {
    return false;
  },
  style_formats_merge: false,
  style_formats: [
    {title: 'Stile', items: [
        {title: 'Stil 1', inline: 'span', selector: '*', classes: 'my-style-one', deep: true, merge_siblings: true},
        {title: 'Stil 2', inline: 'span', selector: '*', classes: 'my-style-two', deep: true, merge_siblings: true}
    ]},
    {title: 'Social-Media Icons', items: [
        {title: 'Instagram Icon', selector: 'a', classes: 'instagram'},
        {title: 'Facebook Icon', selector: 'a', classes: 'facebook'},
        {title: 'YouTube Icon', selector: 'a', classes: 'youtube'},
        {title: 'Xing Icon', selector: 'a', classes: 'xing'}
    ]}
  ]
});
</script>
<?php endif; ?>

Meine Beispiel tinymce.css (/files/theme/css/tinymce.css) mit Dummy-Stile für das Backend:

/*Feie Stile*/
.my-style-one { border: 1px dashed red; color: red; }
.my-style-two { border: 1px dashed blue; color: blue; }

/*Icon-Font Stile*/
.instagram { border: 1px dashed red; color: red; }
.facebook { border: 1px dashed red; color: red; }
.youtube { border: 1px dashed red; color: red; }
.xing { border: 1px dashed red; color: red; } 

Und der Vollständigkeit halber...
Die Stildefinitionen für das Frontend müssen analog dazu, in der Haupt-CSS-Datei (bspw. unter /files/theme/css/styles.css) angelegt sein.

Im Ergebnis sieht der Tiny dann so aus: tinymce-vorschau.jpg

Viel Erfolg.