Dodaj style marki i przyciski do edytora tekstu.

Poznaj DXPR BuilderZarządzaj witrynąDopasuj do marki

Gdy redaktorzy klikną w tekst w kreatorze DXPR, pojawia się pasek narzędzi. Jego listę Styles możesz wypełnić stylami marki, na przykład akapitem lead albo wyróżnioną frazą. Możesz też wybrać przyciski widziane przez każdą rolę. Redaktorzy nadają wtedy wygląd marki jednym kliknięciem zamiast ustawiać rozmiary i kolory ręcznie. Czcionki pochodzą z motywu; zobacz własne czcionki.

Zanim zaczniesz

  • Do edycji stylów potrzebujesz Administer DXPR Builder configuration.
  • Do edycji przycisków paska narzędzi potrzebujesz Administer dxpr builder profile.
  • Każdy styl wymaga CSS za sobą. Klasy Bootstrap 5, takie jak lead, działają, gdy strona wczytuje Bootstrap 5. Własne klasy wymagają reguły w motywie; zobacz własny CSS.

Konfiguracja

  1. Przejdź do DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings).
  2. Rozwiń Text Editor. Pole Custom styles już wymienia style dostarczane z kreatorem DXPR, po jednym w wierszu.
  3. Dodaj jeden wiersz na styl w formacie Label=element.class i usuń wiersze, których nie chcesz.
  4. Kliknij Save settings.
  5. Otwórz stronę w kreatorze albo przeładuj ją, jeśli jest otwarta, i kliknij w tekst.
  6. Kliknij Styles na pasku narzędzi i wybierz swój styl.

Te wiersze dodają cztery style:

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

Każdy wiersz ma trzy części:

  • Słowo label przed = to nazwa widziana przez redaktorów na liście.
  • Słowo element po = decyduje, co styl obejmuje. Element blokowy, na przykład p, h2 albo blockquote, styluje cały akapit albo nagłówek. Element osadzony, na przykład span, mark albo code, otacza tylko zaznaczone słowa.
  • Każda klasa następuje po kropce. Dodaj więcej klas kolejnymi kropkami, jak w Callout powyżej.

Nazwy elementów używają tylko liter i cyfr. Nazwy klas używają liter, cyfr, myślników i podkreśleń. Aby odzyskać wbudowaną listę, opróżnij pole i zapisz.

Przyciski paska narzędzi dla roli

  1. Przejdź do DXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile) i kliknij Edit obok profilu dla roli.
  2. Rozwiń Text editor buttons (inline editing). Zaznacz przyciski dla tekstu edytowanego na stronie.
  3. Rozwiń Text editor buttons (modal editing). Zaznacz przyciski dla pól tekstowych w oknie ustawień.
  4. Kliknij Save.

Edycja osadzona obejmuje elementy Text, Alert i Blockquote. Trzymaj zaznaczone Font style w obu grupach, aby pokazać własne style; to nazwa profilu dla listy Styles. Jeśli odznaczysz każdy przycisk grupy, pasek wraca do wbudowanego zestawu. Profile użytkowników wyjaśniają, który profil dotyczy kogo.

Co widzisz

Styles na pasku narzędzi otwiera panel z dwiema grupami. Block styles zawiera style dla całych akapitów i nagłówków, Text styles dla zaznaczonych słów. Po wybraniu stylu przycisk pokazuje jego nazwę albo Multiple styles, gdy stosuje się kilka.

Pasek narzędzi tekstu elementu Text, którego przycisk Styles mówi Lead, nad akapitem z kursorem, ustawionym teraz w większym stylu Lead nad zwykłym akapitem

Edytor zapisuje element i jego klasy w HTML strony, więc odwiedzający widzą identyczny wygląd. Styl blokowy jest aktywny tylko we własnym elemencie: Sassy Title wymaga kursora w Heading 1.

Ustawienia

Wszystkie 36 przycisków pojawiają się w obu grupach. Nowy profil zaczyna z zaznaczonymi:

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

Użytkownicy, których role nie pasują do żadnego włączonego profilu, dostają wbudowane paski narzędzi. Osadzony to Bold, Italic, Remove format, HTML block format, Font style, obie listy, Link, Image, Table, Undo i Redo. Modalny pasek dodaje przyciski podkreślenia, przekreślenia, skryptów, wyrównania, wcięć, kolorów i rozmiaru. Dodaje też Block quote, Horizontal rule, Character map, Source code i Show blocks. Gdy AI jest włączone, oba dostają dwa przyciski AI.

Font family oferuje standardowe bezpieczne czcionki CKEditor, nie czcionki twojego motywu.

Jeśli nie widzisz swojego stylu

  • Lista Styles pokazuje tylko wbudowane style. Jeden wiersz łamie format albo pusty wiersz znajduje się między dwoma stylami, więc kreator DXPR ignoruje całą listę. Popraw ją w Text Editor w /admin/dxpr_studio/dxpr_builder/settings i zapisz.
  • Twój styl jest wyszarzony. Styl blokowy działa tylko we własnym elemencie: h1.sassy-title wymaga Heading 1. Najpierw zmień blok listą nagłówków albo zdefiniuj styl dla p.
  • Brak przycisku Styles na pasku narzędzi. Profil edytora ma odznaczone Font style. Zaznacz je w obu grupach przycisków w /admin/dxpr_studio/dxpr_builder/profile.
  • Styl się stosuje, ale tekst wygląda tak samo. Motyw nie ma CSS dla klasy albo Bootstrap 5 nie jest wczytany. Dodaj regułę do motywu albo ustaw Sideload Bootstrap files na Bootstrap 5 w Bootstrap na stronie General Settings.
  • Redaktorzy widzą styl, odwiedzający nie. Apply text format filters to frontend content jest włączone w Text Filters, a format tekstu pola usuwa atrybuty class. Wyłącz opcję albo nadaj polu format zachowujący klasy; zobacz Odwiedzający widzą coś innego.

Co dalej?