CSS-Klassen gezielt platzieren im TinyMCE

In der we:textarea von webEdition 9 kann ich nicht mehr wie früher gezielt CSS-Klassen an HTML-Elemente wie <ul> <li> oder <a> setzen.

In we8 konnte man (Redakteur) z.B. den Cursor in der Textarea in eine Textliste setzen und in der Statusleiste (unterhalb der Symbolleiste angezeigt als "Pfad:") das "ul" oder das "li" auswählen. Hat man dann im CSS-Dropdown der Symbolleiste eine Klasse gewählt, wurde diese an das jeweilige Element gesetzt. Funktionierte perfekt und wurde in der Statusleiste sichtbar gemacht als "Pfad: ul.listcheck li".

In we9 gibt es im TinyMCE auch eine Statusleiste (am unteren Rand), wo man zwar "ul" oder das "li" auswählen kann. Aber die anschließend im CSS-Dropdown ausgewählte Klasse wird immer als z.B. <span class="listcheck"> eingebaut. Das verhindert das individuelle und einfache Stylen von HTML-Elementen im TinyMCE mittels Klassen. Und baut man im HTML-Quellcode des TinyMCE die CSS-Klassen per Hand ein, wird dies in der Statusleiste des TinyMCE nicht wie früher (s.o.) angezeigt. Dort steht weiterhin nur "ul » li".

Im alten Forum hatte ich gelesen, dass es ginge, wenn CSS-Definitionen in der CSS-Datei nicht sehr global z.B. ".listcheck" angegeben würden. Schriebe man gezielt "ul.listcheck" oder "li.listcheck", würde das wie früher funktionieren. Das kann ich aber nicht nachvollziehen.

Hat dieses Problem sonst niemand? Formatiert bei Euch oder Euren Kunden kein Redakteur Texte auf diesem Weg? Wie setzt Ihr gezielt Klassen an HTML-Elemente? Einem Kunden kann ich nicht das Arbeiten im HTML-Quellcode zumuten.

Hey, Danke für Eure schnelle Reaktion. Hier meine Antworten:

• Bei diesem Projekt verwenden wir Version: 9.1.5 Barrhorn (9.1.5.0, Revision: 14299)
• Die im Editor verwendbaren Klassen sind definiert über <we:textarea classes="listcheck,listspace,minitext,…"/>
• Die "Benennung" von kryptischen Klassen funktioniert, behebt aber nicht das Problem.
• Habe die webEdition-Voreinstellung von "css > around" in Verbindung mit einem speziellen wysiwyg.css auf "css > all" umgestellt. Ändert auch nichts an der Problematik.

Stefan, bei Dir funktioniert das mit dem Auswählen eins HTML-Elements und Dranhängen der Klasse? Seltsam, vielleicht schießt bei uns ja noch irgendwas ganz anderes quer? Oder ich steh auf dem Schlauch!? Vielleicht können wir mal zoomen?!

Und Tipp, Stefan: Wenn Du die Sonderheadline definieren willst, schreib im CSS statt .sonderheadline konkret h5.sonderheadline { … }. Dann sollte das im Dropdown besser aussehen (die Klasse dort also nicht angewendet werden).

Aaaah, jetzt habe ich meinen Denkfehler gefunden!

Nicht im Stylesheest muss man statt .listcheck besser ul.listcheck { } definieren. Es geht um die Schreibeweise innerhalb von "classes" in der Textarea:

<we:textarea classes="ul.listcheck"/>

oder nach Geschmack <we:textarea classes="Liste mit Abständen:ul.listcheck"/>

Danke Stefan für den Link auf https://qa.webedition.org/tracker/view.php?id=13429

Noch ein Kniff, den ich gerade gefunden habe: Formate wie "größerer Text" oder "rote Schrift" will man ja flexibel an alle möglichen HTML-Elemente dranhängen können (<p>, <ul>, <li>, <pre>, etc.). Hierfür kann man ein Sternchen einsetzen: <we:textarea classes="*.bigtext"/>.

Dann wird die CSS-Klasse "bigtext" immer schön an das umgebende HTML-Tag gehängt (welches auch immer es ist) und es wird nicht ein blödes <span class="bigtext"> eingefügt!