--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/text-editor' title: '在文本编辑器中添加品牌样式和按钮 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:42:19+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: '当编辑人员点击 DXPR Builder 中的文本时，会出现工具栏。您可以用品牌样式填充其 Styles 列表，例如引导段落或高亮短语。您还可以选择每个角色看到的按钮。编辑人员一键套用品牌外观，不用手工设置大小和颜色。字体来自主题；请参阅 自定义字体。' tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 在文本编辑器中添加品牌样式和按钮 description: '当编辑人员点击 DXPR Builder 中的文本时，会出现工具栏。您可以用品牌样式填充其 Styles 列表，例如引导段落或高亮短语。您还可以选择每个角色看到的按钮。编辑人员一键套用品牌外观，不用手工设置大小和颜色。字体来自主题；请参阅 自定义字体。' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:42:19+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/text-editor' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/text-editor' description: '当编辑人员点击 DXPR Builder 中的文本时，会出现工具栏。您可以用品牌样式填充其 Styles 列表，例如引导段落或高亮短语。您还可以选择每个角色看到的按钮。编辑人员一键套用品牌外观，不用手工设置大小和颜色。字体来自主题；请参阅 自定义字体。' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # 在文本编辑器中添加品牌样式和按钮. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [用主题 CSS 定制构建器内容样式](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css) - [实用类](/zh-hans/hc/documentation/learn-dxpr-builder/customization/utility-classes) - [选择每个角色在构建器中看到的内容](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) 当编辑人员点击 DXPR Builder 中的文本时，会出现工具栏。您可以用品牌样式填充其 **Styles** 列表，例如引导段落或高亮短语。您还可以选择每个角色看到的按钮。编辑人员一键套用品牌外观，不用手工设置大小和颜色。字体来自主题；请参阅 [自定义字体](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-fonts)。 ## 开始之前 - 编辑样式需要 **Administer DXPR Builder configuration** 权限。 - 编辑工具栏按钮需要 **Administer dxpr builder profile** 权限。 - 每个样式背后都需要 CSS。Bootstrap 5 的类（如 `lead`）在页面加载 Bootstrap 5 时可用。自己的类需要在主题中有规则；请参阅 [自定义 CSS](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css)。 ## 设置 1. 前往 **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`)。 2. 展开 **Text Editor**。**Custom styles** 框中已按每行一条列出 DXPR Builder 自带的样式。 3. 按 `Label=element.class` 格式每行添加一条样式，删除不需要的行。 4. 点击 **Save settings**。 5. 在构建器中打开页面（已打开则重新加载），点击进入一段文本。 6. 点击工具栏上的 **Styles** 并选择您的样式。 以下几行添加了四种样式： ```text 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` 一样，用更多点添加更多类。 元素名只用字母和数字。类名用字母、数字、连字符和下划线。要恢复自带列表，请清空输入框并保存。 ## 按角色配置工具栏按钮 1. 前往 **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`)，点击该角色档案旁边的 **Edit**。 2. 展开 **Text editor buttons (inline editing)**。勾选在页面上编辑文本用的按钮。 3. 展开 **Text editor buttons (modal editing)**。勾选设置对话框中文本框用的按钮。 4. 点击 **Save**。 内联编辑覆盖 Text、Alert 和 Blockquote 元素。请在两个分组中保持 **Font style** 勾选，以显示自定义样式；它是档案中对 **Styles** 列表的称呼。如果取消勾选某分组的所有按钮，该工具栏回退到内置组合。[用户档案](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)解释了哪个档案适用于谁。 ## 您会看到的内容 **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` 属性。请关闭该选项，或给字段一个保留类的格式；请参阅 [访客看到的内容不同](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/visitors-see-something-else)。 ## 接下来做什么？ - [自定义 CSS](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css)：样式类背后的主题规则。 - [实用类](/zh-hans/hc/documentation/learn-dxpr-builder/customization/utility-classes)：在 **HTML classes** 列表中为整个元素提供类。 - [用户档案](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)：档案控制的其他所有内容。