Bedingte Umbrüche im WYSIWYG-Feld markieren

Nutzbar ab: Version 011.002.050

10. Nov 2016

Bedingte Zeilenumbrüche - sogenannte soft-hyphen (shy) - können Sie auch in WYSIWYG-Feldern einsetzen.

Textpassagen verhalten sich je nach Bildschirmbreite unterschiedlich und können je nach Projektumsetzung zu ungewünschten Zeilenumbrüchen führen. Im Hinblick auf Responsive Webdesign (RWD) macht es gerade bei langen Wörtern Sinn, diese an einer Stelle zu umbrechen, an der getrennt werden darf.

Folgende Möglichkeiten stehen hierzu u.a. zur Verfügung:

  1. hyphen über CSS3
    Auf diese Möglichkeit wird in diesem Artikel nicht eingegangen, da dies vom Browser Google Chrome nicht unterstützt wird.
  2. bedingter Trennstrich (soft-hyphen)


Die 2. Variante mit Einsatz eines bedingten Trennstriches (soft-hyphen) zeigen wir nachfolgend genauer auf.

Da ein bedingter Trennstrich (shy) innerhalb eines WYSIWYG-Feldes grundsätzlich nicht sichtbar ist, gibt Ihnen Weblication® CMS ab Version 011.002.050.000 die Möglichkeit, die Stellen durch das markShys-Attribut sichtbar zu machen (Wert auf "1" setzen).

Beispiel: Auszug aus der /Ihr-Globales-Projekt/wGlobal/layout/templates/items/text.wysiwyg.wItem.php

<!-- web:text:start ... editor="wysiwyg" markShys="1" ... --><xsl:value-of disable-output-escaping="yes" select="wd:fragment[@id = 'text']"/><!--web:text:stop-->
WYSIWYG-Feld mit markierten shy-Trennzeichenzoom
WYSIWYG-Feld mit markierten shy-Trennzeichen

Im Text gesetzte bedingte Trennstriche (shy) werden bei aktiviertem markShys-Attribut für den Redakteur sichtbar. An Stelle der Umbrüche werden dem Redakteur kleine Dreiecksymbole angezeigt (siehe Screenshot).

Um einen bedingten Trennstrich über ein WYSIWYG-Feld zu setzen, hinterlegen Sie diesen als weiteres Sonderzeichen in der styleClasses.wEditorStyles.php:

Beispiel: Auszug aus der /Ihr-Globales-Projekt/wGlobal/layout/editor/wysiwyg/styleClasses.wEditorStyles.php
Beispiel: Auszug aus der /Ihr-Globales-Projekt/wGlobal/layout/editor/wysiwyg/styleClasses.wEditorStyles.php
WYSIWYG-Leiste - Sonderzeichen shy-Trennzeichen (als TZ bezeichnet)zoom
WYSIWYG-Leiste - Sonderzeichen shy-Trennzeichen (als TZ bezeichnet)

Die WYSIWYG-Leiste bietet einem Redakteur so die Auswahl des Sonderzeichens für einen bedingten Trennstrich (HTML dezimale Notation #173).

 
 

Um bedingte Trennzeichen auch in anderen Feldern (z.B. textarea, etc.) einsetzen zu können, können Sie so vorgehen, daß Sie ein Zeichen definieren (z.B. die Tilde: ~), welches Sie über die pre.php bei der Transformation durch die HTML-Notation des SHY-Zeichens ersetzen. Das definierte Zeichen sollte sonst in der Präsenz im entsprechenden Bereich (z.B. textarea) nicht regulär als Zeichen verwendet werden. Ansonsten nutzen Sie einfach eine Zeichenkombination, die für den Redakteur einfach nutzbar ist.

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG