在文本编辑器中添加品牌样式和按钮.
当编辑人员点击 DXPR Builder 中的文本时，会出现工具栏。您可以用品牌样式填充其 Styles 列表，例如引导段落或高亮短语。您还可以选择每个角色看到的按钮。编辑人员一键套用品牌外观，不用手工设置大小和颜色。字体来自主题；请参阅 自定义字体。
开始之前
- 编辑样式需要 Administer DXPR Builder configuration 权限。
- 编辑工具栏按钮需要 Administer dxpr builder profile 权限。
- 每个样式背后都需要 CSS。Bootstrap 5 的类（如
lead）在页面加载 Bootstrap 5 时可用。自己的类需要在主题中有规则；请参阅 自定义 CSS。
设置
- 前往 DXPR Studio > DXPR Builder > General Settings (
/admin/dxpr_studio/dxpr_builder/settings)。 - 展开 Text Editor。Custom styles 框中已按每行一条列出 DXPR Builder 自带的样式。
- 按
Label=element.class格式每行添加一条样式，删除不需要的行。 - 点击 Save settings。
- 在构建器中打开页面（已打开则重新加载），点击进入一段文本。
- 点击工具栏上的 Styles 并选择您的样式。
以下几行添加了四种样式：
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
每行有三个部分：
- 这个 label 写在
=之前，是编辑人员在列表中看到的名称。 - 这个 element 在
=之后，决定样式覆盖的范围。p、h2或blockquote等块元素装饰整个段落或标题。span、mark或code等内联元素只包裹选中的词。 - 每个 class 跟在点后面。像上文
Callout一样，用更多点添加更多类。
元素名只用字母和数字。类名用字母、数字、连字符和下划线。要恢复自带列表，请清空输入框并保存。
按角色配置工具栏按钮
- 前往 DXPR Studio > DXPR Builder > User Profiles (
/admin/dxpr_studio/dxpr_builder/profile)，点击该角色档案旁边的 Edit。 - 展开 Text editor buttons (inline editing)。勾选在页面上编辑文本用的按钮。
- 展开 Text editor buttons (modal editing)。勾选设置对话框中文本框用的按钮。
- 点击 Save。
内联编辑覆盖 Text、Alert 和 Blockquote 元素。请在两个分组中保持 Font style 勾选，以显示自定义样式；它是档案中对 Styles 列表的称呼。如果取消勾选某分组的所有按钮，该工具栏回退到内置组合。用户档案解释了哪个档案适用于谁。
您会看到的内容
Styles（该工具栏上）打开带两个分组的面板。Block styles 存放整段和标题的样式，Text styles 存放选中词的样式。选择样式后，按钮显示其名称；多个适用时显示 Multiple styles。
编辑器将元素及其类保存在页面的 HTML 中，因此访客看到同样的外观。块样式只在自己的元素中有效：Sassy Title 需要光标在 Heading 1 中。
设置
全部 36 个按钮出现在两个分组中。新档案默认勾选以下按钮：
| 按钮 | 机器名 | 内联默认 | 弹窗默认 |
|---|---|---|---|
| AI Assistant, AI Tone of Voice | aiAgentButton, aiAgentToneButton |
yes | yes |
| Bold, Italic | bold, italic |
yes | yes |
| Underline, Strike through | underline, strikethrough |
yes | |
| Superscript, Subscript | superscript, subscript |
yes | |
| Remove format | removeFormat |
yes | yes |
| Text color | fontColor |
yes | yes |
| Background color | fontBackgroundColor |
||
| Font size | fontSize |
yes | yes |
| Font family | fontFamily |
||
| HTML block format | heading |
yes | yes |
| Font style (the Styles list) | style |
yes | yes |
| Align left, Center, Align right, Justify | alignment:left, alignment:center, alignment:right, alignment:justify |
yes | yes |
| Insert/Remove Bullet list | bulletedList |
yes | yes |
| Insert/Remove Numbered list | numberedList |
yes | |
| Outdent, Indent | outdent, indent |
yes | |
| Block quote | blockQuote |
yes | |
| Link, Image, Table | link, insertImage, insertTable |
yes | yes |
| Horizontal rule, Character map | horizontalLine, specialCharacters |
yes | |
| Source code, Show blocks | sourceEditing, showBlocks |
yes | |
| Select all, Replace, Accessibility help | selectAll, findAndReplace, accessibilityHelp |
||
| Undo, Redo | undo, redo |
yes | yes |
角色没有匹配已启用档案的用户使用内置工具栏。内联是 Bold、Italic、Remove format、HTML block format、Font style、两个列表、Link、Image、Table、Undo 和 Redo。弹窗工具栏加上划线、删除线、上下标、对齐、缩进、颜色和大小按钮，还加上 Block quote、Horizontal rule、Character map、Source code 和 Show blocks。AI 开启时，两者都有两个 AI 按钮。
Font family 提供 CKEditor 标准的网页安全字体，不是主题的字体。
如果您看不到自己的样式
- Styles 列表只显示自带样式。 某一行破坏了格式，或两个样式之间有空行，DXPR Builder 会忽略整个列表。请在 Text Editor 下修正（
/admin/dxpr_studio/dxpr_builder/settings），并保存。 - 您的样式灰色不可用。 块样式只在自己的元素中有效：
h1.sassy-title需要 Heading 1。请先用标题列表更改块，或为p定义样式。 - 工具栏上没有 Styles 按钮。 编辑器的档案没有勾选 Font style。请在
/admin/dxpr_studio/dxpr_builder/profile的两个按钮分组中勾选它。 - 样式套用了，但文本看起来一样。 主题没有该类的 CSS，或没有加载 Bootstrap 5。请向主题添加规则，或将 Sideload Bootstrap files 设为 Bootstrap 5（General Settings 页面的 Bootstrap 下）。
- 编辑人员看得到样式，访客看不到。 Apply text format filters to frontend content 开启了（Text Filters 下），字段的文本格式移除了
class属性。请关闭该选项，或给字段一个保留类的格式；请参阅 访客看到的内容不同。