WE9, wysiwyg, TinyMCE - new Style und Fragen

[Getty24]

Mir gefällt der neue TinyMCE Editor (Version 5) in WE9 ganz gut. Er wurde "… aktualisiert und optisch an moderne Office-Suiten angepaßt."
Eigentlich war ich nie - und bin ich noch immer nicht - ein Freund von WYSIWYG Editoren. Egal – in einigen Fällen kann so ein Editor ganz nützlich sein und er wird oft auch von Auftraggebern gewünscht.
Ich habe mir einen TinyMCE Editor so zusammengebaut, wie ich ihn mir recht rudimentär und hier für diesen Text beispielhaft vorstellen kann. Vorab: Ich trenne die CSS Dateien fürs Front-End und fürs Back-End (Editmode) in WE komplett.

Code: Alles auswählen

<we:ifEditmode><link rel="stylesheet" type="text/css" href="/css/style-we.css">
<we:else />
<link rel="stylesheet" type="text/css" href="/css/style.css"></we:ifEditmode>

Die CSS Datei für das Back-End (Editmode) passe ich so an, das mir die Ansicht der Eingabeoberfläche in WE gefällt. Ausser der semantischen Reihenfolge hat diese Ansicht nicht viel mit der Ausgabe im Front-End zu tun. Hier die style-we.css Datei:

Code: Alles auswählen

/* basic WE styling */
* { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; line-height: 1.5; font-size: 1em; font-weight: normal; box-sizing: border-box; }
article { max-width: 760px; margin: 0 auto; }

