So setzen Sie eigene Formatierungen für Textfelder

15. Sep 2015

Dieser Artikel beschreibt, wie Sie für WYSIWYG-Felder eigene Textformatierungen zur Auswahl anbieten.

Wysiwyg-Leiste - Eigene Formatierungen in der Formatierungsauswahlzoom
Wysiwyg-Leiste - Eigene Formatierungen in der Formatierungsauswahl

Eigene Formatierungen innerhalb von Textfeldern können Sie über die WYSIWYG-Leiste zur Verfügung stellen.
Die Maske für die Definition der zur Verfügung stehenden Formatierungen erreichen Sie als Administrator innerhalb der Formatierungsbox rechts unten durch Klick auf "Formatierungen anpassen". Die Maske wird in Quelltextansicht der Datei styleClasses.wEditorStyles.php geöffnet (siehe Beispiel weiter unten).

Die einzelnen Formate werden über das className-Tag definiert:

  • de:name
    Definiert den deutschsprachigen Text in der Auswahlbox
    (z.B.: Hauptüberschrift)
  • en:name
    Definiert den englischsprachigen Text in der Auswahlbox
    (z.B.: Headline)
  • fr:name
    Definiert den französischsprachigen Text in der Auswahlbox
    (z.B.: Titre)
  • value
    Definiert den Klassennamen, der für die Formatierung gesetzt wird.
    (z.B.: highlighted (generierter Quelltext: <span class="highlighted">Text</span>)
    Sofern es sich nicht um die nachfolgend aufgelisteten HTML-Tags handelt, wird bei eigenen Formatierungen immer ein span-Tag mit class-Attribut gesetzt (siehe Beispiel highlighted)! Beachten Sie dazu auch die Hinweise unten!
    Folgende Werte setzen anstatt des Klassen-Attributes das entsprechende HTML-Tag:
    • h-Überschriften (h1 bis h6)
      Eine Klassenangabe ist hierzu ebenso möglich (z.B.: h2.bold).
    • p
    • strike
    • sup
    • sub

Die von Ihnen festgelegten Klassennamen (z.B. .highlighted) definieren Sie in der verwendeten CSS-Datei (meist design.css, z.B. /Ihr-Globales-Projekt/wGlobal/layout/styles/design.css).

Beispiel: Auszug aus der /Ihr-Globales-Projekt/wGlobal/layout/editor/wysiwyg/styleClasses.wEditorStyles.php

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<wEditorStyles xmlns:de="http://weblication.de/5.0/lang/de" xmlns:en="http://weblication.de/5.0/lang/en" xmlns:fr="http://weblication.de/5.0/lang/fr" xmlns:wsl="http://weblication.de/5.0/wsl" version="5.0">
  <className de:name="Hauptüberschrift 1" en:name="Headline" name="Headline" value="h1.none"/>
  <className de:name="Überschrift 2" en:name="Subline 2" name="Subline 2" value="h2.none"/>
  <!--
  <className de:name="Überschrift 2 fett" en:name="Subline Bold" name="Subline 2 Bold" value="h2.bold"/>
  -->  
  <className de:name="Überschrift 3" en:name="Subline 3" name="Subline 3" value="h3.none"/>
  <!--
  <className de:name="Zitatblock" en:name="Blockquote" name="Blockquote" value="blockquote"/>
  -->         
  <className de:name="Normaler Text" en:name="Text" name="Text" value="p"/>        
  <className de:name="Kleiner Text" en:name="Text Small" name="Text" value="p.small" styleInSelectbox="font-size:10px;line-height:12px"/>
  <className de:name="Hervorgehoben" name="Highlighted" value="highlighted" styleInSelectbox="background-color:yellow"/> 
  <className de:name="Durchgestrichen" name="Strikethrough" value="strike" styleInSelectbox="text-decoration:line-through"/>
  <className de:name="Hochgestellt" name="Superscript" value="sup" styleInSelectbox="vertical-align:super"/>
  <className de:name="Tiefgestellt" name="Subscript" value="sub" styleInSelectbox="vertical-align:sub"/>  
</wEditorStyles>

In der design.css sind die Definitionen auf die Beispiele bezogen wie folgt hinterlegt:

Beispiel: Auszug aus der design.css zu diversen Formatierungsangaben der hier genannten Beispiele

/* ... */
sup                  {font-size:70%;line-height:0;vertical-align:super}
sub                  {font-size:70%;line-height:0;vertical-align:sub}
strike               {text-decoration:line-through}

p.small              {font-size:10px;line-height:12px}

.highlighted {background-color:#FFFF00}
/* ... */

Wichtige Hinweise

Beim Setzen von eigenen Formatierungen, die dann als span-Tag gesetzt werden, müssen Sie ggf. den Textfilter anpassen! Diesen können Sie im BASE Projekt über die Projektkonfiguration im Block "Texte" zum Feld "Filter, der beim Aktualisieren ausgeführt wird" definieren. Zur Einstellung "CSS-Style Angaben und Markup filtern" müssen Sie dann noch das span-Tag als ausgeschlossenes Tag hinzufügen, z.B.: deleteTagsExcept(ul|ol|li|u|em|i|img|a|strong|b|span 

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG