Markenstile und Buttons in den Texteditor bringen.

DXPR Builder lernenWebsite verwaltenMarke umsetzen

Wenn Bearbeitende in DXPR Builder in einen Text klicken, erscheint eine Symbolleiste. Sie können ihre Styles-Liste mit den Stilen Ihrer Marke füllen, etwa einem Lead-Absatz oder einer hervorgehobenen Phrase. Sie können auch wählen, welche Schaltflächen jede Rolle sieht. Bearbeitende wenden dann einen Marken-Look mit einem Klick an, statt Größen und Farben von Hand zu setzen. Fonts kommen aus Ihrem Theme; siehe Eigene Fonts.

Bevor Sie beginnen

  • Um Stile zu bearbeiten, brauchen Sie Administer DXPR Builder configuration.
  • Um Symbolleisten-Schaltflächen zu bearbeiten, brauchen Sie Administer dxpr builder profile.
  • Jeder Stil braucht CSS dahinter. Bootstrap-5-Klassen wie lead funktionieren, wenn die Seite Bootstrap 5 lädt. Eigene Klassen brauchen eine Regel im Theme; siehe Eigenes CSS.

Einrichtung

  1. Gehen Sie zu DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings).
  2. Klappen Sie Text Editor auf. Das Feld Custom styles listet bereits die Stile, die DXPR Builder mitbringt, einen pro Zeile.
  3. Fügen Sie pro Stil eine Zeile in der Form Label=element.class hinzu, und löschen Sie die Zeilen, die Sie nicht wollen.
  4. Klicken Sie auf Save settings.
  5. Öffnen Sie eine Seite im Builder, oder laden Sie sie neu, wenn sie offen ist, und klicken Sie in einen Text.
  6. Klicken Sie in der Symbolleiste auf Styles und wählen Sie Ihren Stil.

Diese Zeilen fügen vier Stile hinzu:

Lead=p.lead
Event date=span.text-primary.fw-semibold
Callout=p.border-start.border-primary.border-4.ps-3
Sassy Title=h1.sassy-title

Jede Zeile hat drei Teile:

  • Das label vor = ist der Name, den Bearbeitende in der Liste sehen.
  • Das element nach = entscheidet, was der Stil erfasst. Ein Blockelement wie p, h2 oder blockquote stylt einen ganzen Absatz oder eine Überschrift. Ein Inline-Element wie span, mark oder code umschließt nur die markierten Worte.
  • Jede class folgt einem Punkt. Fügen Sie weitere Klassen mit weiteren Punkten hinzu, wie bei Callout oben.

Elementnamen nutzen nur Buchstaben und Ziffern. Klassennamen nutzen Buchstaben, Ziffern, Bindestriche und Unterstriche. Um die mitgebrachte Liste zurückzuholen, leeren Sie das Feld und speichern.

Symbolleisten-Schaltflächen pro Rolle

  1. Gehen Sie zu DXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile) und klicken Sie neben dem Profil der Rolle auf Edit.
  2. Klappen Sie Text editor buttons (inline editing) auf. Aktivieren Sie die Schaltflächen für Text, den Sie auf der Seite bearbeiten.
  3. Klappen Sie Text editor buttons (modal editing) auf. Aktivieren Sie die Schaltflächen für Textfelder in einem Einstellungsdialog.
  4. Klicken Sie auf Save.

Inline-Bearbeitung erfasst die Elemente Text, Alert und Blockquote. Halten Sie Font style in beiden Gruppen aktiviert, um Ihre eigenen Stile zu zeigen; es ist der Profilname für die Styles-Liste. Wenn Sie jede Schaltfläche einer Gruppe deaktivieren, fällt diese Symbolleiste auf den eingebauten Satz zurück. Benutzerprofile erklärt, welches Profil für wen gilt.

Was Sie sehen

Styles in der Symbolleiste öffnet ein Panel mit zwei Gruppen. Block styles hält die Stile für ganze Absätze und Überschriften, Text styles die für markierte Worte. Nach der Wahl eines Stils zeigt die Schaltfläche seinen Namen, oder Multiple styles, wenn mehrere zutreffen.

Die Textsymbolleiste eines Textelements, dessen Styles-Schaltfläche „Lead“ lautet, über dem Absatz mit dem Cursor darin, nun im größeren Lead-Stil über einem normalen Absatz

Der Editor speichert Element und Klassen im HTML der Seite, daher sehen Besucher denselben Look. Ein Blockstil ist nur in seinem eigenen Element aktiv: Sassy Title braucht den Cursor in einer Heading 1.

Settings

Alle 36 Schaltflächen erscheinen in beiden Gruppen. Ein neues Profil beginnt mit diesen aktivierten:

Schaltfläche Systemname Inline-Standard Modal-Standard
AI Assistant, AI Tone of Voice aiAgentButton, aiAgentToneButton ja ja
Bold, Italic bold, italic ja ja
Underline, Strike through underline, strikethrough ja
Superscript, Subscript superscript, subscript ja
Remove format removeFormat ja ja
Text color fontColor ja ja
Background color fontBackgroundColor
Font size fontSize ja ja
Font family fontFamily
HTML block format heading ja ja
Font style (die Styles-Liste) style ja ja
Align left, Center, Align right, Justify alignment:left, alignment:center, alignment:right, alignment:justify ja ja
Insert/Remove Bullet list bulletedList ja ja
Insert/Remove Numbered list numberedList ja
Outdent, Indent outdent, indent ja
Block quote blockQuote ja
Link, Image, Table link, insertImage, insertTable ja ja
Horizontal rule, Character map horizontalLine, specialCharacters ja
Source code, Show blocks sourceEditing, showBlocks ja
Select all, Replace, Accessibility help selectAll, findAndReplace, accessibilityHelp
Undo, Redo undo, redo ja ja

Bearbeitende, deren Rollen zu keinem aktivierten Profil passen, erhalten die eingebauten Symbolleisten. Inline sind das Bold, Italic, Remove format, HTML block format, Font style, beide Listen, Link, Image, Table, Undo und Redo. Die modale Symbolleiste fügt die Unterstreichungs-, Durchstreichungs-, Hoch-/Tiefstellungs-, Ausrichtungs-, Einzugs-, Farb- und Größenschaltflächen hinzu. Sie fügt außerdem Block quote, Horizontal rule, Character map, Source code und Show blocks hinzu. Wenn KI an ist, erhalten beide die zwei KI-Schaltflächen.

Font family bietet CKEditors websichere Standard-Fonts, nicht die Fonts Ihres Themes.

Wenn Sie Ihren Stil nicht sehen

  • Die Styles-Liste zeigt nur die mitgebrachten Stile. Eine Zeile bricht das Format, oder eine Leerzeile sitzt zwischen zwei Stilen, daher ignoriert DXPR Builder die ganze Liste. Korrigieren Sie sie unter Text Editor auf /admin/dxpr_studio/dxpr_builder/settings und speichern Sie.
  • Ihr Stil ist ausgegraut. Ein Blockstil funktioniert nur in seinem eigenen Element: h1.sassy-title braucht eine Heading 1. Ändern Sie zuerst den Block mit der Überschriftenliste, oder definieren Sie den Stil für p.
  • Es gibt keine Styles-Schaltfläche in der Symbolleiste. Das Profil des Editors hat Font style deaktiviert. Aktivieren Sie es in beiden Schaltflächengruppen unter /admin/dxpr_studio/dxpr_builder/profile.
  • Der Stil greift, aber der Text sieht gleich aus. Das Theme hat kein CSS für die Klasse, oder Bootstrap 5 ist nicht geladen. Fügen Sie die Regel zum Theme hinzu, oder setzen Sie Sideload Bootstrap files auf Bootstrap 5 unter Bootstrap auf der Seite General Settings.
  • Bearbeitende sehen den Stil, Besucher nicht. Apply text format filters to frontend content ist unter Text Filters an, und das Textformat des Felds entfernt class-Attribute. Schalten Sie die Option aus, oder geben Sie dem Feld ein Format, das Klassen behält; siehe Besucher sehen etwas anderes.

Wie geht es weiter?

  • Eigenes CSS: schreiben Sie die Theme-Regeln hinter Ihren Stilklassen.
  • Dienstklassen: Klassen für ganze Elemente in der HTML classes-Liste anbieten.
  • Benutzerprofile: alles Übrige, was ein Profil steuert.