Contao 4.5, TinyMCE richtig anpassen

Hallo,
für ein Projekt möchte ich den TinyMCE anpassen und habe mich dabei an dieser Anleitung orientiert:

Mein Template be_tinyMCE.html5 sieht so aus:

Code:

---

  //eigene formate start
    style_formats_merge: true,
                style_formats: [
                        {title: 'Test-Format', items: [
                    {title: 'Test Block 01', block: 'div', classes: 'test-block-class-01',  exact: true },
                ]}   
        ],
        //eigene formate stop
    content_css: [ '/files/theme/tinymce.css' ]

---

und in meiner tinymce.css steht:

Code:

---

.test-block-class-01 {
        font-size: 2rem;
}

---

Das Ganze sieht dann so aus: Anhang 20781 und zeigt mein Problem. Unter "Test-Format" wird die Option "Test Block 01" angezeigt und wie in der tinymce.css festgelegt formatiert. Allerdings wird zusätzlich die Klasse "test-block-class-01" im Editor unter Formate angezeigt, das möchte ich nicht. Wenn ich aber nun die Klasse .test-block-class-01 in der tinymce.css entferne, wird auch die Option "Test Block 01" unformatiert dargestellt, das möchte ich wiederum auch nicht, da die Art der Formatierung bereits visuell im Editor erkennbar sein soll. Anders ausgedrückt: Ein in der tinymce.css festgelegter Stil soll nur dem im Template festgelegten Blockelement zugewiesen werden können, nicht aber auch als Inline-Element.

Was ist hier das richtige Vorgehen, ich komme auch nach Studium der TinyMCE-Website nicht weiter. :o Danke für eure Tipps und Hinweise.

Nach weiterer Recherche habe ich meine Lösung hier gefunden, sie besteht darin, keine tinymce.css einzubinden, sondern die gewünschte Darstellung im Editor direkt in das Template zu schreiben:

Code:

---

style_formats_merge: true,
  style_formats: [
      {title: 'My Formats', items: [
          { title: 'Text Red', inline: 'span', styles: { 'color': '#d11216'}, classes: 'text-red' },
      ]}
  ]

---

In diesem Fall, die Anweisung mit der HEX-Farbe #d11216 darzustellen.

Hallo 3dr

danke Dir! Genau das hab ich gerade gesucht. Vielleicht magst Du noch dazu schreiben, wo genau Du das in der be_tinyMCE.html5 eingefügt hast und wie diese danach ausschaut (mit Beispiel), dann ist die Lösung für alle besser verständlich. Bei all den Klammern, Kommas und Semikolons .. ;)

Bester Gruss
Joerg

.. kann ich ja auch selber machen ;)

Ich hab in meinem Bsp. 3 classes hinzugefügt, um Links als "intern", "extern" oder als "download" zu formatieren.

Wichtig beim Einfügen: In der letzten Zeile davor ein Komma setzen ;)

Code:

---

<?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 | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code',  //hier kommt ein neues Komma hin!

        // added by jst - june2018
                style_formats_merge: true,
                style_formats: [
                  {title: 'Eigene Styles', items: [
                                { title: 'External link', selector: 'a', classes: 'external_link',  exact: true },
                            { title: 'Internal link', selector: 'a', classes: 'internal_link',  exact: true },
                          { title: 'Download link', selector: 'a', classes: 'download_link',  exact: true }
                        ]}   
                ]
        //end added by jst       
               
  });
}, 0);
       

       
</script>
<?php endif; ?>

---

Ich stand vor einer ähnlichen Aufgabe, habe jetzt aber eine Möglichkeit gefunden, die Anzeige der importierten Stile zu unterdrücken.

Meine Aufgabenstellung
Die für den TinyMCE definierten Formate sollen für andere Nutzer anpassbar in einem internen Stylesheet im Contao Backend zugänglich sein und trotzdem will ich die Kontrolle über die Anzeige im Menü und die Integration in den TinyMCE (z.B. Beschränkung der Zulässigkeit für HTML-Elemente). Eine reine Stil-Definition über die Anpassung der Editor-Konfiguration kam also nicht in Frage.

Meine Lösung
Alle Änderungen kommen in das be_tinyMCE.html5 Template.

Ich importiere zuerst aus einem der internen Stylesheets Formatierungen für den TinyMCE:

Code:

---

content_css: ['../assets/css/basic.css']

---

Durch den Import kann der Editor die Stile bei der Eingabe im Backend anzeigen.

Im Default werden jetzt die Stile wie von 3dr beschrieben unsortiert mit dem Stilnamen im Menü "Format" des TinyMCE aufgelistet. Unschön und für Redakteure schwer verständlich (die Stilnamen sind bei mir technisch/syntaktisch gewählt und nicht immer intuitiv verständlich).

Nach einigem Wühlen fand ich die TinyMCE Dokumentation für das Import CSS plugin. Nach einigen Tests unterdrücke ich jetzt mit dem importcss_selector_filter die automatische Menü-Integration der angezeigten Formate, indem ich einen Filter mit einem nicht-existierenden Präfix für die Stile angebe:

Code:

---

importcss_selector_filter: ".dummy-"

---

Dieser Filter importiert nur Stile mit dem Präfix ".dummy-" ins Menü. Die in der CSS-Datei verknüpften Stilel enthalten diesen Präfix nicht und werden somit nicht automatisch ins Menü integriert. Das verknüpfte CSS wird aber weiterhin zur Darstellung im Editor genutzt.

Die einzelnen zusätzlichen Stile für das Menü füge ich dann wie üblich mit dem folgenden Code ein und lege die Anwendbarkeit fest (für welche Tags die Zuweisung möglich ist ):

Code:

---

    style_formats_merge: true,
    style_formats: [
      {title: 'Eigene Stile', items: [
        { title: 'Text rot', inline: 'span', classes: 'red',  exact: false },
        {  ... },
        {  ... }
        ]}   
    ]

---

Für mich ist das einfacher, als die ganze Default-Struktur des Format-Menüs über style_formats_merge: false und dem Nachbau der ganzen style_formats-Deklarationen neu zu erstellen.
Falls es einen eleganteren Weg gibt, dann freue ich mich über Hinweise.