Contao 4.4 TinyMCE - Custom Style Formats doppelt

[Jayster]

Erdmann & Freunde haben eine sehr schöne Anleitung geschrieben, wie man in Contao 4 eigene Formate zum TinyMCE hinzufügt: https://erdmann-freunde.de/ressource...ao-4-anpassen/

Das funktioniert auch, mein einziges Problem ist, dass die Klassen, die ich in der CSS-Datei definiere, zusätzlich nochmal unter "Formate" auftauchen. D.h. ich habe nicht nur wie auf dem Screenshot zu sehen unter "Formate -> Theme Styles" meine Klassen mit den Titeln, die ich im Template definiert habe, sondern zudem noch unter "Formate" die Klassennamen automatisch aus der CSS-Datei eingefügt.

Kann man das ändern, sodass man die Klassen nur einmal hat, wie auf dem Screenshot von Erdmann & Freunde?

[Andreas]

Probier mal mein Template aus, ich denke dies ist praktischer http://public.andreasburg.de/tinyCustom.zip

Wenn du trotzdem noch eigene Formate darin definieren möchtest, dann kannst du in meinem Template die Funktion (Option) importcss_selector_converter dafür benutzen und sie anpassen.

...
// only use SPAN when necessary
importcss_selector_converter: function(selector) {
  // console.clear();
  // console.log(selector);
  if(selector.charAt(0) == '.') {
    return {title: selector.substr(1), inline: 'span', selector: '*', classes: selector.substr(1)};
  }
},
... 

Mit dieser Option kann man steuern, welche Klassen aus der tinymce.css genommen werden. Aktiviere die Consolen-Ausgabe und schau dir die Selektoren mit den Devtools an.

[Jayster]

Danke @Andreas. Das hat mir sehr weiter geholfen.

Ich habe folgenden Code verwendet:

importcss_selector_converter: function(selector) {
    return false;    
} 

[Andreas]

D.h. du holst jetzt gar keine Klassen mehr aus der tinymce.css und musst die aber trotzdem mit content_css laden, damit du diese Klassen und somit die Formatierung im BE hast? Hört sich ja kompliziert an. Zeig doch mal dein komplettes Template. Vielleicht geht da noch was.

[Jayster]

Ja, so wollte ich das auch. Definition im Template und Styling in der CSS Datei.

Hier ist mein Code (ich fürchte, die Einrückungen sind beim kopieren etwas durcheinander gekommen).

<?php

namespace Contao;

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

?>
<script>window.tinymce || document.write('<script src="<?= TL_ASSETS_URL ?>assets/tinymce4/js/tinymce.min.js">\x3C/script>')</script>
<script>
setTimeout(function() {
  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);
    },
    file_browser_callback_types: <?= json_encode($this->fileBrowserTypes) ?>,
    plugins: 'autosave charmap code fullscreen image importcss link lists paste searchreplace stripnbsp tabfocus table visualblocks',
    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 | bold italic | styleselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code',
    content_css: ['/files/themes/theme_one/css/tinymce.css'],
    importcss_selector_converter: function(selector) {
        return false;    
    },
    style_formats_merge: true,
    style_formats: [
        {title: 'Theme Styles', items: [
            {title: 'Link mit Pfeil rechts', selector: 'a', classes: 'link-arrow',  exact: true},
            {title: 'Text orange', inline: 'span', classes: 'orange',  exact: true},
            {title: 'Text großgeschrieben', inline: 'span', classes: 'uppercase',  exact: true}
   ]}    
]
  });
}, 0);
</script>
<?php endif; ?>

[Andreas]

Ok, was man noch machen könnte ist, diese Sachen oben definieren, dann die tinymce.css trotzdem einlesen und über importcss_selector_converter die Klassen unter Berücksichtigung der oberen Definition individuell behandeln.

...
<script>
var classObject = {
  'link-arrow': {
    title:    'Link mit Pfeil rechts',
    selector: 'a',
    exact:    true
  },
  'orange': {
    title:    'Text orange',
    inline:   'span',
    exact:    true
  },
  'uppercase': {
    title:    'Text großgeschrieben',
    inline:   'span',
    exact:    true
  }
}

