Die TinyMCE Konfiguration in Contao für Redakteure anpassen

von Markus Schindler

Den TinyMCE für andere Schriftarten in Contao erweitern

Ich habe neulich für ein Kundenprojekt den TinyMCE um die Möglichkeit erweitert, das per CSS definierte Überschriften im Text bequem formatiert möglich sind. Dadurch hat der Redakteur im Tiny Editor nun die Möglichkeit lustig die H1-H6 Überschriften mit zwei WebFonts rein zu malen.

Was wird für die Erweiterung des TinyMCE benötigt?

Wenn vom Kunden die gewünschten Schriftarten, Farben und Schriftgrößen definiert sind kann man mit der Erweiterung vom Tiny anfangen.

Mein Tipp:
Legt euch in Contao eine Demo-Seite an, in der ihr die H1 – H6 und alle Farben oder sonstige Inhaltliche Elemente die zum Einsatz kommen anzeigt. Erst wenn die Abgenommen sind, macht es Sinn die Formatierungen auch im Editor einzubinden, sonst entstehen zu viele Schleifen.

 

Als erstes kopiert ihr euch die Standardkonfiguration des TinyMCE Editors, die in der Datei system/config/tinyMCE.php liegt, oder ihr verwendet gleich die hier verlinkte Vorlage von mir.

Im gleichen Verzeichnis legt ihr die Datei mit tinycustom.php ab.

Damit die neue und angepasste Konfiguration gezogen wird, müsst ihr noch in die DCA-Konfiguration in der Datei system/config/dcaconfig.php folgende Zeile eintragen.

// Die eigene RTE-Konfiguration für Text-Elemente verwenden
$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinycustom';

TinyMCE Editor Konfiguration

<?php
if ($GLOBALS['TL_CONFIG']['useRTE']):
    ?>
    <script>window.tinymce || document.write('<script src="<?php echo TL_ASSETS_URL; ?>assets/tinymce4/tinymce.gzip.js">\x3C/script>')</script>
    <script>
        window.tinymce && tinymce.init({
            skin: 'contao',
            selector: '#<?php echo $selector; ?>',
            language: '<?php echo Backend::getTinyMceLanguage(); ?>',
            element_format: 'html',
            document_base_url: '<?php echo Environment::get('base'); ?>',
            entities: '160,nbsp,60,lt,62,gt,173,shy',
            setup: function(editor) {
                editor.getElement().removeAttribute('required');
            },
            init_instance_callback: function(editor) {
                editor.on('focus', function(){ Backend.getScrollOffset(); });
            },
            file_browser_callback: function(field_name, url, type, win) {
                Backend.openModalBrowser(field_name, url, type, win);
            },
            templates: [
                <?php echo Backend::getTinyTemplates(); ?>
            ],
            plugins: 'autosave charmap code fullscreen image importcss link lists paste searchreplace tabfocus template visualblocks',
            browser_spellcheck: true,
            tabfocus_elements: ':prev,:next',
            extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption',
            menubar: 'file edit insert view format table',
            //menubar: false,
            body_class: "ce_text",
            paste_as_text: true,
            toolbar: 'styleselect | link unlink | image | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code',
            content_css: '<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH . '/' . Config::get('uploadPath'); ?>/tinymcecustom.css?' + new Date().getTime(),
            importcss_selector_converter: function(selector) {
                if(selector.charAt(0) == '.') {
                    return {title: selector.substr(1), inline: 'span', selector: '*', classes: selector.substr(1)};
                }
            },
            importcss_append: true,
            keep_styles: false,
            style_formats: [

                {title: 'H1 Relation', block: 'h1', attributes: { class: "relation-h1" }},
                {title: 'H1 Relation grün', block: 'h1', attributes: { class: "relation-h1 gruen-text" }},
                {title: 'H1 Relation weiss', block: 'h1', attributes: { class: "relation-h1 weiss-text" }},

                {title: 'H2 Relation', block: 'h2', attributes: { class: "relation-h2" }},
                {title: 'H2 Relation grün', block: 'h2', attributes: { class: "relation-h2 gruen-text" }},
                {title: 'H2 Relation weiss', block: 'h2', attributes: { class: "relation-h2 weiss-text" }},

                {title: 'H3 Relation', block: 'h3', attributes: { class: "relation-h3" }},
                {title: 'H3 Relation grün', block: 'h3', attributes: { class: "relation-h3 gruen-text" }},
                {title: 'H3 Relation weiss', block: 'h3', attributes: { class: "relation-h3 weiss-text" }},

                {title: 'H4 Relation', block: 'h4', attributes: { class: "relation-h4" }},
                {title: 'H4 Relation grün', block: 'h4', attributes: { class: "relation-h4 gruen-text" }},
                {title: 'H4 Relation weiss', block: 'h4', attributes: { class: "relation-h4 weiss-text" }},



                {title: 'H1 Gravitybook', block: 'h1', attributes: { class: "" }},
                {title: 'H1 Gravitybook grün', block: 'h1', attributes: { class: "gruen-text" }},
                {title: 'H1 Gravitybook weiss', block: 'h1', attributes: { class: "weiss-text" }},

                {title: 'H2 Gravitybook', block: 'h2', attributes: { class: "" }},
                {title: 'H2 Gravitybook grün', block: 'h2', attributes: { class: "gruen-text" }},
                {title: 'H2 Gravitybook weiss', block: 'h2', attributes: { class: "weiss-text" }},

                {title: 'H3 Gravitybook', block: 'h3', attributes: { class: "" }},
                {title: 'H3 Gravitybook grün', block: 'h3', attributes: { class: "gruen-text" }},
                {title: 'H3 Gravitybook weiss', block: 'h3', attributes: { class: "weiss-text" }},

                {title: 'H4 Gravitybook', block: 'h4', attributes: { class: "" }},
                {title: 'H4 Gravitybook grün', block: 'h4', attributes: { class: "gruen-text" }},
                {title: 'H4 Gravitybook weiss', block: 'h4', attributes: { class: "weiss-text" }},

                {title: "Fließtext", block: "p", attributes: { class: "" }}

            ],
            convert_urls: false
        });
    </script>
