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>
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; }
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>
- 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..