tinymce.css - Es werden nicht alle Klassen im Editor angezeigt

[thepixture]

Ich habe in meiner tinymce.css 3 Klassen eingetragen, aber es wird immer nur die Erste angezeigt.
Als ich die 3 Standard-Klassen noch drin hatte, wurden diese und dann nur meine erste eigene Klasse angezeigt. Die anderen fehlten.

Ich habe keine Ahnung woran das liegen kann.

[Thoni]

Hast du mal den Browser Cache geleert?

[thepixture]

Ja ständig. Habs auch in anderen Browsern geprüft. Überall das gleiche Problem.

[tab]

Hmm, wie sehen denn die beiden Klassen aus, die nicht angezeigt werden? Ich kann hier problemlos neue Klassen definieren in der tinymce.css, die dann auch alle angezeigt werden. Sogar eine "leere" Klasse. Allerdings sieht man die jeweils neuen Klassen immer erst, nachdem der Browsercache gelöscht ist.

[thepixture]

Ok Fehler gefunden. Ich hatte nach den {} noch ein ; stehen. Das sollte da natürlich nicht rein.

[Andreas]

Du kannst versuchen einen Query and den Aufruf der CSS zu hängen. Dann brauchst du den Cache nicht zu löschen.

  content_css: "<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH . '/' . Config::get('uploadPath'); ?>/tinymce.css?" + new Date().getTime(),

oder

  content_css: "<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH . '/' . Config::get('uploadPath'); ?>/css/tinymce.css?" + new Date().getTime(),

[gaxweb]

Also meine tinymce.css ist fehlerfrei und die hinzugefügten Klassen tauchen einfach nicht auf. Auch wenn ich die vordefinierten lösche tut sich nichts. Hilfe?

In welcher Datei müsste ich das tun, Andreas?

[Andreas]

Zeig mal bitte die Zeile, welche mit "content_css: " beginnt, aus deiner system/config/tinyMCE.php, oder wenn du eine eigene aufgesetzt hast aus dieser. Und sag mir mal den Pfad zu deiner CSS-Datei, welche du für die Klassen benutzen möchtest.

[tab]

Ich nehme an, alle Caches wurden mal gelöscht, insbesondere auch der Browsercache? Steht ja auch weiter oben hier im Thread.

[Andreas]

Ich weiß nicht, ob sich das mittlerweile verändert hat, aber vor ner gewissen Zeit war die einmal geladene tinymce.css für den Tiny dermaßen hartnäckig irgendwo in den Browsereingeweiden verankert, dass auch ein Löschen des Browsercaches nichts brachte, außerdem will man ja auch nicht immer seinen Browsercache löschen. Deswegen der Zusatz mit dem ...?" + new Date().getTime().

[gaxweb]

Zeig mal bitte die Zeile, welche mit "content_css: " beginnt, aus deiner system/config/tinyMCE.php, oder wenn du eine eigene aufgesetzt hast aus dieser. Und sag mir mal den Pfad zu deiner CSS-Datei, welche du für die Klassen benutzen möchtest.

/contao/core/system/config/tinyMCE.php:

content_css: '<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php 
      echo TL_PATH . '/' . Config::get('uploadPath'); ?>/tinymce.css',

Es liegt scheinbar in der Tat daran, dass die CSS-Datei per XHR angefragt wird. Denn wenn ich den Browser-Cache komplett deaktiviere, so dass immer alle Anfragen neu gestellt werden, dann erscheint auch das aktuelle CSS. Sobald ich ihn wieder anschalte sehe ich wieder die alten.

Ich hatte auch schon probiert was an die URL zu hängen, aber die Änderung kam nie im HTML an, auch nach dem Löschen des CMS-Caches nicht:

content_css: '<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php
      echo TL_PATH . '/' . Config::get('uploadPath'); ?>/tinymce.css<?php echo "?",uniqid(); ?>',

EDIT: Jetzt plötzlich steht es doch dabei. Keine Ahnung in welchem Cache das jetzt noch gelegen haben soll.

[gm-team]

Stehe vor dem gleichen Problem - die neue CSS Klasse will einfach nicht angezeigt werden.

Was habe ich gemacht:
- In files/tinymce.css eine Klasse hinzugefügt
- In system/config/tinyMCE.php den Code (erste zeile) von Andreas eingefügt (ersetzt)

Auf meinem Chrome ging es nachdem ich den Browsercache geleert hatte. Im Firefox kann ich leeren was ich will, wird nicht angezeigt. Auch Contao-internen Cache geleert.
Bei meinem Redakteur wird's leider nicht mal im Chrome ausgegeben, sonst wärs nicht so schlimm, aber er kann es leider gar nicht auswählen.

[mlweb]

Warum auch immer - der Cache bei Änderungen im Tiny ist nach meiner Erfahrung furchtbar hartnäckig.

[Andreas]

• Wie genau sieht diese Klasse (der Selektor) aus?
• Stelle sicher (F12) dass diese CSS-Datei mit dem ?[timestamp] wirklich geladen wird.
• Stelle sicher, dass dieses Feld, wo es nicht greift auch die richtige tinyxxx.php benutzt. Der Newsletter z.B. benutzt die tinyNews.php. (Die tinyFlash.php ist im Core nicht mehr im Einsatz.)
• Lade die Seite neu mit Strg+F5.
• Mit dem Addon Web Developer kannst du den Cache leicht einstellen, dass er die Seite jedesmal neu lädt. Das habe ich zur Entwicklung immer an. Der Eintrag in der about:config müsste dieser hier sein. browser.cache.check_doc_frequency;1
• Du kannst eine tinyCustom.php einsetzen, damit das updatesicher ist.
• Die tinyCustom.php muss in der dcaconfig.php den Feldern zugewiesen werden.

Mehr fällt mir dazu nicht ein, außer, dass Firefox sein Cache-Konzept nochmal geändert hat. Aber ich habe bisher keine Probleme mit meiner Lösung. Ich benutze eine tinyCustom.php auf allen Feldern, welchen im DCA die tinyMCE zugeordnet ist.

[gm-team]

Wie genau sieht diese Klasse (der Selektor) aus?

.hidden-link a {
	color: #303030;
	text-decoration: none;
	cursor: text;
}

Stelle sicher (F12) dass diese CSS-Datei mit dem ?[timestamp] wirklich geladen wird.

Da es im Chrome funktioniert gehe ich davon aus dass ich diesen Punkt ausschliessen kann.

Stelle sicher, dass dieses Feld, wo es nicht greift auch die richtige tinyxxx.php benutzt. Der Newsletter z.B. benutzt die tinyNews.php. (Die tinyFlash.php ist im Core nicht mehr im Einsatz.)

Wie voriger Punkt.

Lade die Seite neu mit Strg+F5.

Gemacht mit dem Mac-Kürzel cmd + R

Mit dem Addon Web Developer kannst du den Cache leicht einstellen, dass er die Seite jedesmal neu lädt. Das habe ich zur Entwicklung immer an. Der Eintrag in der about:config müsste dieser hier sein. browser.cache.check_doc_frequency;1

Genau so versucht - leider ohne Erfolg.

Du kannst eine tinyCustom.php einsetzen, damit das updatesicher ist.

Hab ich erstellt.

Die tinyCustom.php muss in der dcaconfig.php den Feldern zugewiesen werden.

Hab ich gemacht, mit diesem 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'; 
    } 
  }); 
} 

Konnte es damit im Firefox noch immer nicht darstellen, nun ist es jedoch auch im Chrome wieder weg. Habe sicherheitshalber nochmal die tinyCustom.php rausgenommen und Chrome Cache geleert, wird noch immer nicht angezeigt.

Nochmal zur Sicherheit:
Eigentlich müsste es genügen, die Klasse in der tinymce.css hinzuzufügen - wäre da nicht der hartnäckige Cache. Denn nur dieser Schritt alleine hat es bei mir im Chrome erscheinen lassen.
Oder muss ich noch eine andere Datei bearbeiten?

[Andreas]

Ich denke du musst dort einen reinen Klassen-Selektor eintragen. Eigenschaft und Wert kann man auch weglassen.

.hidden-link {}

/* Das hier kommt dann eigentlich in deine CSS-Datei */
/* Kann aber auch in die tinymce.css, dann greift es auch im BE */
.hidden-link a {
    color: #303030;
    text-decoration: none;
    cursor: text;
} 

[gm-team]

Tatsächlich - nun funktioniert's!

Entzieht sich zwar meinem Verständnis warum, aber Hauptsache es wird nun dem Redakteur angezeigt.

Danke Andreas.

[Andreas]

Weil tinyMCE so programmiert ist aus dieser Datei default nur reine CSS-Klassen herauszuholen. Was sollte z.B. hiermit geschehen?

.outer .inner {}
.outer.inner {}

Man kann da aber noch sehr viel anpassen, siehe hier https://www.tinymce.com/docs/plugins/importcss/

In meiner tinyCustom habe ich da nochmal einiges optimiert, kannst sie ja mal ausprobieren. http://public.andreasburg.de/tinyCustom.zip

Optimiert ist hauptsächlich, dass das Format-Dropdown sofort sichtbar ist. Ein oder mehrere aufgesetzte Klassen sind im Dropdown hervorgehoben (border-left). Und ein zusätzliches SPAN soll nur aufgesetzt werden, wenn nötig.

<!-- erforderlich -->
<p><span class="highlight info">lorem</span> ipsum</p>

<!-- nicht erforderlich -->
<p><span class="highlight info">lorem ipsum</span></p>

<!-- optimiert -->
<p class="highlight info">lorem ipsum</p>

Die tinymce.css muss updatesicher in files/css/ liegen.

Edit: Und wenn der Cursor in z.B. einer H2 steht, zeigt das Dropdown mit den Elementen direkt "H2" an. (Das macht nämlich nicht viel Sinn, wenn man sich nur für diese Info oben durch das Menü hangeln muss.)