---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/development/architecture'
title: '架构 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:45:16+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  DXPR Builder 由三部分组成：PHP 字段格式化器、在浏览器中运行的编辑器，以及编辑器调用来保存和获取数据的一组路由。本页介绍它们如何配合。
  字段格式化器
  内容是存放在普通 Drupal 文本字段（text、text_long 或 text_with_summary）中的 HTML。当字段的视图显示使用 DXPR Builder 格式化器（dxpr_builder_text，位于 src/Plugin/Field/FieldFormatter/DxprBuilderFormatter.php）时，字段变为可编辑。
  以下条件全满足时，格式化器才加载编辑器：
tags:
  - 'Architectuur en API’s'
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 由三部分组成：PHP 字段格式化器、在浏览器中运行的编辑器，以及编辑器调用来保存和获取数据的一组路由。本页介绍它们如何配合。
        字段格式化器
        内容是存放在普通 Drupal 文本字段（text、text_long 或 text_with_summary）中的 HTML。当字段的视图显示使用 DXPR Builder 格式化器（dxpr_builder_text，位于 src/Plugin/Field/FieldFormatter/DxprBuilderFormatter.php）时，字段变为可编辑。
        以下条件全满足时，格式化器才加载编辑器：
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:45:16+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/development/architecture'
      articleSection: 'Architectuur en API’s'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/development/architecture'
      description: |-
        DXPR Builder 由三部分组成：PHP 字段格式化器、在浏览器中运行的编辑器，以及编辑器调用来保存和获取数据的一组路由。本页介绍它们如何配合。
        字段格式化器
        内容是存放在普通 Drupal 文本字段（text、text_long 或 text_with_summary）中的 HTML。当字段的视图显示使用 DXPR Builder 格式化器（dxpr_builder_text，位于 src/Plugin/Field/FieldFormatter/DxprBuilderFormatter.php）时，字段变为可编辑。
        以下条件全满足时，格式化器才加载编辑器：
      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) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Architectuur en API’s](/hc/documentation/learn-dxpr-builder/extend/architecture) # 架构.

 Learn DXPR BuilderExtendArchitectuur en API’s

   ## In this guide

DXPR Builder 由三部分组成：PHP 字段格式化器、在浏览器中运行的编辑器，以及编辑器调用来保存和获取数据的一组路由。本页介绍它们如何配合。

## 字段格式化器

内容是存放在普通 Drupal 文本字段（`text`、`text_long` 或 `text_with_summary`）中的 HTML。当字段的视图显示使用 **DXPR Builder** 格式化器（`dxpr_builder_text`，位于 `src/Plugin/Field/FieldFormatter/DxprBuilderFormatter.php`）时，字段变为可编辑。

以下条件全满足时，格式化器才加载编辑器：

- 查看者是计费用户：user 1，或拥有 `edit with dxpr builder` 且未被排除 DXPR Builder 编辑的活动账户；
- 查看者有权更新该实体；
- 账户有邮箱；
- 许可证的用户和内容额度未超；
- 网站不在许可证服务器的黑名单上，且页面不是修订页面。

其他人得到处理后的 HTML：路径令牌展开，Drupal 区块和视图渲染进占位符，`data-az*` 编辑器属性移除，内容需要的库附加。已登录用户的输出不缓存（`max-age` 0），因为它带有按用户的设置。

## 编辑器

编辑器是一组 JavaScript 文件，以 `dxpr_builder/editor.builder` 库加载。它们来自 DXPR 的 CDN，或模块自己的 `dxpr_builder/` 文件夹（其中有本地构建时）；General Settings 上的 **Asset source** 设置只在那时出现。编辑器将字段的 HTML 解析为元素对象树，保存时写回 HTML。

元素类型来自 `dxpr_builder/build/` 中的两处：

| 文件夹 | 元素类型 |
|---|---|
| `dxpr-builder/core-elements/` | Container、Section、Row、Column、Tabs 及其 tab、toggle 和 slide 面板 |
| `dxpr-elements/elements/` | 内容元素，以及 Collapsibles、Carousel 和 Positioned Layers 布局元素 |

每个元素将设置保存在自己的 HTML 中：`data-azat-*` 属性、类和内联样式。存放的 HTML 是布局的唯一记录；没有单独的布局存储。[自定义元素](/zh-hans/hc/documentation/learn-dxpr-builder/development/custom-elements)展示了格式。

### 解析已有 HTML

没有构建器属性的标记在编辑器加载时映射为元素。Bootstrap 容器、行和列变成版块、行和列。识别出的组件变成相应元素，例如按钮、提示框、卡片、块引用、图片、图标、进度条、选项卡和折叠。文本、表格和其他内联标记变成 Text 元素，`<iframe>` 变成 HTML 元素。零散的 `<script>` 和 `<style>` 标签及注释丢弃。规则在 `dxpr-builder/base-element/parse-html.js` 中。

## 编辑器调用的路由

编辑器通过 `/dxpr_builder/ajax` 保存，通过 `/dxpr_builder/ajax/file_upload` 上传文件，通过 `/dxpr_builder/ajax/ai/*` 使用 AI。大多数路由检查计费用户访问检查和 CSRF 令牌；带访问要求的完整列表见 [API 参考](/zh-hans/hc/documentation/learn-dxpr-builder/development/api#editor-routes)。

## 配置实体

| 实体类型 | 配置前缀 | 存放 |
|---|---|---|
| `dxpr_builder_page_template` | `dxpr_builder.page_template` | 整页布局 |
| `dxpr_builder_user_template` | `dxpr_builder.user_template` | 编辑人员保存待重复使用的版块 |
| `dxpr_builder_profile` | `dxpr_builder.dxpr_builder_profile` | 按角色限制元素、区块、视图、模板、图标集和文本编辑器按钮 |

## 许可证检查

产品密钥是 JWT。`DxprBuilderLicenseService` 将它发送到 DXPR 许可证服务器，服务器返回许可证状态及其用户和内容额度；结果缓存。没有产品密钥时适用免费套餐：一个用户和 100 个内容项。该服务还保持服务器上本站编辑人员列表的同步。