Veröffentlichungsdatum: 15. September 2015
Änderungsdatum: 10. Juli 2024
text textfeld wysiwyg formatierungen anpassen klasse
Dieser Artikel beschreibt, wie Sie für WYSIWYG-Felder eigene Textformatierungen zur Auswahl anbieten.
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:
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.
<?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:
/* ... */ 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} /* ... */
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