/* annotation in WE */
dfn { color: #386aab; font-weight: bold; padding-top: 0.5em; display: block; }
dfn span { color: #d5643f !important; font-weight: normal !important; font-size: 0.75em !important; }

/* basic WE input field styling, basic WE textarea field styling; non-wysiwyg */
input.wetextinput { padding-left: 4px; }
textarea.wetextarea { padding-left: 8px; padding-top: 4px; padding-bottom: 4px; }

/* basic TinyMCE typo styling; wysiwyg */
.tiny-wetextarea { line-height: 1.5 !important; font-size: 1em !important;  }
h1, h2, h3, p { padding-top: 0 !important; margin-top: 0 !important; }
.tiny-wetextarea h2, .tiny-wetextarea h3 { font-weight: bold; padding-bottom: 0 !important; margin-bottom: 0 !important; font-size: 1.05em; }
strong { font-weight: bold; }

/* TinyMCE orientation for heading element; wysiwyg */
.tiny-wetextarea h2::before { content: "H2 - "; }
.tiny-wetextarea h3::before { content: "H3 - "; }

/* basic TinyMCE button styling; wysiwyg */
button span.tox-tbtn__select-label { font-size: 12px !important; }

Der bespielhafte Template-Code sieht so aus:

Code: Alles auswählen

<article>
<we:ifEditmode><dfn>Headline*</dfn></we:ifEditmode>
<h1><we:input style="width: 760px;" name="headline" type="text" /></h1>

<we:ifEditmode><dfn>Intro* <span>- wird auf Detailseite fett ausgegeben; ideal 250 Zeichen</span></dfn></we:ifEditmode>
<p class="intro"><we:textarea style="width: 760px; height: 85px;" name="intro" wysiwyg="false" /></p>

<we:ifEditmode><dfn>Content <span>- Bilder vor dem Upload bitte bearbeiten; ideal 760px in der Breite</span></dfn></we:ifEditmode>
<we:textarea style="width: 760px; height: 600px;" name="content" 
wysiwyg="true" inlineedit="true" removefirstparagraph="false"
commands="formatblock,hr,bullist,image,break,editsource,bold,italic,link" 
formats="h2,h3"
editorcss="5" classes="mini,medium" />

<we:ifEditmode><br><dfn>* = Pflichtfeld <span>- bitte immer ausfüllen!</span></dfn></we:ifEditmode>
</article>

Das Ergebnis sieht so aus:



- damit unter Blockformate die Überschriften "h2,h3" ausgewählt werden können, muss "formatblock" unter "commands" benannt werden und die "formats" selber (siehe CODE: Template-Code).
- Frage 1: die hr (Linie) wird bei mir als Funktion/Button NICHT ausgegeben -- ?
- break (mal sehen, ob ich es drin lasse, gibt leider auch kein hübsches Icon unter Font Awesome Icons
- editsource zum Überprüfen des HTML
- bold,italic,link kommen als kleines PopUP Fenster, wenn der entsprechende Text im Editor markiert ist

Frage 2: Eigentlich sollten per classes="mini,medium" die beiden CSS Klassen ausgeben werden, die ich per webEdition-internen CSS-Dokument editorcss="5" angeben habe. Eigentlich wollte ich diese Klassen beim "Grafik einfügen -> CSS Style" Dialog Feld haben. Dort finden sich diese aber nicht. Werden die Klassen - wenn sie da wären - dann eigentlich ins Ausgabe-Dokument geschrieben??



Wahlweise könnte ein Redakteur hier – im Dialog-Feld "Grafik einfügen" – über "Miniaturansicht", aber verschiedene Bildgrößen über vorab definierte Miniaturansichts-Größen auswählen

Frage 3: Wie bekomme ich über TinyMCE image, bzw. "Grafik einfügen" eigentlich ein <figure> HTML-Tag um das <img> HTML-Tag herum. Idealerweise mit <figcaption> gespeist aus dem "longdesc"-Attribut vom dem Dialog Feld …?

Vielen Dank fürs Lesen und gegebenfalls fürs Fragen beantworten..

[NilSole]

Hallo Getty,

vorweg, ich habe nicht so viel Erfahrung mit dem Tiny.

Zu deiner ersten Frage:
hier scheint mir der <hr> Button schlicht zu fehlen. Das könnte ein Bug sein, eventuell ist er aber auch nur zu gut versteckt. Ich habe es mal in der Bugbase erwähnt, vielleicht hat jemand mehr Ahnung?

Zu 2.:
Hier kriege ich auch maximal im Editorfenster ein <span> mit Klasse hin. Bei den Bildern scheint die Funktion bisher zu fehlen. Klassen sollten eigentlich auch in der Ausgabe erscheinen.

Zu 3.:
Habe ich bisher nicht gemacht, es könnte allerdings mit einem Template funktionieren. Das ist mir gerade testweise aber auch nicht gelungen. Hier ist auf jeden Fall die Dokumentation zum Template Feature für WYSIWYG in wE. Longdesc könnte man eventuell per Javascript im Backend richtig zuordnen, vielleicht gibt es aber auch einfachere Möglichkeiten.
https://www.webedition.org/de/dokumenta ... ibute_4240

Schöne Grüße
Nils

[Getty24]

Hallo Nils.

Zu 2.:
Hier kriege ich auch maximal im Editorfenster ein <span> mit Klasse hin. Bei den Bildern scheint die Funktion bisher zu fehlen. Klassen sollten eigentlich auch in der Ausgabe erscheinen.

Dto. auch bei mir: gebe ich bei textarea commands="styleselect" mit an, bekomme ich die beiden, bei editorcss="5" classes="mini,medium" definierten Klassen, angezeigt.



Nicht jedoch im Bild-Dialogfeld.

Zu 3.:
Habe ich bisher nicht gemacht, es könnte allerdings mit einem Template funktionieren. Das ist mir gerade testweise aber auch nicht gelungen. …

Ist mir auch nicht gelungen: textarea commands="template" und templates="12,13"



2 WE Dokumente über ein einfaches textarea Template erzeugt (12,13) und wie beschrieben eingebunden, führt zur Fehlermeldung "No templates defined."
Ich glaube aber, das Attribute "templates" beim TinyMCE Editor dient eher dazu, Text-Inhalte, quasi als Text-Vorgabe für die Redaktion zur Verügung zu stellen. Und nicht um zB einen <figure> HTML-Tag um das <img> HTML-Tag herumzu legen.

Grüße Getty