Contao-Camp 2024
Ergebnis 1 bis 5 von 5

Thema: Contao 4.5, TinyMCE richtig anpassen

  1. #1
    Contao-Fan
    Registriert seit
    05.05.2011.
    Beiträge
    860

    Standard 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: tinymce01.png 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. Danke für eure Tipps und Hinweise.
    Geändert von 3dr (16.04.2018 um 22:04 Uhr)

  2. #2
    Contao-Fan
    Registriert seit
    05.05.2011.
    Beiträge
    860

    Standard

    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.
    Geändert von 3dr (17.04.2018 um 12:14 Uhr)

  3. #3
    Contao-Nutzer
    Registriert seit
    17.06.2010.
    Beiträge
    52

    Standard

    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

  4. #4
    Contao-Nutzer
    Registriert seit
    17.06.2010.
    Beiträge
    52

    Standard

    .. 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; ?>

  5. #5
    Contao-Nutzer
    Registriert seit
    28.03.2010.
    Ort
    Tübingen
    Beiträge
    114

    Standard meine Lösung

    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.
    Geändert von Stepinsky (08.08.2019 um 13:15 Uhr) Grund: Rechtschreibung, Text verständlicher gemacht

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •