Contao-Camp 2024
Ergebnis 1 bis 13 von 13

Thema: tinyCustom und eigene Formate im Editor

  1. #1
    Contao-Nutzer
    Registriert seit
    25.09.2010.
    Ort
    Dortmund
    Beiträge
    166

    Standard tinyCustom und eigene Formate im Editor

    Hallo,

    ich habe folgende tinyCustom.php für die Redaktion angelegt:
    PHP-Code:
    <?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: 'none',
      paste_as_text: true,
      toolbar: 'formatselect | styleselect | removeformat | bold italic | link unlink | bullist numlist | undo redo | aligncenter alignright alignjustify | code',
      content_css: '<?php echo TL_PATH?>/system/themes/tinymce.css,<?php echo TL_PATH '/' Config::get('uploadPath'); ?>/tinymce.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: 'Text grün', inline: 'span', classes: 'green_normal'},
          {title: 'Text grün, groß', inline: 'span', classes: 'green_big'},
          {title: 'Text grün, sehr groß', inline: 'span', classes: 'green_bigger'},
          {title: 'Text grün, kursiv', inline: 'span', classes: 'italic-green_normal'},
          {title: 'Text grün, kursiv, groß', inline: 'span', classes: 'italic-green_big'},
          {title: 'Text grün, kursiv, sehr groß', inline: 'span', classes: 'italic-green_bigger'}
      ],
      block_formats:
        'H1 Haupttitel=h1;' +
        'H2 Untertitel 1=h2;' +
        'H3 Untertitel 2=h3;' +
        'H4 Untertitel 3=h4;' +
        'H5 Untertitel 4=h5;' +
        'H6 Untertitel 5=h6;' +
        'Paragraph=p;',
        convert_urls: false
    });
    </script>
    <?php endif; ?>
    Die tinymce.css ist auch mit den entsprechenden Styles für die angelegten Klassen (.green_normal, .green_big usw.) gefüllt, damit der Redakteur auch seine Formatierungen im Editor sieht.

    Jetzt ist es aber so das mir im Drop-Down "Formate" des TinyMCE nicht nur meine definierten Style-Formate aus der tinyCustom.php angezeigt werden, sondern auch die CSS-Klassen aus der tinymce.css.

    Das sieht dann so aus:
    tinymce.jpg

    Kann ich das irgendwie unterbinden?

    Gruß Michael

  2. #2
    Contao-Fan Avatar von mandrake
    Registriert seit
    19.06.2009.
    Ort
    Düsseldorf
    Beiträge
    461

    Standard

    Dieses Phänomen hatte ich kürzlich auch in einer Installation (3.5.15). Konnte die Ursache nicht ermitteln. Bin daher ebenfalls für Tipps dankbar, welche das Problem lösen.

  3. #3
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Wenn ich es richtig interpretiere, wird mit "importcss_selector_converter" die tinymce.css geparst und erstellt. Probier mal den gesamten Block auszukommentieren:
    Code:
    //  importcss_selector_converter: function(selector) {
    //    if(selector.charAt(0) == '.') {
    //      return {title: selector.substr(1), inline: 'span', selector: '*', classes: selector.substr(1)};
    //    }
    //  },
    Ist nur eine Vermutung. Nicht getestet.

  4. #4
    Contao-Nutzer
    Registriert seit
    25.09.2010.
    Ort
    Dortmund
    Beiträge
    166

    Standard

    Hallo,

    klappt leider nicht ... :-(

    Gruß Michael

  5. #5
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Sieht so aus, als wären das Teile aus meiner tinyCustom http://public.andreasburg.de/tinyCustom.zip.

    Versuche mal bei content_css diesen Teil hier zu entfernen
    PHP-Code:
    ,<?php echo TL_PATH '/' Config::get('uploadPath'); ?>/tinymce.css?' + new Date().getTime()
    Soweit ich mich erinnern kann war dieses importcss_selector_converter ziemlich schwierig aufzusetzen, es sorgt für mehr Komfort bei der Auswahl der Formate - z.B. Klassen nur in einen SPAN setzen, wenn nötig, sonst die Klasse direkt z.B. in den Paragraph. Wenn du keine tinymce.css dort parsen möchtest, dann brauchst du diesen Teil wahrscheinlich auch nicht mehr.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  6. #6
    Contao-Nutzer
    Registriert seit
    25.09.2010.
    Ort
    Dortmund
    Beiträge
    166

    Standard

    Hallo Andreas,

    ja das stimmt, da habe ich bei dir ein wenig "geräubert" :-)
    Danke für deine Bereitstellung!

    Klappt aber leider auch nicht, wenn ich die Zeile entferne werden mir die Formatierungen im Text des Editors nicht mehr angezeigt.

    Wenn es dazu keine Lösung gibt dann entferne ich die Style-Formate in der tinyCustom.php und lasse nur die Formate aus der tinymce.css anzeigen.
    (Was natürlich schade ist, denn für den Redakteur sind die angezeigten Style-Formate aus der tinyCustom.php verständlicher)

    Gruß Michael

  7. #7
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Nicht diese Zeile, nur den Teil, den ich dir da gezeigt habe. Der Wert von content_css ist eine kommagetrennte Aufzählung von mehreren Dateien, die erstere brauchst du natürlich. Siehe auch https://www.tinymce.com/docs/configu...e/#content_css
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  8. #8
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Du kannst aber auch mal versuchen das importcss_append auf false zu setzen https://www.tinymce.com/docs/plugins/importcss/

    Oder noch besser, benutze eine Übersetzungstabelle und benutze dann doch wieder das importcss_selector_converter
    PHP-Code:
    ...
    <
    script>
    setTimeout(function() { // das fehlt noch bei dir, ist in der aktuellen tinyMCE.php vom Core mit drin
      
    var translate = {
        
    green_normal         'Text grün',
        
    green_big            'Text grün, groß',
        
    green_bigger         'Text grün, sehr groß',
        
    'italic-green_normal''Text grün, kursiv',
        
    'italic-green_big'   'Text grün, kursiv, groß',
        
    'italic-green_bigger''Text grün, kursiv, sehr groß'
      
    };
      
    window.tinymce && tinymce.init({
        
    skin'contao',
    ...
        
    importcss_selector_converter: function(selector) {
          if(
    selector.charAt(0) == '.') {
            return {
    titletranslate[selector.substr(1)] || selector.substr(1), inline'span'selector'*'classesselector.substr(1)};
          }
        },
    ... 
    Übrigens ist so eine Klassenauswahl, die du da zeigst nicht gut. Abesehen davon, dass du mehrere Eigenschaften kombinierst, welche du auch einzeln anbieten könntest:
    PHP-Code:
    var translate = {
      
    color_1'Farbe 1',
      
    italic:  'kursiv',
      
    big:     'groß',
      
    bigger:  'sehr groß'
    }; 
    PHP-Code:
    /* CSS */
    .color_1 {
      
    colortomato;
    }
    .
    italic {
      
    font-styleitalic;
    }
    .
    big {
      
    font-size1.5em;
    }
    .
    bigger {
      
    font-size2em;

    Im Klassennamen sollten keine Eigenschaften genannt werden, sondern die Bedeutung der Formatierung. Z.B. important, help, highlight, subtext... Mal angenommen der Kunde möchte bestimmte Wörter rot hervorheben und du machst die Klasse
    Code:
    .red {color: red;}
    Jetzt findet der Kunde das aber doch besser in blau. Also musst du in deine CSS gehen und das ändern
    Code:
    .red {color: blue;}
    Sieht doof aus, ne?
    Code:
    .special {color: green;}
    Das hingegen kannst du verändern wie du möchtest und sogar noch andere Eigenschaften hinzufügen.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  9. #9
    Contao-Nutzer
    Registriert seit
    25.09.2010.
    Ort
    Dortmund
    Beiträge
    166

    Standard

    Hallo Andreas,

    mit der Translate-Geschichte funktioniert es einwandfrei!

    Zitat Zitat von Andreas Beitrag anzeigen
    Oder noch besser, benutze eine Übersetzungstabelle und benutze dann doch wieder das importcss_selector_converter
    PHP-Code:
    ...
    <
    script>
    setTimeout(function() { // das fehlt noch bei dir, ist in der aktuellen tinyMCE.php vom Core mit drin
      
    var translate = {
        
    'green_normal'       'Text grün',
        
    'green_big'          'Text grün, groß',
        
    'green_bigger'       'Text grün, sehr groß',
        
    'italic-green_normal''Text grün, kursiv',
        
    'italic-green_big'   'Text grün, kursiv, groß',
        
    'italic-green_bigger''Text grün, kursiv, sehr groß'
      
    };
      
    window.tinymce && tinymce.init({
        
    skin'contao',
    ...
        
    importcss_selector_converter: function(selector) {
          if(
    selector.charAt(0) == '.') {
            return {
    titletranslate[selector.substr(1)] || selector.substr(1), inline'span'selector'*'classesselector.substr(1)};
          }
        },
    ... 
    Mit der Benennung der Klassen hast du natürlich vollkommen recht, das war jetzt auch nur für den Test auf die Schnelle gewählt.

    Danke für deine Hilfe!

    Gruß Michael

  10. #10
    Contao-Nutzer Avatar von mschindler
    Registriert seit
    25.08.2011.
    Ort
    Bad Feilnbach
    Beiträge
    191
    Partner-ID
    7698

    Standard

    Hallo zusammen,
    ich habe die Vorlage für ein Kundenprojekt verwendet, in dem der Redakteur im Tiny die Möglichkeit erhält lustig die H1-H6 Überschriften mit zwei WebFonts rein zu malen.
    Was mir allerdings jetzt aufgefallen ist, das wenn man die Lösung über das anfügen von CSS classes löst, das die bei einem Wechsel auf eine andere Formatierung noch drinnen bleiben.

    Z.B.
    H1 Überschrift in grün (setzt die class "gruen-text") > Wechsel auf > H1 Überschrift in rot (hat die class "gruen-text rot-text") und hat somit dann beide CSS classes an der H1.

    Hier suche ich noch nach einer Lösung, wie ich bei einem Wechsel die gesetzte class erst lösche und dann neu setze.

    Hat dazu jemand schon eine Lösung oder kann mir sagen, ob wie man das im tinycustom.php erweitern kann.

    Viele Grüße und schon mal danke für die Tipps

    Markus
    Contao Partner aus Rosenheim und München
    codesache.de
    ---
    Mitglied der Contao Community Bayern
    Aktuelle Termine zur Contao Community Bayern: contao-bayern.de

  11. #11
    Contao-Nutzer Avatar von mschindler
    Registriert seit
    25.08.2011.
    Ort
    Bad Feilnbach
    Beiträge
    191
    Partner-ID
    7698

    Standard

    Hallo zusammen,
    ich habe eben denke ich die Lösung dafür gefunden. Bei mir funktioniert es mit attributes die class zu tauschen.

    PHP-Code:
    {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" }}, 

    Hat jemand eine bessere Lösung oder noch einen Tipp!?

    Viele Grüße

    Markus
    Contao Partner aus Rosenheim und München
    codesache.de
    ---
    Mitglied der Contao Community Bayern
    Aktuelle Termine zur Contao Community Bayern: contao-bayern.de

  12. #12
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hast du meine tinyCustom.php im Einsatz? Wenn ja, dann ist rechts neben dem Formatselect ein Button zum Löschen der Klassen. Die gewählten Klassen werden auch beide im Dropdown markiert und können einzeln abgewählt werden.

    Grundssätzlich ist es nicht gut, seine Klassen nach dem Aussehen zu benennen, sondern nach ihrem Einsatzzweck. Was ist, wenn der Kunde mal kommt und sagt er möchte das was in Rot ist jetzt in Blau haben, dann steht da ne Klasse die so aussieht.
    PHP-Code:
    .rot {
      
    colorblue;

    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  13. #13
    Contao-Nutzer Avatar von mschindler
    Registriert seit
    25.08.2011.
    Ort
    Bad Feilnbach
    Beiträge
    191
    Partner-ID
    7698

    Standard

    @Andreas
    Ja ich habe Teile von deiner tinyCustom übernommen und an meine angepasst.

    Den Button removeformat neben die Formatierungen zu platzieren ist eine gute Idee um die gemalten Formatierungen wieder los zu werden.

    In dem Projekt gibt es aktuell nicht mehr CI Farben, deshalb habe ich die Einfärbungen so übernommen.
    Contao Partner aus Rosenheim und München
    codesache.de
    ---
    Mitglied der Contao Community Bayern
    Aktuelle Termine zur Contao Community Bayern: contao-bayern.de

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
  •