TinyMCE

Quickstart
Neue Formatierung anlegen:
= Klasse im Stylesheet tinymce.scss definieren
= Klasse im Stylesheet _03_inline_and_text_content.scss definieren
= Bezeichnung im Template be_tinymce.html5 eintragen

Contao 4.4

In Contao 4 gibt es ein eigenes be_tinyMCE.html5-Template, in dem Anpassungen vorgenommen werden können.

Allerdings gibt es kein tinymce.css mehr unter /files: https://github.com/contao/core-bundle/blob/4.3.10/UPGRADE.md#tinymcecss-and-tiny_templates Man kann sich aber selbst eines anlegen:

Die tinymce.css muss in einen öffentlich erreichbaren Ordner gelegt werden - direkt unter /files geht also nicht mehr. Wenn vorhanden, ist sie in einem Theme-Ordner am besten aufgehoben (Sirius, Solo). Wenn nicht, einen Order /files/layout/css anlegen und dort parken. Das Template be_tinyMCE muss im Templates-Root liegen, nicht in einem (Theme-)Unterordner, da es sonst nicht geladen werden kann.

Template be_tinyMCE anpassen

Ein öffentliches Verzeichnis /files/theme/css anlegen, tinymce.css dort anlegen, im Seitenlayout einbinden und im Template den Pfad dazu angeben:

    importcss_groups: [{title: '<?= \Config::get('uploadPath'); ?>/theme/css/tinymce.css'}],
    content_css: '<?= TL_PATH . '/' . \Config::get('uploadPath'); ?>/theme/css/tinymce.css',
    
    ODER EINFACHER:
    
    importcss_groups: [{title: 'Eigene Formatvorlagen'}],
    content_css: ['/files/theme/css/tinymce.css'],

tinymce.css in Contao 4?

https://community.contao.org/de/showthread.php?66248-tinymce-css-in-Contao4

Und jetzt müssen wir nochmal unterscheiden!!!

  • Die tinymce.css wird nur im Seitenlayout eingebunden und nicht als content_css => das Stylesheet wird behandelt wie jedes andere Stylesheet auch!!! Die Klassen, die darin definiert sind, werden auf der Website entsprechend formatiert ausgegeben, wenn im Editorfenster ein Element mit der jeweiligen Klasse ausgezeichnet wird. Man kann aber nicht im Editor selbst die Klassen wählen, da kein Pfad zur content_css angegeben ist.
  • Das gilt dann aber auch für alle anderen Elemente! Wenn das Inhaltselement selbst die Klasse “warning” bekommt, aber ein Wort im Editor die Klasse “information” bekommt, wird der Text im Inhaltselement grün geschrieben, das Wort grau! Im Editorfenster selbst sind die Formatierungen nicht sichtbar!
  • Die tinymce.css wird nicht im Seitenlayout eingebunden, sondern nur als content_css => die Formatierungen werden nur im Backend angezeigt, nicht im Frontend!
  • Merke: content_css UND Seitenlayout!!!
  • Und drittens gibt’s noch die Formatierungen für das Editorfenster selbst - nicht die Anzeige der in den eigenen Styles vergebenen Klassen, sondern die Formatierung der Schriftart, Schriftgröße etc. für das Textfenster (die dürfen auch in der tinymce.css stehen):
body .mce-content-body p,
body .mce-content-body a,
body .mce-content-body li {
  font-size: 1rem;
}

SOLO & SIRIUS:
/scr/scss/tinymce.scss => ist eine scss-Datei, in der alle Variablen verwendet werden können. Diese wird mit gulp in /dist/css/tinymce.css umgewandelt, diese Datei ist ihrerseits im Seitenlayout eingebunden. Fazit: Formatierungen sind im Backend und im Frontend sichtbar.
Um die Formatierungen auch im Editor-Fenster sichtbar zu machen, muss der Pfad zur content.css im Template be_tinyMCE angegeben werden – das bezieht sich dann auf eben diese Datei: /dist/css/tinymce.css.

ACHTUNG: Unterscheidung zwischen style_formats und importcss_groups! Nochmal anschauen, was besser funktioniert …
? Eventuell zusätzliche Styles von importgroup.cssper css ausblenden?
? Oder dann doch die zusätzlichen Tiny-Styles in ein extra css auslagern? Müsste man dann zwar 2x warten, aber die Übersichtlichkeit wäre größer …
? projektweise entscheiden: importgroup.css oder Theme-Styles
? Lösung von Andreas Burg anschauen

Vorgangsweise in der lokalen SOLO-Installation mit mehreren Themes: Das Template be_tinyMCE.html5, in der der Pfad zur content_css eingetragen ist, ist für alle Themes gleich! D.h. in der Praxis, dass für jedes Theme (solo_sozialplattform, solo_artelavista, …) ein eigenes Template erstellt werden muss (mit dem Pfad zur jeweiligen content_css). Beim Arbeiten mit dem Theme muss das Template, das gerade in Arbeit ist, ohne Suffix abgespeichert werden. Zwischengeparkte Templates werden umbenannt in be_tinyMCE_sozialplattform, be_tinyMCE_artelavista etc.

Eintrag in der Toolbar hinzufügen

Eintrag im Forum

Um ein Select-Feld für Formate in der Toolbar hinzuzufügen, muss in der Zeile toolbar ein | styleselect ergänzt werden:

toolbar: 'link unlink | image | bold italic | styleselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code'

Dieser Eintrag bewirkt erst einmal nur das:

Bild

Eigene Formatierungen (Klassen) definieren

Z.B. soll einem eine zusätzliche Klasse .text--attention vergeben werden. Hier das Code-Snippet im Kontext (Kommas etc. beachten!)

Bild

style_format_merge: bestehende Formatierungen werden nicht überschrieben, sondern ergänzt
style_formats: legt einen neuen Bereich “Theme Styles” an, das ein Listen-Element “Text Attention” beinhaltet. Dieses ist nur auf <p> anwendbar und vergibt diesen die Klasse .text--attention.
exact: true bewirkt, dass andere Klassen entfernt werden, damit es keine Konflikte gibt.

Bild

Das schlägt sich aber offenbar mit den oben eingefügten Klassen! Siehe auch hier: klick Und hier: klick

Codemirror einfügen

  • Ordner codemirror (Desktop\Contao-Ablage\03_TinyMCE\codemirror) nach /assets/tinymce4/js/plugins kopieren, das Plugin wird aktiviert, indem man es unter “plugins” einfügt:
  • plugins: 'autosave charmap code codemirror fullscreen image importcss link lists paste searchreplace
    stripnbsp tabfocus table visualblocks',
  • unterhalb von z.B. toolbar folgenden Code ergänzen (und auf die Kommas davor und danach achten):
,
    codemirror: {
    indentOnInit: false,    // Whether or not to indent code on init.
      path: 'codemirror-5.2', // Path to CodeMirror distribution
      config: {               // CodeMirror config object
         mode: 'htmlmixed',
         lineNumbers: true,
         foldGutter: true
      }
    }
  });
}, 0);

TinyTemplate einbinden

  • Ordner tiny_templates muss unter /files liegen (Ordnerfreigabe nicht vergessen!)
  • templates: [<?php echo Backend::getTinyTemplates(); ?>], in der be_tinyMCE ergänzen (oberhalb von plugins)
  • template bei den plugins ergänzen (es heißt template, nicht templates!!!)

Contao 4.5

Ab Contao 4.5 ändert sich der Link zur tinymce.min.js. Falls be_tinyMCE-Templates aus Contao 4.4. übernommen werden, muss wahrscheinlich der Link angepasst werden:

Bild

Contao 3.x

Das PDF enthält auch eine Anleitung, um den TinyMCE für verschiedene Nutzergruppen anzupassen (wobei das in Contao 4 wieder anders läuft).

  • tinymce_contaodrei.pdf (697 KB)

    • Quellenangaben:

    Weitere nützliche Links: