文档AEM 6.5用户指南

通用编辑器 universal-editor

Last update: Fri Oct 03 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 适用对象：
  • Experience Manager 6.5

创建对象：

  • 开发人员

了解通用编辑器的灵活性，以及它如何帮助您在 AEM 6.5 中驱动 Headless 体验。

概述 overview

通用编辑器是一个多功能可视化编辑器，是 Adobe Experience Manager Sites 的一部分。它使作者能够对任何 Headless 体验进行所见即所得（WYSIWYG）编辑。

  • 作者可从通用编辑器的灵活性中受益，因为它为所有形式的 AEM Headless 内容提供相同、一致的可视化编辑体验。
  • 开发人员同样能够从通用编辑器的多样性中获益，因为它还支持对实施的真正解耦。它允许开发人员使用他们选择的几乎任何框架或架构，而不会施加任何 SDK 或技术限制。

请参阅 AEM as a Cloud Service 文档中有关通用编辑器的章节，以了解更多详细信息。

架构 architecture

通用编辑器是一项与 AEM 协同工作的服务，用于以 Headless 方式创作内容。

  • 通用编辑器托管在 https://experience.adobe.com/#/aem/editor/canvas 中，可编辑由 AEM 6.5 渲染的页面。
  • 通用编辑器通过 Dispatcher 从 AEM 作者实例中读取 AEM 页面。
  • 运行在与 Dispatcher 相同的主机上的通用编辑器服务会将更改写回 AEM 作者实例。

使用通用编辑器的创作流程

要求 requirements

通用编辑器受到以下环境支持：

本文档重点介绍 AEM 6.5 对通用编辑器的支持。要在 AEM 6.5 中使用通用编辑器，您需要：

  • 安装了服务包 23 或更高版本的 AEM 6.5
    • 服务包 21 和 22 也受支持，但需搭配功能包使用。
  • 正确配置 Dispatcher

设置 setup

要测试通用编辑器，您需要：

  1. 设置本地通用编辑器服务。
  2. 调整 Dispatcher 以允许使用通用编辑器服务。

完成设置后，您即可对应用程序进行接入配置，以使用通用编辑器。

配置服务 configure-services

通用编辑器使用了若干需要额外配置的包。

  1. 打开配置管理器。
    • http://<host>:<port>/system/console/configMgr
  2. 在列表中找到 Adobe Granite 令牌身份验证处理程序，并点击​ 更改配置值。
  3. 在对话框中，将 login-token cookie 的 SameSite 属性（token.samesite.cookie.attr）值修改为 Partitioned。
  4. 单击​ 保存。

移除 SAMEORIGIN 标头中的 X-Frame 选项。 sameorigin

  1. 打开配置管理器。
    • http://<host>:<port>/system/console/configMgr
  2. 在列表中找到 Apache Sling Main Servlet，并点击​ 编辑配置值。
  3. 如果存在，请从X-Frame-Options=SAMEORIGIN 附加响应标头​ 属性（）中删除 sling.additional.response.headers 值。
  4. 单击​ 保存。

配置 Adobe Granite 查询参数身份验证处理程序。 query-parameter

  1. 打开配置管理器。
    • http://<host>:<port>/system/console/configMgr
  2. 在列表中找到 Adobe Granite 查询参数身份验证处理程序，并点击​ 编辑配置值。
  3. 在​ 路径 ​字段（path）中，添加 / 以启用。
    • 如果该字段为空，则会禁用此身份验证处理程序。
  4. 单击​ 保存。

定义应为哪些内容路径或 sling:resourceTypes 打开通用编辑器。 paths

  1. 打开配置管理器。

    • http://<host>:<port>/system/console/configMgr

  2. 在列表中找到​ 通用编辑器 URL 服务，然后点击​ 编辑配置值。

  3. 定义应为哪些内容路径或 sling:resourceTypes 打开通用编辑器。

    • 在​ 通用编辑器打开映射 ​字段中，提供通用编辑器为其打开的路径。
    • 在通用编辑器打开的 Sling:resourceTypes ​字段中，提供通用编辑器直接打开的一个资源列表。

  4. 单击​ 保存。

  5. 检查您的外部化器配置，确保至少已设置了本地、作者和发布三个环境，如下例所示。

    code language-text 
    "local $[env:AEM_EXTERNALIZER_LOCAL;default=http://localhost:4502]",
"author $[env:AEM_EXTERNALIZER_AUTHOR;default=http://localhost:4502]",
"publish $[env:AEM_EXTERNALIZER_PUBLISH;default=http://localhost:4503]"

完成这些配置步骤后，AEM 将按以下顺序为页面打开通用编辑器。

  1. AEM 会检查 Universal Editor Opening Mapping 中的映射，如果内容位于那里定义的任何路径下，就会为其打开通用编辑器。
  2. 如果内容不位于 Universal Editor Opening Mapping 中定义的路径下，AEM 会检查此内容的 resourceType 是否与通用编辑器打开的 Sling:resourceTypes 中定义的类型匹配，如果内容与其中一个类型匹配，就会在 ${author}${path}.html 上为其打开通用编辑器。
  3. 否则，AEM 就打开页面编辑器。

在 Universal Editor Opening Mapping 中，可使用以下变量来定义映射：

  • path：要打开的资源的内容路径
  • localhost：没有架构的用于 localhost 的外部化器条目，例如 localhost:4502
  • author：没有架构的用于作者的外部化器条目，例如 localhost:4502
  • publish：没有架构的用于发布的外部化器条目，例如 localhost:4503
  • preview：没有架构的用于预览的外部化器条目，例如 localhost:4504
  • env：prod、stage、dev 基于已定义的 Sling 运行模式
  • token：QueryTokenAuthenticationHandler 需要查询令牌

映射示例：

  • 打开 AEM 作者上 /content/foo 下的所有页面：

    • /content/foo:${author}${path}.html?login-token=${token}
    • 这会打开 https://localhost:4502/content/foo/x.html?login-token=<token>

  • 打开远程 NextJS 服务器上 /content/bar 下的所有页面，提供所有变量的信息

    • /content/bar:nextjs.server${path}?env=${env}&author=https://${author}&publish=https://${publish}&login-token=${token}
    • 这会打开 https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token>

设置通用编辑器服务 set-up-ue

在更新并配置好 AEM 后，您可以为本地开发和测试搭建本地通用编辑器服务。

  1. 安装 Node.js 版本 >=20。

  2. 从软件分发下载并解压最新的通用编辑器服务

  3. 通过环境变量或 .env 文件配置通用编辑器服务。

  4. 运行 universal-editor-service.cjs

更新 Dispatcher update-dispatcher

在完成 AEM 配置并运行本地 Universal Editor Service 后，您需要在 Dispatcher 中允许该新服务的反向代理。

  1. 修改作者实例的 vhost 文件以包含反向代理。

    code language-html 
    <IfModule mod_proxy.c>
 ProxyPass "/universal-editor" "http://localhost:8080"
 ProxyPassReverse "/universal-editor" "http://localhost:8080"
</IfModule>
    note note
    NOTE
    默认端口为 8080。如果在您的 .env 文件中通过 UES_PORT 参数更改了端口值，则必须在此处相应调整。

  2. 重新启动 Apache。

对应用进行接入配置 instrumentation

在更新 AEM 并运行本地通用编辑器服务后，您可以开始使用通用编辑器编辑 Headless 内容。

但是，您的应用程序必须进行接入配置才能充分利用通用编辑器。这需要在页面中添加元标记，以指示编辑器如何以及在何处对内容进行持久化。有关此接入配置的详细信息，请参阅 AEM as a Cloud Service 的通用编辑器文档。

请注意，在参考 AEM as a Cloud Service 的通用编辑器文档时，如果使用 AEM 6.5，则需进行以下调整：

  • 元标记中的协议必须为 aem65，而不是 aem。

    code language-html 
    <meta name="urn:adobe:aue:system:aemconnection" content={`aem65:${getAuthorHost()}`}/>

  • 必须通过元标记来声明通用编辑器服务的端点。

    code language-html 
    <meta name="urn:adobe:aue:config:service" content={`${getAuthorHost()}/universal-editor`}/>

  • 在组件定义的 plugins 部分中，必须使用 aem65 而不是 aem。

TIP
如需完整的开发人员入门指南，请参阅 AEM as a Cloud Service 文档中的《面向 AEM 开发人员的通用编辑器概述》，同时注意本节中提到的针对 AEM 6.5 支持所需进行的调整。

AEM 6.5 与 AEM as a Cloud Service 的差异 differences

AEM 6.5 中的通用编辑器在整体上与 AEM as a Cloud Service 的工作方式相同，其中包括用户界面和大部分配置。但仍有一些差异需要注意。

  • 在 6.5 中，通用编辑器仅支持 Headless 用例。
  • 在 6.5 中，通用编辑器的设置略有不同（如当前文档所述）。
  • 在 6.5 中，通用编辑器使用的资产选择器和内容片段选择器与 AEM as a Cloud Service 不同。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2