<?php endif; ?>

Was macht die angepasste TinyMCE Konfiguration?

Hier ein Beispiel wie ich für zwei Schriftarten und drei Farben dem Redakteur das lustige einfärben im Text ermögliche.

H1 Überschrift in grün (setzt die class "gruen-text")
H1 Überschrift in schwarz (setzt die class "schwarz-text")

Beide CSS classes für die H1 und co. werden in eurer Frontend CSS Datei und in der tinymcecustom.css die im Verzeichnis /files/ liegt definiert.

Damit die Schriften auch im Backend und im Editor erscheinen, ist es notwendig die Pfade zu euren Schriften auch in der tinymcecustom.css bis zum Ordner /files/ … zu hinterlegen.

Hier ein kleiner Auszug aus dem Kundenprojekt.

@font-face {
font-family: DER-FONT;
src: url('../files/PROJEKT-XYZ/themes/fonts/zzz-webfont.woff2') format('woff2'),
url('../files/ PROJEKT-XYZ /themes/fonts/zzz-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

h1.DER-FONT-h1,
h2.DER-FONT-h2,
h3.DER-FONT-h3,
h4.DER-FONT-h4
{
font-family: DER-FONT, sans-serif;
text-transform:inherit;
font-style: normal;
font-weight: 400;
}

/* Text-Farben */
.weiss-text{color:#ccc;}
.schwarz-text{color:#000;}
.gruen-text{color:#67B42A;}

Wenn ihr die gleiche Schriftart oder Schriftgröße im Tiny anzeigen möchtet, könnt ihr in der CSS noch dem body,p{} die gleichen Werte übergeben. Auch sehr nützlich ist das setzen einer CSS class im Body vom iFrame des TinyMCE Editor Contao. In der Konfiguration gibt es dafür den Parameter body_class: "ce_text".

So, jetzt hoffe ich, das eure Kunden nicht zu viele bunte Dinge im Editor verunstalten wollen / sollen, aber als Ansatz für andere Formatierungen im TinyMCE Editor, ist sicher ein guter Ansatz die Konfiguration anzupassen.

Viele Erfolg beim Anpassen vom TinyMCE für Contao

Zurück