So setzen Sie eigene Formatierungen für Textfelder

Navigation

Veröffentlichungsdatum: 15. September 2015
Änderungsdatum: 25. Juni 2021

text textfeld wysiwyg formatierung klasse

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

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.
In der BASE Classic ist dies meist die design.css, z.B. /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/design.css).
In der BASE Mobile First wird dies in der Regel in der html.scss vorgenommen.

Beispiel: Auszug aus der /[IHR-LAYOUT-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" 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="Überschrift 4" en:name="Subline 4" name="Subline 4" value="h4.none"/>
  
  <!--
  <className de:name="Zitatblock" en:name="Blockquote" name="Blockquote" value="blockquote"/>
  -->
  
  <className de:name="Kleiner Text" en:name="Text Small" name="Text" value="p.small" styleInSelectbox="font-size:0.5rem;line-height:100%;"/>           
  <className de:name="Normaler Text" en:name="Text" name="Text" value="p"/>  
  <className de:name="Hervorgehoben" name="Highlighted" value="highlighted" styleInSelectbox="background-color:yellow;"/>
  <className de:name="Abgesoftet" name="Light" value="soft" styleInSelectbox="color:#c0c0c0;"/>  
  
  <className de:name="Hochgestellt" name="Superscript" value="sup" styleInSelectbox="vertical-align:super;"/>  
  <!--  
  <className de:name="Durchgestrichen" name="Strikethrough" value="s" styleInSelectbox="text-decoration:line-through;"/>
  <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 html.scss 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:0.5rem;
  line-height:100%;
}

.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