Benutzer-Werkzeuge

Webseiten-Werkzeuge


Seitenleiste

webedition:textarea:tinymce:start

TinyMCE: der WYSIWYG-Editor im CMS webEdition seit Version 6.3.6

Die neu implementierten WYSIWYG-Fähigkeiten von TinyMCE

Der Content-Bereich von TinyMCE befindet sich in einem eigenen iFrame und ist dadurch vollständig gegen den umgebenden HTML-Kontext gekapselt. Dies ist nötig und wird in fast allen JavaScript-Editoren so realisiert, denn ohne die Kapselung ließe sich der Content nur schwer zuverlässig und unabhängig vom HTML-Kontext bearbeiten.

Für die Wysiwyg-Fähigkeiten des TinyMCE innerhalb von webEdition ist dies allerdings ein Problem: Denn um im Editor die gleiche Ansicht zu bekommen, wie auf der ausgespielten Seite, muss exakt der Kontext in das iFrame injiziert werden, in dem die fertig befüllte Textarea später ausgespielt wird. Dies wird ab WE 6.3.6 durch die Übergabe von CSS-Dateien an TinyMCE sowie die Vergabe eigener CSS-Klassen an das umgebende Container-Element raelisiert. Als Container-Element dient dabei im Editor der body-Tag des iFrames und beim Ausspielen der Tetxtarea-Tag. Dass die Kapselung zwar den Aufwand im Umgang mit TinyMCE erhöht, aber umgekehrt die Wysiwyg-Fähigkeiten in einem System wie WE erst ermöglicht, wird schnell klar, wenn man an die häufigen Darstellungsunterschiede zwischen Edit-Mode und ausgespielter Seite denkt. Wäre der Editor beim Einsatz im Backend nicht gegen den umgebenden Editmode abgeschlossen, wäre es nicht möglich, im Content-Bereich eine vom Editmode abweichende Frontend-Ansicht zu simulieren. CSS-Dateien für TinyMCE in Dokumenten/Vorlagen Hinweis: Die folgende Beschreibung orientiert sich an der Verwendung von TinyMCE im Backend (eingebunden in Vorlagen mit we:textarea). Die Verwendung im Frontend (we:userInput type="textarea") funktioniert jedoch genau gleich (⇒ Schalter "Editor für textareas im Frontend" unter Einstellungen→ Allgemein→ Erweitert!).

Bei Verwendung des Editors in Dokumenten/Vorlagen gibt es zwei Möglichkeiten, CSS-Dateien einzubinden:

  1. Stylesheets, die im umgebenden Editmodes (oder der ausgespielten Seite bei Verwendung des Editors im Frontend) bereits zur Verfügung stehen können automatisch eingelesen und
  2. zusätzliche Dateien können explizit an den Editor übergeben werden.

Automatische Übergabe von CSS-Dateien an TinyMCE

Zur automatischen Übergabe von CSS-Dateien werden beim Parsen der Vorlage die we:css-Tags ausgewertet: Dies funktioniert auch bei Verwendung von Mastertemplates oder wenn das Template mit dem Editor per we:include type="template" in ein anderes eingebunden wird. Voraussetzung ist, dass das mit we:css eingebundene Stylesheet auch in dem Bereich, in dem sich der Editor befindet (Editmode oder Frontend), sichtbar ist. Befindet sich we:css etwa innerhalb von we:ifNotEditmode oder we:ifNotWebedition, muss dies geändert werden, damit das Stylesheet für einen Editor im Editmode verfügbar wird.

Da bei vielen WE-Projekten je nach Bereich unterschiedliche Stylesheets eingebunden werden (müssen), wurde we:css um das Attribut applyto erweitert (vgl. dazu auch den Eintrag zu we:css in der Tag-Referenz): Ist applyto="wysiwyg" gesetzt, wird die betreffende CSS-Datei nur im TinyMCE ausgelesen, beeinflusst aber nicht die Darstellung des restlichen Editmode (bzw. der restlichen Seite im Frontend). Umgekehrt wird mit applyto="around" verhindert, dass ein spezifisches Editmode- bzw. Seiten-CSS auch an TinyMCE übergeben wird. Bei applyto="all" entfällt die Einschränkung.

Wichtig: Da die Integration von CSS-Dateien in den bisherigen, webEdition-eigenen Editor nur rudimentär funktioniert hat, wurde der Default-Wert von applyto auf "around" gesetzt. Diese Standardeinstellung kann unter Extras→ Einstellungen→ Allgemein→ we:tag Standards→ "Standard Einstellung für applyto-Attribut in <we:css>" verändert werden.

Die automatische Übergabe von Stylesheets ermöglicht es, dynamisch in Abhängigkeit von Include-Strukturen, Dokument-Typen, Arbeitsbereichen, Kategorien etc. ausgewählte Stylesheets auch TinyMCE zu Verfügung zu stellen. Da eine solche dynamische Auswahl in der Regel aufgrund von Einstellungen des konkreten Dokuments und nicht der Vorlage geschieht, wäre die Umsetzung solch eines Modells durch explizite Stylesheet-Übergabe sehr aufwändig.

Allerdings muss beachtet werden: Die per we:css mit applyto="wysiwyg" oder "all" freigegebenen CSS-Dateien werden an alle TinyMCE-Instanzen eines Dokuments übergeben. Mit dem neuen we:textarea-Attribut ignoredocumentcss kann die automatische Übergabe von CSS-Dateien in den einzelnen we:textarea-Tags unterbunden werden. Explizite Übergabe von CSS-Dateien an TinyMCE

CSS-Dateien können mit dem ebenfalls neuen we:textarea-Attribut editorcss explizit an TinyMCE übergeben werden: Das Attribut erwartet eine oder mehrere kommaseparierte IDs von WE-internen CSS-Dateien. Wichtig: Diese explizit übergebenen CSS-Dateien werden nicht automatisch in die ausgespielte Seite inkludiert!.

Da die explizit eingebundenen CSS-Dateien eignen sich z.B. für die Korrektur kleinerer Abweichungen zwischen dem Layout von Editmode und ausgespielter Seite. Zur Unterstützung dieser Funktion soll demnächst die eine Möglichkeit einer Standardbelegung für editorcss in die WE-Einstellungen eingebaut werden. Das Attribut editorcss bietet zudem die einzige Möglichkeit, an mehrere TinyMCE-Instanzen in einem Template unterschiedliche Stylesheets zu übergeben. Folgende Punkte sollten im Zusammenhang mit der Übergabe von Sytelesheets beachtet werden:

  • Die mit we:css übergebenen Stylesheets werden vor den im we:textarea-Attribut editorcss definierten CSS-Dateien eingebunden: Die Stylesheets aus editorcss überschreiben diejenigen aus we:css.
  • Das we:textarea-Attribut bgcolor hat oberste Priorität: Ist es gesetzt und nicht leer, überschreibt es die body-Eigenschaft background-color aller eingebundenen CSS-Dateien (wobei gleichzeitig background-image: none gesetzt wird)!
  • Tipp: Wird im Editmode oder Frontend (bei we:userInput) ein Background-Image verwendet (eingebunden mit we:css), kann mit bgcolor="transparent" verhindert werden, dass das Image im Editor nochmals (verkleinert) ausgespielt wird: Stattdessen wird der umgebende Seitenhintergrund im Content-Bereich sichtbar.
  • Tags wie we:ifNotEditmode, we:ifNotWebEdition oder we:ifCat funktionieren weiter: we:css-Tags, die aufgrund solcher Bedingungen nicht sichtbar sind, werden auch nicht ausgewertet!
  • Tipp: TinyMCE listet alle in den übergebenen CSS-Dateien definierten Klassen im Pulldown-Menu "Format". Dies geschieht jedoch nur dann, wenn das we:textarea-Attribut classes leer bleibt oder ganz entfällt.

