Eigene Konfiguration für TinyMCE

**Ignatz** · 19.10.2016, 13:06

Hallo,

ich habe eine Bitte: Vor geraumer Zeit habe ich in diesem Forum einen Thread gefunden, in dem verschiedene User ihre Konfiguration für den neuen TinyMCE gepostet hatten. Also Anpassungen für Redakteure, um überflüssiges zu entfernen und fehlendes Nachzurüsten. Diesen Thread finde ich trotz intensiver Suche nicht mehr wieder. Ich verwende Contao 4.2.4 und den darin enthaltenen TinyMCE.

Leider bleiben auch nach dem Durchforsten der TinyMCE Dokumentation noch Fragen offen.
So möchte ich z. B. aus dem Menü „Format“ das Untermenü -> „Formate -> Ausrichtung“ komplett entfernen. Die Punkte aus der Menubar zu entfernen, war noch einfach.

Also, wer eine erprobte schlanke TinyMCE-Konfiguration hat, bitte posten.

Vielen Dank,
Ignatz

**Andreas** · 19.10.2016, 17:10

Hier ist meine tinyCustom http://public.andreasburg.de/tinyCustom.zip Nicht vergessen die tinymce.css von files/ nach files/css/ zu verschieben, oder anpassen.

Ist aber für Contao 3. Probier einfach mal aus. Teste auch das Einbringen von CSS-Klassen über Formate, da habe ich lange dran arbeiten müssen, bis das so komfortabel war, deswegen auch der teilweise kompliziert aussehende Code. Wenn's geht wird damit jetzt auf ein extra SPAN beim Einfügen einer Klasse verzichtet und du hast auch einen Indikator, welcher dir zeigt, welche Klasse/n auf ein Element bereits aufgesetzt sind.

Hier nochmal das Aufsetzen über die dcaconfig.php

PHP-Code:


/** use tinyCustom for all textareas that use tinyMCE */

if(is_file(TL_ROOT.'/system/config/tinyCustom.php'))

{

  array_walk_recursive($GLOBALS['TL_DCA'], function(&$v, $k){

    if($k === 'rte' && $v === 'tinyMCE')

    {

      $v = 'tinyCustom';

    }

  });

}

/** */

Ansonsten gibt es auch noch das hier https://github.com/cliffparnitzky/TinyMcePluginLoader

**Ignatz** · 20.10.2016, 08:09

Hallo Andreas,

irgendwo war ich über deine tinyCustom schon mal gestolpert, aber der erste Versuch war misslungen. Jetzt hat es aber funktioniert! Vielen Dank dafür.
Deine Konfiguration ist nicht ohne. Kein Wunder, dass ich das nicht selbst hinbekommen habe.

Contao 4 macht es um einiges leichter, da für individuelle tinyMCE-Konfigurationen ein updatesicheres „be_tinyMCE.html5“-Template zur Verfügung steht. Den Code in der dcaconfig.php konnte ich mir also sparen.

**MacPix** · 30.12.2016, 19:48

Die Datei in Templaes angepasst in Contao 4. Es geht leider nicht keine Änderung. Muss man noch was machen?

**MacPix** · 31.12.2016, 15:57

Zitat von Ignatz

Hallo Andreas,

irgendwo war ich über deine tinyCustom schon mal gestolpert, aber der erste Versuch war misslungen. Jetzt hat es aber funktioniert! Vielen Dank dafür.
Deine Konfiguration ist nicht ohne. Kein Wunder, dass ich das nicht selbst hinbekommen habe.

Contao 4 macht es um einiges leichter, da für individuelle tinyMCE-Konfigurationen ein updatesicheres „be_tinyMCE.html5“-Template zur Verfügung steht. Den Code in der dcaconfig.php konnte ich mir also sparen.

Hast du es in Contao 4 mal gemacht? Bei mir funtioniert das nicht nur mit dem Template anpassung. Ihrgendwie greift es nicht auf das template

**Andreas** · 31.12.2016, 17:02

Ich habe das in Contao 4 noch nicht probiert. Vielleicht @Ignatz. Checke mal, ob das Template überhaupt genommen wird.

**MacPix** · 31.12.2016, 18:08

Zitat von Andreas

Ich habe das in Contao 4 noch nicht probiert. Vielleicht @Ignatz. Checke mal, ob das Template überhaupt genommen wird.

Eigentlich kommt der hinweis dass dies dann das Original überschreibt. Aber wie du sagt, vermute ich auch dass es nicht genommen wird.
Wiso aber?
Wo sehe ich das?

**Hanski** · 31.12.2016, 19:31

Zitat von MacPix

Wo sehe ich das?

Du könntest in deinem angepassten Template z.B. bei toolbar einen Eintrag entfernen (z.B. bold) und dann im RTE schauen, ob das zugehörige Icon noch da ist oder nicht.

**MacPix** · 31.12.2016, 19:57

Zitat von Hanski

Du könntest in deinem angepassten Template z.B. bei toolbar einen Eintrag entfernen (z.B. bold) und dann im RTE schauen, ob das zugehörige Icon noch da ist oder nicht.

Das hab ich gemacht und es ist immer noch gleich.
Ich denke man müsste ja nichts weiteres machen als am Template ändern bei Contao 4.
Leider gehts bei mir nicht.

**Andreas** · 31.12.2016, 20:05

Vielleicht hast du noch diesen Eintrag in der dcaconfig. Zum Testen ob genommen wird z.B. das Template leeren oder hello world reinschreiben.

**MacPix** · 01.01.2017, 00:43

Jetzt gehts.

Also man muss es anscheinend das Template auf oberste Ebene speichern. Ich hatte es im Unterordner und das geht nicht.

Wäre aber auch gut wenn es im Unterordner gehen würde.

**sabine0303** · 18.10.2017, 15:06

Zitat von MacPix

Jetzt gehts.

Also man muss es anscheinend das Template auf oberste Ebene speichern. Ich hatte es im Unterordner und das geht nicht.

Wäre aber auch gut wenn es im Unterordner gehen würde.

Hi MacPix,
ich versuche gerade in 4.4 tinymce anzupassen. Ich möchte drei Farben über Klassen meiner Kundin zur Verfügung stellen.
Die be_tinyMCE.html5 habe ich gefunden und genommen wird sie auch. Wenn ich da was entferne ist es weg (bold z.B.).
Der Rest erscheint mir allerdings ein Buch mit sieben Siegeln.Eine tinymce.css habe ich auch angelegt, aber was genau soll da rein?
Könntest Du Deinen Weg zum Erfolg für mich skizzieren?

Grüße, Sabine

**Andreas** · 18.10.2017, 18:00

Hallo Sabine,

in meiner ZIP http://public.andreasburg.de/tinyCustom.zip ist jetzt auch ein Template für 4.4.7 drin. Versuch dies mal, das ist sowieso besser als das aus dem Core. Deine tinmymce.css muss dann in files/css/tinymce.css liegen. Wenn du dies anpassen möchtest, dann such nach dem Block, welcher hiermit anfängt

PHP-Code:


// optional CSS file ...

**sabine0303** · 19.10.2017, 07:29

Zitat von Andreas

Hallo Sabine,

in meiner ZIP http://public.andreasburg.de/tinyCustom.zip ist jetzt auch ein Template für 4.4.7 drin. Versuch dies mal, das ist sowieso besser als das aus dem Core. Deine tinmymce.css muss dann in files/css/tinymce.css liegen. Wenn du dies anpassen möchtest, dann such nach dem Block, welcher hiermit anfängt

PHP-Code:


// optional CSS file ...

Hallo Andreas,
vielen Dank. Wenn ich Deine Datei über die Templates einbinde ändert sich der Editor. Das ist super.
Nun möchte ich noch eigene Felder hinzufügen. Das habe ich so probiert:
,
{title: 'Farben', items: [
{title: 'Kfg', icon: ' ', format: 'kfg'},

]}

der Button erscheint auch an gewünschter Stelle, aber leider funktioniert er nicht. Was muss ich tun?

Die tinymce.css hab ich unter files/css/ gespeichert.
Inhalt simple css Angabe zu .kfg

Bei der Suche nach Lösungen hab ich dies gefunden, muss das irgendwo noch hin?

tinymce.init({

style_formats: [
{title: 'Kfg', inline: 'kfg', styles: {color: '#ff3300'}}

],
style_formats_merge: true
});

Freu mich über Hilfe, mir schwirrt der Kopf,

Grüße, Sabine

**Andreas** · 19.10.2017, 12:54

Verstehe nicht ganz, was du möchtest. kfg ist doch kein HTML-Tag, oder ist mir da was entgangen?

Evtl. kann dir die Doku da weiterhelfen. https://www.tinymce.com/docs/configu...nt-formatting/. Dort auch der Unterpunkt style_formats.

Wenn du einfach nur die Klasse "kfg" aufsetzen möchtest, dann brauchst du nur dies hier in deine tinymce.css zu schreiben.

HTML-Code:

.kfg {
  color: #f30;
}

Welchen Editor benutzt du überhaupt? Damit dir der Kopf nicht allzusehr schwirrt, solltest du einen Editor mit Syntax-Highlighting haben. Er sollte paarige Klammern hervorheben, wenn der Cursor an einer Klammer sitzt. Und am besten noch unsauber eingerückten Code automatisch sauber einrücken können. Die Grundstruktur dieses Konfigurationsobjekts ist

Code:

{
  eigenschaft: wert,
  eigenschaft: wert,
  eigenschaft: wert
}

Da die Werte nicht nur einfache Strings oder Zahlen, sondern selber wieder Objekte, Arrays oder Funktionen sein können, sieht es manchmal ein wenig kompliziert aus, aber diese Struktur musst du auf jeden Fall immer einhalten. Beachte, dass das letzte Eigenschaft/Wert-Paar kein Komma am Ende hat. Es ist also eine Komma getrennte Auflistung.

**sabine0303** · 20.10.2017, 09:20

[QUOTE=Andreas;454090]
Wenn du einfach nur die Klasse "kfg" aufsetzen möchtest, dann brauchst du nur dies hier in deine tinymce.css zu schreiben.

HTML-Code:

.kfg {
  color: #f30;
}

Genau das funktioniert einfach nicht. Vielleicht stimmt der Pfad nicht, ...

Mein Ziel war einen Unterpunkt Farben bei den Formaten anzulegen und dort die Rubrik-Farben für meine Kundin zu hinterlegen, damit Sie einzelne Wörter damit einfärben kann.
Das hat nun geklappt, dank Deiner Datei und dem Link.

Was nicht so schön ist, dass ich die Farben als inline Elemente über styles eingebunden habe, damit sie auch im Backend zu sehen sind:

{ title: 'kfg', inline: 'span', classes: 'kfg', styles: { color: '#20446e' } },

Wenn ich Dich richtig verstanden habe, bräuchte ich das nicht, wenn die css Angabe aus dem tinymce.css Stylesheet gelesen würde.

Grüße, Sabine

**Andreas** · 20.10.2017, 17:09

Dann hast du bestimmt den Ordner css/ in der Dateiverwaltung nicht auf "öffentlich" gesetzt.

**rusty** · 21.10.2017, 11:12

Dennis Erdmann hat ein kurzes Tutorial allgemein zur Konfiguration des TinyMCE unter 4.x geschrieben:
https://erdmann-freunde.de/ressource...ao-4-anpassen/

**Andreas** · 22.10.2017, 21:46

Zitat von sabine0303

Zitat von Andreas

dann brauchst du nur dies hier in deine tinymce.css zu schreiben.

Genau das funktioniert einfach nicht. Vielleicht stimmt der Pfad nicht,
...
Das hat nun geklappt, dank Deiner Datei und dem Link.
...
damit sie auch im Backend zu sehen sind:

Code:

{
  title: 'kfg', 
  inline: 'span',
  classes:  'kfg',
  styles: {
    color: '#20446e'
  }
},

Wenn ich Dich richtig verstanden habe, bräuchte ich das nicht, wenn die css Angabe aus dem tinymce.css Stylesheet gelesen würde.

Nochmal zu diesem Post. Wieso widersprichst du dir da? Weiß jetzt nicht, was du willst.

Ja, diese Formate in das Template schreiben brauchst du nicht mehr.

**sabine0303** · 26.10.2017, 09:53

Zitat von Andreas

Nochmal zu diesem Post. Wieso widersprichst du dir da? Weiß jetzt nicht, was du willst.

Ja, diese Formate in das Template schreiben brauchst du nicht mehr.

Hi Andreas,

was nicht geklappt hatte war, dass ich im tinymce.css Klassen definieren kann die dann automatisch im backend erscheinen. Da hatte ich mich mit der Ordnerstruktur von 4.4 verhaspelt. Und öffentlich zu setzen hatte ich wie Du schon vermutet hast, auch verpennt. Nun klappt das auch.

Davor hatte schon funktioniert, wie von Dir beschrieben im Template eine Unterauswahl Farben anzulegen und dort die Farben zu übergeben.

Danke nochmals,

Sabine

**Andreas** · 26.10.2017, 10:52

Zitat von sabine0303

...wie von Dir beschrieben im Template eine Unterauswahl Farben anzulegen und dort die Farben zu übergeben...

Ich weiß zwar nicht, wo ich das gemacht hatte, weil ich sowas eigentlich nicht mache, aber trotzdem schön, dass es jetzt bei dir funktioniert

**MacPix** · 31.10.2017, 18:32

Hallo Sabine ...
Sorry dass ich mich erst jetzt melde.

Ich habe nur den Tinymce angepasst, so dass die Optionen wie: Einzüge, tabellen, kursiv, und alle sachen die man besser als css stylet oder eben der Kunde nicht machen soll.

Im Templates oberste Ebene und nicht in Unterordner die be_tinyMCE.html5 Templatedatei anlegen und anpassen. es ist dort egal wie viel du herumspielst, denn wenn alles schief gelaufen ist, einfach löschen und eine neue anlegen.

Siehe Bild bei mir ist es dann so....

Zitat von sabine0303

Hi MacPix,
ich versuche gerade in 4.4 tinymce anzupassen. Ich möchte drei Farben über Klassen meiner Kundin zur Verfügung stellen.
Die be_tinyMCE.html5 habe ich gefunden und genommen wird sie auch. Wenn ich da was entferne ist es weg (bold z.B.).
Der Rest erscheint mir allerdings ein Buch mit sieben Siegeln.Eine tinymce.css habe ich auch angelegt, aber was genau soll da rein?
Könntest Du Deinen Weg zum Erfolg für mich skizzieren?

Grüße, Sabine