setTimeout(function() {
... 

Irgendwo hier im Forum hatte ich sowas mal gemacht, damit man die Möglichkeit hat zwar die Klassen aus der tinymce.css auszulesen, aber der ein oder anderen Klasse dann einen aussagekräftigen Titel mitzugeben.

Im Hinterkopf habe ich auch noch irgendwas mit der tinymce.css, dass man direkt da drin die Gruppen definieren kann.

ps Bei der Einrückung hast du einen Mix aus Leerstellen und Tabs, deswegen.

[Jayster]

@Andreas: Danke, das ist auch eine schöne Idee.

[bejoro]

Ich habe kürzlich auf 4.4 umgestellt und es wie Jayster in die be_tinyMCE.html5 eingetragen (Kopie des Originals in templates).

Ich habe auch eine tinyMCE.css erstellt für den Backend und ein tinyMCE-Stylesheet im Theme für den Frontend und in den Seitenlayouts aktiviert.
Das funktioniert soweit.

Möchte man die Styles konsistent halten (Backend, Frontend), muss man aber immer an zwei Stellen ändern, tinyMCE.css und Theme-Stylesheet.

Ist das noch immer die Lösung, um im Editor/tinyMCE die Styles korrekt angezeigt zu bekommen, aber über das Stylesheet es später ändern zu können?

Könnte man z. B. das Theme-Stylesheet in der be_tinyMCE.html5 importieren, wäre es nur noch im Theme zu ändern.

Oder gäbe es mittlerweile eine elegantere Lösung?

[Andreas]

Hast du mal mein Template für Contao 4 ausprobiert? Ist oben verlinkt.

Du brauchst nur folgende Zeilen im Template um die Formate aus der CSS-Datei im FE dann im BE zur Auswahl zu haben. Also brauchst du nur eine Datei.

   // optional CSS file to import style class formats from (should be configurable somewhere, here for testing in files/css/tinymce.css)
   <?php
     $cssPath = Config::get('uploadPath') . '/css/tinymce.css';
     if(file_exists($cssPath)):
   ?>
   content_css: '<?= $cssPath . '?' . time() ?>',
   <?php endif; ?>

Probier mal mein Template, damit hast du dann auch einen sehr komfortablen Zugang zu den Klassen (Formaten) im BE.

[bejoro]

Hallo Andreas,

vielen Dank für den Tipp, das ist sehr nützlich. Verstehe ich das richtig, ich kann mir damit das Theme-Stylesheet sparen und nur die tinyMCE.css verwenden?

Du meinst den obigen Link von 2017 auf die ZIP-Datei tinyCustom.zip?

Ist das Template be_tinyMCE-c.4.4.7.html5 vom 18.10.2017 für die aktuelle Contao 4.4.18 korrekt und noch aktuell?

Ich werde beides ausprobieren und berichten.

[Andreas]

kann mir damit das Theme-Stylesheet sparen und nur die tinyMCE.css verwenden?

Ja, die letzte Änderung war in der 4.4.7 https://github.com/contao/core-bundl...e0ba38b7006a1e

Ja, du verstehst dies richtig. Lege irgendeine CSS-Datei bei dir in files/foo/ an (Ordner veröffentlichen). Die Datei muss nicht tinyMCE.css heißen, kann z.B. auch my-classes.css oder my-formats.css heißen. Sie darf nicht direkt in /files liegen,weil man den nicht veröffentlichen kann, nur die Unterordner.

Trage den Pfad dann in den Code ein, so wie bei mir "/css/tinymce.css" - also ohne "files".

TinyMCE lädt im BE eine oder mehrere CSS-Dateien für seinen Editor, sein Theme. Die Datei, welche du über den Code angibst wird dann im BE noch zusätzlich geladen und auch die Selektoren daraus eingelesen. Das Plugin importcss https://www.tinymce.com/docs/plugins/importcss/ erledigt dies, wenn eine oder mehrere Dateien mit content_css https://www.tinymce.com/docs/configu...e/#content_css angebeben werden. Diese Dateien greifen dann im BE nur in dem Editorfenster, dort wo man seinen Text einträgt. Wenn du sie dann im FE auch lädtst, dann hast du dieselben Regeln auch im FE und nur eine Datei im Einsatz.

[bejoro]

Vielen Dank, sehr gute Erklärung.

Dein Template ist eine sehr gute Idee, jedoch etwas gewöhnungsbedürftig wenn man so lange mit dem "normalen" Editor gearbeitet hat. Man müsste nur noch die über die tinymce.css importierten Styles gruppieren (importcss_groups), damit es übersichtlicher wird.

Das "paste_as_text: true" als Standardeinstellung ist genial, so kann man schnell Formate komplett entfernen. Ob mir das "kee_styles: false" auf Dauer gefällt, weiß ich noch nicht.

Könnte man für "kee_styles: false/true" einen eigenen Menüeintrag wie für "paste_as_text" über die be_tinyMCE.html5 anlegen?

Was ich völlig verdrängt hatte war, dass man externe CSS-Dateien aus dem Filesystem in das Seitenlayout einbinden könnte, auch die tinymce.css.

Es könnte aber auch Sinn machen, für den Editor eine abweichende Darstellung zu wählen. Hat man z.B. einen dunklen Hintergrund im Frontend, der Editor aber einen weißen Hintergrund, dann könnten manche Formate im Editor schwer lesbar werden.

Ich habe es jetzt so gelöst, angelehnt an Jaysters Lösung:

Erweiterung der be_tinyMCE.html5 (nach toolbar eingefügt, Komma am Ende von toolbar... nicht vergessen):

    toolbar: ...,
    
    paste_as_text: true, // activate 'paste as text' in menu bar as default
    
    // lade Styles der tinymce.css aber nur für den Backend - für Frontend eigenes Stylesheet im Theme angelegt
    content_css: ['/files/tinymce/tinymce.css'],
    importcss_selector_converter: function(selector) {
        return false;    
    },  
    
    style_formats_merge: true,
    style_formats: [
        {title: 'Eigene Formate', items: [
            { title: 'Text Warnung', inline: 'span', classes: 'tinymce-text-warnung',  exact: true },
            { title: 'Text Bestätigung', inline: 'span', classes: 'tinymce-text-bestaetigung',  exact: true },
            { title: 'Text Überschrift', inline: 'span', classes: 'tinymce-text-wie_ueberschr',  exact: true },
            { title: 'Text Hinweis', inline: 'span', classes: 'tinymce-text-hinweis',  exact: true },
        ]}    
    ] 

Das ermöglicht mir auf einfache Weise eine eigene Gruppe/Menüeintrag "Eigene Formate" im tinyMCE-Menü innerhalb von Formate.

Im separat erstellten Theme-Stylesheet "tinymce_styles" habe ich dann die oben definierten Klassen mit Inhalt gefüllt und dieses dann in den Seitenlayouts aktiviert.
Wie von Andreas vorgeschlagen, könnte man natürlich direkt die /files/tinymce/tinymce.css als externe CSS-Datei im Seitenlayout laden, dann hat man nur eine Stelle, an der man ändern muss.

Ich habe noch nicht entschieden, welche Lösung mir besser gefällt. Sollte ich etwas falsch verstanden oder einen Fehler gemacht haben, bitte Rückmeldung.

[Andreas]

Ob mir das "kee_styles: false" auf Dauer gefällt, weiß ich noch nicht.

Könnte man für "kee_styles: false/true" einen eigenen Menüeintrag wie für "paste_as_text" über die be_tinyMCE.html5 anlegen?

Na ja, wenn ich einen Paragraph habe und dem ne Klasse gebe und dann Enter drücke und ich möchte die gleiche Klasse nochmal in diesem 2. Absatz, dann habe ich meistens etwas falsch gemacht. Warum sollte ich mehrere Absätze hintereinander mit der gleichen Klasse erstellen wollen. Mal ne Klasse zu vergeben sollte ja die Ausnahme sein. Deswegen ist das default bei mir ausgeschaltet - also ein neuer Absatz ist immer ohne Klasse.

So was kann man im Menü anlegen, weiß aber auswendig, oder auf die Schnelle nicht wie. Muss man sich also einlesen.

Ich habe noch nicht entschieden, welche Lösung mir besser gefällt. Sollte ich etwas falsch verstanden oder einen Fehler gemacht haben, bitte Rückmeldung.

Solange es funktioniert, hast du wahrscheinlich nichts falsch gemacht. Jeder kann es sich ja so anpassen, wie er mag. Für mich wäre dies viel zu kompliziert und damit aufwändig. Bei mir ruft ein Kunde an und fragt "kann ich ne Klasse für dies und das haben", dann öffne ich die files/css/tinymce.css und trage sie ein - fertig.

Dass man sich an eine neue Anordnung gewöhnen muss ist erstmal klar. Aber dass man sich schonmal nicht durch Menüunterpunkte hangeln muss dürfte es einfach machen sich daran zu gewöhnen. Meine Kunden und ich sind sehr zufrieden damit. Hast du z.B. bemerkt, dass, wenn der Textcursor z.B. in einer H2 steht, du es oben sofort angezeigt bekommst? Das sind so Kleinigkeiten, die man nicht sofort sieht, aber die vieles einfacher machen.

Du kannst in der tinymce.css auch den Selektor .mce-content-body benutzen, diese Klasse steht im BE im BODY des Editors, aber nicht im FE. Allerdings habe ich festgestellt, dass die Vorschau der Formate da leider z.B. ein body.mce-content-body{background-color:black} mit in die Vorschau der Formate übernimmt, welche dort per JS inline-style dynamisch gesetzt werden.

[bejoro]

Vielen lieben Dank für Deine ausführliche Antwort und Deine Vorschläge.

Ich wollte keineswegs Dein Template "schlecht reden", es ist eine tolle Lösung, um den Editor komfortabler zu machen. Das waren nur die ersten Gedanken, die mir nach einem kurzen Test eingefallen sind. Ich werde es auf jeden Fall nochmal ausprobieren. Das mit der Anzeige des Formats habe ich übersehen, das klingt gut.

Das mit "keep_styles: false" habe ich auch übernommen, es gefiel mir doch ganz gut, nachdem ich ein wenig Content erstellt hatte.

Du hast natürlich recht, die von mir gewählte Lösung ist schon etwas kompliziert. Ich muss an drei Stellen etwas ändern (Template, tinymce.css, StyleSheet), wenn ich eine Klasse hinzufügen möchte. Ich arbeite jedoch nur für mich selbst, insofern kommt das nicht so oft vor. Ich habe alles mit Kommentaren gepflastert, damit ich auch nach längerer Zeit noch durchblicke. Trotzdem werde ich das nochmals überdenken. Wenn ich Dein Template einsetze, stellt sich die Menüsituation ohnehin wieder anders dar.

Das mit dem neuen Button/Menüeintrag z.B. für keep_styles wäre nicht so schwierig. Ich habe mir das einmal durchgelesen in der TinyMCE-Doku, mit Beispielen. Wenn ich da etwas mache, werde ich es hier veröffentlichen.

Deine Anmerkung zu .mce-body-content und den Hintergrund dazu habe ich leider überhaupt nicht verstanden, ich stecke nicht so tief drin (wie ich gerne würde). Trotzdem lieben Dank. Hängt das evtl. mit meiner Anmerkung zu einem möglicherweise dunklen FE-Hintergrund u. weißer Editor zusammen und der Lesbarkeit von eigenen Formaten? Das war eine rein hypothetische Situation, die evtl. einen Einsatz von getrennten Format-Definitionen für FE und BE/Editor rechtfertigen könnte.

[Andreas]

Ja, wenn man das alles nur für sich selber macht, dann kann man da immer wieder was neues ausprobieren und Spielereien einbauen, wie man eben lustig ist.

.mce-content-body: Setze in deine tinymce.css einfach mal

.mce-content-body {
  background-color: #333;
}

und schau dir dann die Vorschau der Formate im Dropdown im BE an, dann weißt du was ich meine.

Das Editor-Fenster ist in einem IFRAME, welcher ja einen eigenen BODY hat und der hat die Klasse mce-content-body. Kannst du mit den Devtools sehen.

[bejoro]

Ich habe es ausprobiert und verstehe nun, was Du meinst. Das ist natürlich ungünstig.

Nur eine kleine Korrektur: Die Klasse heißt .mce-content-body ( class="mce-content-body " )

<body id="tinymce" class="mce-content-body " data-id="ctrl_text" contenteditable="true">

Ich habe .mce-content-body in meine tinymce.css eingefügt, aber es hat nichts bewirkt.

Ich habe background-color dann temporär über die DevTools gesetzt, um zu sehen was Du meinst.

Es müsste dann schon ein komplett dunkles Theme für den tinyMCE geben, damit wieder alles stimmt.

[Andreas]

Ich hatte dies aus deinem Post #14 kopiert, habe es in meinen Posts jetzt korrigiert, in deinem ist es noch falsch.

Dann wird deine tinymce.css entweder dort nicht geladen, oder eine stärkere oder spätere Regel überschreibt dies wieder.

Allerdings, wenn dein Hintergrund im Mainbereich dunkel ist, dann werden natürlich auch die Regeln für die Klassen dementsprechend sein, sodass es dann wieder Sinn macht.