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:
Anhang 18471

Kann ich das irgendwie unterbinden?

Gruß Michael

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.

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.

Hallo,

klappt leider nicht ... :-(

Gruß Michael

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.

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

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

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 {title: translate[selector.substr(1)] || selector.substr(1), inline: 'span', selector: '*', classes: selector.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 {
  color: tomato;
}
.italic {
  font-style: italic;
}
.big {
  font-size: 1.5em;
}
.bigger {
  font-size: 2em;
} 


---

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.

Hallo Andreas,

mit der Translate-Geschichte funktioniert es einwandfrei!

Zitat:

---

Zitat von Andreas

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 {title: translate[selector.substr(1)] || selector.substr(1), inline: 'span', selector: '*', classes: selector.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

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

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

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 {
  color: blue;
} 


---

@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.