CSS-Dateien für TinyMCE in Objekten

Die in einer Klasse unter Eigenschaften → "CSS" ausgewählten CSS-Dateien werden in jeden TinyMCE-Editor der Klasse eingebunden. Wie alle an TinyMCE übergebenen Stylesheets bestimmen sie die Ansicht des Content-Bereichs im Editor, werden aber beim Auspielen der Objekt-Inhalte ignoriert.

Die Objekt-textarea type="wysiwyg" wurde um das Attribut bgcolor ergänzt, das ebenfalls analog zu bgcolor auf we:textarea implementiert ist. Simulation des HTML-Kontextes

Mit den beschriebenen Methoden kann exakt gesteuert werden, welche Stylesheets TinyMCE in welcher Reihenfolge auswerten soll. Dennoch kann die Darstellung im TinyMCE von der im Frontend ausgespielten abweichen, denn weil der Textarea-Content bei TinyMCE in einem iFrame liegt, fehlt ihm der HTML-Kontext der ausgespielten Seite: Befindet sich der Content dort z.B. in einem umgebenden div-Container mit class="wysiwyg" und unterscheiden sich die Styles für ".wysiwyg p" und "p", so wird die Darstellung im TinyMCE falsch sein, denn dort befindet sich der Content nicht in einem Container der Klasse "wysiwyg".

Um den gewünschten HTML-Kontext zu simulieren, wurde dem Body-Tag des TinyMCE-iFrames folgende CSS-Klassen zugewiesen:

  • we:textarea: Diese Klasse besitzt das umgebende HTML-Element aller we:textarea, unabhängig davon ob wysiwyg="false" oder "true" (bei wysiwyg="false" ist dies der Textarea-Tag, bei wysiwyg="true" der Body-Tag des TinyMCE-iFrames)
  • we:textarea-ELENTNAME: Diese Klasse besitzen ebenfalls, alle mit we:textarea erzeugten Elemente. ELEMENTNAME ist hierbei der durch das we:textarea-Attribut name definierte Name des einzelnen we:textarea-Elements.
  • Wichtig: Befindet sich we:textarea name="meineTextarea" in einem we:block name="meinBlock", so lautet der ELEMENTNAME der we:textarea im ersten Blockelement meineTextareablk_meinBlock__1!
  • tiny-wetextarea: Diese Klasse der besitzt der Body-Tag aller TinyMCE-iFrames.
  • Zusätzlich kann dem we:textarea-Attribut class noch eine custom-Klasse an den die jeweilige Textarea/den iFrame-Body übergeben.

Wichtig: Beim Ausspielen befindet sich der we:textarea-Content nicht mehr automatisch in einem umgebenden Container. Wird im Editor mit den genannten Klassen als CSS-Selektor gearbeitet, und sollen beim Ausspielen die identischen Stylesheets verwendet werden, muss der Content u.U. auch hier mit einem ensprechenden Container-Element umgeben werden.

Mit diesen Container-Klassen bietet die TinyMCE-Implementierung von webEdition die Möglichkeit, den HTML-Kontext der ausgespielten Seite vollständig zu simulieren. Denn egal wie komplex das verwendete Frontend-CSS ist: Durch Einfügen der entprechenden Klassen in die Selektoren-Ketten kann jeder CSS-Selektor auch im Editor simuliert werden. Allerdings kann der Aufwand dieser Anpassungen je nach Komplexität der Stylesheets beträchlich sein. Auf klar strukturierten Seiten sollte es jedoch keine Probleme geben, zumal wenn darauf geachtet wird, dass die einzelnen TinyMCE-Instanzen möglichst eine gleichbleibende Position innerhalb der HTML-Struktur besitzen.

webedition/textarea/tinymce/start.txt · Zuletzt geändert: 2015/12/22 16:40 von Marc Krämer

Recent changes RSS feed