Skip to content
Contao Handbuch

TinyMCE Archiv

Contao 4.4

Section titled “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:

{{% notice warning %}} 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. {{% /notice %}}

Template be_tinyMCE anpassen

Section titled “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?

Section titled “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;
}

Eintrag in der Toolbar hinzufügen

Section titled “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

Section titled “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

Section titled “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

Section titled “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 3.x

Section titled “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).

PDF TinyMCE für Contao 3

Quellenangaben:

Section titled “Quellenangaben:”

Weitere nützliche Links: