文档AEM 6.5用户指南

通用编辑器 universal-editor

Last update: Tue Nov 19 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 开发人员

了解通用编辑器的灵活性，以及它如何帮助您使用AEM 6.5增强Headless体验。

概述 overview

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

  • 由于通用编辑器支持对所有形式的AEM Headless内容进行相同一致的可视化编辑，因此作者将受益于通用编辑器的灵活性。
  • 开发人员受益于通用编辑器的多功能性，因为它也支持实施之间的真正分离。 它允许开发人员利用他们选择的几乎任何框架或架构，而无需施加任何SDK或技术限制。

有关更多详细信息，请参阅通用编辑器🔗上的AEM as a Cloud Service文档。

架构 architecture

Universal Editor是一项与AEM配合使用的服务，用于无头创作内容。

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

使用通用编辑器的创作流

设置 setup

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

  1. 更新和配置您的AEM创作实例。
  2. 设置本地通用编辑器服务。
  3. 调整您的Dispatcher以允许Universal Editor服务。

完成设置后，您可以检测应用程序以使用通用编辑器。

更新AEM update-aem

要将AEM通用编辑器与AEM 6.5结合使用，需要Service Pack 21或22以及适用于的功能包。

应用最新的Service Pack latest

确保您至少运行的是AEM 6.5的Service Pack 21或22。您可以从Software Distribution.下载最新的Service Pack

安装通用编辑器功能包 feature-pack

安装Software Distribution上提供的适用于AEM 6.5 **的**​通用编辑器功能包。

如果您已经在运行Service Pack 23或更高版本，则不需要使用该功能包。

配置服务 configure-services

功能包会安装大量需要额外配置的新包。

为login-token Cookie设置SameSite属性。 samesite-attribute

  1. 打开Configuration Manager。
    • http://<host>:<port>/system/console/configMgr
  2. 在列表中找到​ AdobeGranite令牌身份验证处理程序，然后单击​ 更改配置值。
  3. 在对话框中，将登录令牌Cookie (token.samesite.cookie.attr)值的 SameSite属性更改为Partitioned。
  4. 单击​ 保存。

删除SAMEORIGIN标头X-Frame选项。 sameorigin

  1. 打开Configuration Manager。
    • http://<host>:<port>/system/console/configMgr
  2. 在列表中找到​ Apache Sling主Servlet，然后单击​ 编辑配置值。
  3. 从​ 其他响应标头 ​属性(sling.additional.response.headers)中删除X-Frame-Options=SAMEORIGIN值（如果存在）。
  4. 单击​ 保存。

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

  1. 打开Configuration Manager。
    • http://<host>:<port>/system/console/configMgr
  2. 在列表中找到​ AdobeGranite查询参数身份验证处理程序，然后单击​ 编辑配置值。
  3. 在​ 路径 ​字段(path)中，添加要启用的/。
    • 空值将禁用身份验证处理程序。
  4. 单击​ 保存。

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

  1. 打开Configuration Manager。

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

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

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

    • 在​ Universal Editor Opening Mapping ​字段中，提供打开Universal Editor的路径。
    • 在应由通用编辑器打开的​ Sling：resourceTypes ​字段中，提供由通用编辑器直接打开的资源的列表。

  4. 单击​ 保存。

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的Externalizer项没有架构，如localhost:4502
  • author：没有架构的作者的Externalizer条目，如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. 从Software Distribution下载并解压缩最新的通用编辑器服务

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

  4. 运行universal-editor-service.cjs

更新Dispatcher update-dispatcher

如果配置了AEM并且运行了本地Universal Editor服务，则需要在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一起使用时将会应用以下更改。

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

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

  • 通用编辑器服务端点必须通过meta标记公告。

    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支持所需的必要更改。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2