Adobe Experience Manager (AEM)组件 — 基础知识 aem-components-the-basics
开始开发新组件时，您需要了解其结构和配置的基础知识。
此过程包括阅读相关理论并查看标准AEM实例中的各种组件实现。 尽管AEM已转移到新的标准、现代、触屏优化UI，但它继续支持经典UI，这个事实使得后一种方法略微复杂化。
概述 overview
本节将介绍关键概念和问题，并介绍开发您自己的组件时所需的详细信息。
规划 planning
在开始实际配置组件或对其进行编码之前，您应该询问：
-
您到底需要新组件做什么？
- 明确的规范有助于开发、测试和移交的所有阶段。 详细信息可能会随着时间的推移而更改，但规范可以更新（尽管更改也应记录在案）。
-
您是需要从头开始创建组件，还是可以从现有组件继承基础知识？
- 不需要重新发明轮子。
- AEM提供了多种机制，可让您从其他组件定义继承和扩展详细信息，包括覆盖、叠加和 Sling资源合并器.
-
您的组件是否需要逻辑才能选择或处理内容？
- 逻辑应该与用户界面层分开。 HTL旨在帮助确保做到这一点。
-
您的组件是否需要CSS格式？
- CSS格式应与组件定义分开。 定义命名HTML元素的约定，以便您可以通过外部CSS文件修改这些约定。
-
我应该考虑哪些安全方面？
- 请参阅 安全核对清单 — 开发最佳实践 以了解更多详细信息。
触屏优化vs经典UI touch-enabled-vs-classic-ui
在有关开发组件的任何严肃讨论开始之前，您必须知道作者使用的是哪种UI：
- 触屏优化UI
标准用户界面 基于适用于Adobe Experience Cloud的统一用户体验，使用以下底层技术 Coral UI 和 Granite UI. - 经典UI
基于ExtJS技术的用户界面，AEM 6.4已弃用该技术。
请参阅 适用于客户的UI界面Recommendations 以了解更多详细信息。
可以实施组件来支持触屏UI和/或经典UI。 在查看标准实例时，您还会看到最初为经典UI或触屏UI或两者设计的现成组件。
本页介绍了这两个函数的基本知识以及如何识别它们。
内容逻辑和渲染标记 content-logic-and-rendering-markup
Adobe建议将负责标记和呈现的代码与控制用于选择组件内容的逻辑的代码分开。
这一理念得到以下支持 HTL，一种模板化语言，专门用于确保使用真正的编程语言定义底层业务逻辑。 此（可选）逻辑可通过特定命令从HTL调用。 此机制会突出显示为给定视图调用的代码，如有必要，还允许为同一组件的不同视图使用特定逻辑。
HTL与JSP htl-vs-jsp
HTL是AEM 6.0中引入的一种HTML模板语言。
关于是否使用的讨论 HTL 或JSP (Java™ Server Pages)在开发您自己的组件时应简单明了，因为HTL现在是适用于AEM的推荐脚本语言。
HTL和JSP都可用于为经典用户界面和触屏优化UI开发组件。 尽管可能会倾向于认为HTL仅适用于经典UI的触屏UI和JSP，但这是一个误解，并且更多是由于时间的原因。 触屏优化UI和HTL大约在同一时期内合并到了AEM中。 由于HTL现在是推荐语言，因此它被用于新组件，这些组件倾向于用于触屏优化UI。
开发您自己的组件 developing-your-own-components
要为相应的UI创建自己的组件，请参阅（阅读本页后）：
快速入门方法是复制现有组件，然后进行所需的更改。 要了解如何创建自己的组件并将它们添加到段落系统，请参阅：
- 开发组件 （侧重于触屏优化UI）
将组件移动到发布实例 moving-components-to-the-publish-instance
呈现内容的组件必须部署在与内容相同的AEM实例上。 因此，必须在发布实例上部署所有用于在创作实例上创作和渲染页面的组件。 部署后，组件可用于呈现激活的页面。
使用以下工具将组件移至发布实例：
从开始起要识别的组件 components-to-be-aware-of-from-the-start
-
页面:
- AEM具有 页面 组件(
cq:Page)。 - 这是对内容管理很重要的一种特定类型的资源。
- 页面对应于包含您网站内容的网页。
- AEM具有 页面 组件(
-
段落系统：
- 段落系统是网站的一个关键部分，因为它管理着一系列段落。 用于保存和构建保存实际内容的各个组件。
- 您可以在段落系统中创建、移动、复制和删除段落。
- 您还可以选择可在特定段落系统中使用的组件。
- 标准实例中有各种可用的段落系统(例如，
parsys，[responsivegrid](/docs/experience-manager-65/sites-authoring/responsive-layout.md))。
结构 structure
AEM组件的结构强大而灵活，主要考虑因素包括：
- 资源类型
- 组件定义
- 组件的属性和子节点
- 对话框
- 设计对话框
- 组件可用性
- 组件及其创建的内容
资源类型 resource-type
结构的一个关键元素是资源类型。
- 内容结构声明意图。
- 资源类型实现它们。
这是一个抽象，有助于确保即使当外观和感觉随时间变化时，意图仍会随时间而改变。
组件定义 component-definition
组件基础知识 component-basics
组件的定义可细分如下：
-
AEM组件基于 Sling.
-
AEM组件（通常）位于以下位置：
- HTL：
/libs/wcm/foundation/components - JSP：
/libs/foundation/components
- HTL：
-
项目/站点特定的组件（通常）位于以下位置：
/apps/<myApp>/components
-
AEM标准组件定义为
cq:Component并具有关键要素：-
jcr属性：
jcr属性的列表；这些是变量的，有些可能是可选的，但组件节点的基本结构、其属性和子节点由定义。
cq:Component定义 -
资源：
这些定义组件使用的静态元素。
-
脚本：
用于实施组件结果实例的行为。
-
-
根节点：
<mycomponent> (cq:Component)— 组件的层次结构节点。
-
重要属性：
-
jcr:title— 组件标题；例如，在组件浏览器或Sidekick中列出组件时用作标签。 -
jcr:description— 组件的描述；可用作组件浏览器或Sidekick中的鼠标悬停提示。 -
经典UI：
icon.png— 此组件的图标。thumbnail.png— 如果此组件在段落系统中列出，则显示图像。
-
触屏 UI
- 请参阅部分 触屏UI中的组件图标 以了解详细信息。
-
-
重要子节点：
-
cq:editConfig (cq:EditConfig)— 定义组件的编辑属性，并使组件显示在组件浏览器或Sidekick中。注意：如果组件有对话框，它将自动显示在组件浏览器或Sidekick中，即使cq：editConfig不存在也是如此。
-
cq:childEditConfig (cq:EditConfig)— 控制未定义其自身子组件的创作UI方面cq:editConfig. -
触屏优化UI：
cq:dialog(nt:unstructured) — 此组件的对话框。 定义允许用户配置组件和/或编辑内容的界面。cq:design_dialog(nt:unstructured) — 此组件的设计编辑
-
经典UI：
dialog(cq:Dialog) — 此组件的对话框。 定义允许用户配置组件和/或编辑内容的界面。design_dialog(cq:Dialog) — 此组件的设计编辑。
-
触屏UI中的组件图标 component-icon-in-touch-ui
组件的图标或缩写在开发人员创建组件时通过组件的JCR属性定义。 这些属性的计算顺序如下，并且使用找到的第一个有效属性。
-
cq:icon— 字符串属性，指向 Coral UI库 在组件浏览器中显示- 使用Coral图标的HTML属性的值。
-
abbreviation— 字符串属性，用于自定义组件浏览器中组件名称的缩写-
缩写应限制为两个字符。
-
提供空字符串会构建由前两个字符组成的缩写
jcr:title属性。- 例如，“Im”表示“图像”
- 本地化的标题用于构建缩写。
-
仅组件具备以下条件时才会翻译缩写
abbreviation_commentI18n属性，然后用作翻译提示。
-
-
cq:icon.png或cq:icon.svg— 此组件的图标，显示在组件浏览器中- 20 x 20像素是标准组件的图标大小。
- 较大的图标会被缩小（客户端）。
- 推荐的颜色为rgb(112， 112， 112) > #707070
- 标准组件图标的背景透明。
- 仅
.png和.svg文件受支持。 - 如果通过Eclipse插件从文件系统导入，则文件名必须转义为
_cq_icon.png或_cq_icon.svg例如。 .png先例优先.svg如果两者都存在
- 20 x 20像素是标准组件的图标大小。
如果以上属性均不( cq:icon， abbreviation， cq:icon.png，或 cq:icon.svg)，具体情况如下：
- 系统将在超级组件上搜索以下内容的相同属性
sling:resourceSuperType属性。 - 如果在超级组件级别上未找到任何内容或发现空缩写，则系统将根据
jcr:title当前组件的属性。
要取消从超级组件继承图标，请将设置为空 abbreviation 组件上的属性将还原为默认行为。
此 组件控制台 显示如何定义特定组件的图标。
SVG图标示例 svg-icon-example
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<ellipse cx="5" cy="5" rx="3" ry="3" fill="#707070"/>
<ellipse cx="15" cy="5" rx="4" ry="4" fill="#707070"/>
<ellipse cx="5" cy="15" rx="5" ry="5" fill="#707070"/>
<ellipse cx="15" cy="15" rx="4" ry="4" fill="#707070"/>
</svg>
组件的属性和子节点 properties-and-child-nodes-of-a-component
定义组件所需的许多节点/属性对这两个UI都是通用的，并且这些节点/属性之间的差异保持独立，以便您的组件可以在两个环境中工作。
组件是类型的节点 cq:Component 和具有以下属性和子节点：
如果您查看 文本 组件（任一版本）中，您可以看到以下元素：
-
HTL (
/libs/wcm/foundation/components/text)
-
JSP (
/libs/foundation/components/text)
特别感兴趣的物业包括：
jcr:title— 组件的标题；这可用于识别组件，例如，它显示在组件浏览器或sidekick内的组件列表中jcr:description— 组件的描述；可以用作sidekick中组件列表的鼠标悬停提示sling:resourceSuperType：表示扩展组件时（通过覆盖定义）的继承路径
特别感兴趣的子节点包括：
-
cq:editConfig(cq:EditConfig) — 此选项可控制可视化方面；例如，它可以定义条形图或小部件的外观，或者可以添加自定义控件 -
cq:childEditConfig(cq:EditConfig) — 这控制没有自己的定义的子组件的可视化方面 -
触屏优化UI：
cq:dialog(nt:unstructured) — 定义用于编辑此组件内容的对话框cq:design_dialog(nt:unstructured) — 指定此组件的设计编辑选项
-
经典UI：
dialog(cq:Dialog) — 定义用于编辑此组件内容的对话框（特定于经典UI）design_dialog(cq:Dialog) — 指定此组件的设计编辑选项icon.png— 用作Sidekick中组件的图标的图形文件thumbnail.png— 从Sidekick拖动组件时用作组件缩略图的图形文件
对话框 dialogs
对话框是组件的关键元素，因为它们为作者提供了一个界面来配置该组件并提供输入内容。
根据组件的复杂性，您的对话框可能需要一个或多个选项卡 — 缩短对话框并对输入字段进行排序。
对话框定义特定于UI：
- 为兼容起见，当没有为触控式UI定义对话框时，触控式UI可以使用经典UI对话框的定义。
- 此 AEM现代化工具 此外，还提供了用于帮助您扩展/转换仅为经典UI定义对话框的组件。
-
触屏优化UI
-
cq:dialog(nt:unstructured)节点：-
定义用于编辑此组件内容的对话框
-
特定于触屏UI
-
是使用Granite UI组件定义的
-
具有属性
sling:resourceType，作为标准Sling内容结构 -
可以具有属性
helpPath定义在帮助图标(?图标)时，不会显示重复项。- 对于开箱即用的组件，这通常会引用文档中的页面。
- 如果否
helpPath指定时，将显示默认URL（文档概述页面）。
-
在该对话框中，将定义各个字段：
-
-
经典 UI
-
dialog(cq:Dialog)节点-
定义用于编辑此组件内容的对话框
-
特定于经典UI
-
使用ExtJS构件定义
-
具有属性
xtype，表示ExtJS -
可以具有属性
helpPath定义在以下情况下访问的上下文相关帮助资源：绝对路径或相对路径 帮助 按钮处于选中状态。- 对于开箱即用的组件，这通常会引用文档中的页面。
- 如果否
helpPath指定时，将显示默认URL（文档概述页面）。
-
在该对话框中，将定义各个字段：
在Classic对话框中：
- 您可以创建对话框为
cq:Dialog，这将提供单个选项卡 — 就像在文本组件中一样，或者如果您需要多个选项卡（就像在文本时间组件中一样），则可以将该对话框定义为cq:TabPanel. - a
cq:WidgetCollection(items)用于为任一输入字段提供基数(cq:Widget)或其他选项卡(cq:Widget)。 此层次结构可以扩展。
-
设计对话框 design-dialogs
“设计”对话框与用于编辑和配置内容的对话框类似，但它们为作者提供了用于配置和提供该组件的设计详细信息的界面。
设计对话框在设计模式下可用，尽管并非所有组件都需要，例如， 标题 和 图像 两者都具有设计对话框，而 文本 不会。
段落系统的“设计”对话框（例如，parsys）是一种特殊情况，因为它允许用户在页面上选择特定的其他组件（从组件浏览器或sidekick）。
将组件添加到段落系统 adding-your-component-to-the-paragraph-system
定义组件后，必须使其可用。 要使组件可在段落系统中使用，您可以：
-
打开 设计模式 并启用所需的组件。
-
将所需的组件添加到
components属性下的模板定义：/etc/designs/<*yourProject*>/jcr:content/<*yourTemplate*>/par例如，请参阅：
/etc/designs/geometrixx/jcr:content/contentpage/par
组件及其创建的内容 components-and-the-content-they-create
如果您创建和配置实例 标题 页面上的组件： <content-path>/Prototype.html
-
触屏优化UI
-
经典 UI
然后，您可以查看在存储库中创建的内容的结构：
具体来说，如果您查看 标题：
-
定义（适用于两个UI）具有属性
name=./jcr:title/libs/foundation/components/title/cq:dialog/content/items/column/items/title/libs/foundation/components/title/dialog/items/title
-
在内容中，这将生成属性
jcr:title保存作者的内容。
定义的属性取决于各个定义。 尽管它们可能比上述情况更加复杂，但它们仍然遵循同样的基本原则。
组件层次结构和继承 component-hierarchy-and-inheritance
AEM中的组件遵循三个不同的层次结构：
-
资源类型层次结构
这用于使用属性扩展组件
sling:resourceSuperType. 这将使组件能够继承。 例如，文本组件继承标准组件的各种属性。- 脚本（由Sling解析）
- 对话框
- 描述（包括缩略图图像和图标）
-
容器层次结构
这用于向子组件填充配置设置，并且最常用于Parsys场景。
例如，可以在父组件上定义编辑栏按钮、控件集布局（编辑栏、变换）和对话框布局（内联、浮动）的配置设置并传播到子组件。
中的配置设置（与编辑功能相关）
cq:editConfig和cq:childEditConfig都会传播。 -
包括层次结构
这是在运行时由include序列强制实施的。
设计人员使用此层次结构，它进而充当呈现的各个设计方面的基础；包括布局信息、css信息、parsys中的可用组件等。
编辑行为 edit-behavior
本节介绍如何配置组件的编辑行为。 这包括各种属性，例如组件可用的操作、就地编辑器的特征以及与组件上的事件相关的侦听器。
尽管存在某些特定差异，但配置对于触屏优化UI和经典UI都是通用的。
组件的编辑行为通过添加 cq:editConfig 类型节点 cq:EditConfig 在组件节点下(类型为 cq:Component)，并添加特定属性和子节点。 以下属性和子节点可用：
-
-
cq:actions(String array)：定义可以对组件执行的操作。 -
cq:layout(String)：定义如何在经典UI中编辑组件。 -
cq:dialogMode(String)：定义如何在经典UI中打开组件对话框- 在触屏优化UI中，对话框在桌面模式下始终处于浮动状态，并在移动设备中自动作为全屏打开。
-
cq:emptyText(String)：定义不存在可视内容时显示的文本。 -
cq:inherit(Boolean)：定义缺少的值是否继承自它所继承的组件。 -
dialogLayout（字符串）：定义应如何打开对话框。
-
-
-
cq:dropTargets(节点类型nt:unstructured)：定义可以从内容查找器的资产中接受放置的放置目标的列表- 多个放置目标仅在经典UI中可用。
- 在触屏优化UI中，允许使用单个放置目标。
-
cq:actionConfigs(节点类型nt:unstructured)：定义附加到cq：actions列表的新操作的列表。 -
cq:formParameters(节点类型nt:unstructured)：定义添加到对话框表单的其他参数。 -
cq:inplaceEditing(节点类型cq:InplaceEditingConfig)：定义组件的就地编辑配置。 -
cq:listeners(节点类型cq:EditListenersConfig)：定义在组件上发生操作之前或之后发生的情况。
-
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[edit]"
cq:dialogMode="floating"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig">
<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
afteredit="REFRESH_PAGE"/>
</jcr:root>
存储库中有许多现有配置。 您可以轻松搜索特定属性或子节点：
-
要查找的属性
cq:editConfig节点，例如，cq:actions中，您可以使用查询工具 CRXDE Lite 和搜索以下XPath查询字符串：//element(cq:editConfig, cq:EditConfig)[@cq:actions] -
查找的子节点
cq:editConfig例如，您可以搜索cq:dropTargets，属于类型cq:DropTargetConfig；您可以使用查询工具在 CRXDE Lite 中搜索，并使用以下XPath查询字符串进行搜索：//element(cq:dropTargets, cq:DropTargetConfig)
组件占位符 component-placeholders
组件必须始终呈现对作者可见的一些HTML，即使组件没有内容也是如此。 否则，它可能会从编辑器的界面中消失，从技术上讲，它会在页面上和编辑器中呈现但不可见。 在这种情况下，作者无法选择空组件并与之交互。
因此，组件应该呈现占位符，只要它们在页面编辑器中呈现页面时(当WCM模式为 edit 或 preview)。
占位符的典型HTML标记如下：
<div class="cq-placeholder" data-emptytext="Component Name"></div>
呈现上述占位符HTML的典型HTL脚本如下：
<div class="cq-placeholder" data-emptytext="${component.properties.jcr:title}"
data-sly-test="${(wcmmode.edit || wcmmode.preview) && isEmpty}"></div>
在上一个示例中， isEmpty 是一个变量，仅当组件没有内容并且作者不可见时才会显示此变量。
为避免重复，Adobe建议组件的实施者对这些占位符使用HTL模板， 与核心组件提供的那种类似。
然后，通过下面的HTL行完成上一个链接中的模板使用：
<sly data-sly-use.template="core/wcm/components/commons/v1/templates.html"
data-sly-call="${template.placeholder @ isEmpty=!model.text}"></sly>
在上一个示例中， model.text 是变量，仅当内容具有内容且可见时才会成立。
此模板的示例用法可在核心组件中查看， 例如，在标题组件中。
使用cq：EditConfig属性进行配置 configuring-with-cq-editconfig-properties
cq：actions cq-actions
此 cq:actions 属性( String array)定义可以对组件执行的一个或多个操作。 以下值可用于配置：
以下配置将编辑按钮、分隔符、删除和插入按钮添加到组件编辑栏：
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[edit,-,delete,insert]"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig"/>
以下配置将文本“从基本框架继承的配置”添加到组件编辑栏：
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[text:Inherited Configurations from Base Framework]"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig"/>
cq：layout（仅限经典UI） cq-layout-classic-ui-only
此 cq:layout 属性( String)定义如何在经典UI中编辑组件。 可以使用以下值：
以下配置会将编辑按钮添加到组件编辑栏：
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[edit]"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig">
</jcr:root>
cq：dialogMode（仅限经典UI） cq-dialogmode-classic-ui-only
该组件可以链接到“编辑”对话框。 此 cq:dialogMode 属性( String)定义如何在经典UI中打开组件对话框。 可以使用以下值：
以下配置定义了一个带有编辑按钮的编辑栏和一个浮动对话框：
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[edit]"
cq:dialogMode="floating"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig">
</jcr:root>
cq：emptyText cq-emptytext
此 cq:emptyText 属性( String)定义不存在可视内容时显示的文本。 默认为： Drag components or assets here.
cq：inherit cq-inherit
此 cq:inherit 属性( boolean)定义缺少的值是否继承自它所继承的组件。 默认为 false.
对话框布局 dialoglayout
此 dialogLayout 属性定义默认情况下应如何打开对话框。
- 值
fullscreen全屏打开对话框。 - 如果属性为空值或缺失，则默认正常打开对话框。
- 用户始终可以在对话框中切换全屏模式。
- 不适用于经典UI
使用cq：EditConfig子节点进行配置 configuring-with-cq-editconfig-child-nodes
cq：dropTargets cq-droptargets
此 cq:dropTargets 节点（节点类型） nt:unstructured)定义了一个放置目标列表，这些放置目标可以接受从内容查找器拖动的资产中的放置。 它用作类型节点的集合 cq:DropTargetConfig.
每个类型的子节点 cq:DropTargetConfig 在组件中定义放置目标。 节点名称非常重要，因为它必须在JSP中使用，才能生成分配给作为有效放置目标的DOM元素的CSS类名称，如下所示：
<drop target css class> = <drag and drop prefix> +
<node name of the drop target in the edit configuration>
此 <drag and drop prefix> 由Java™属性定义：
com.day.cq.wcm.api.components.DropTarget.CSS_CLASS_PREFIX。
例如，类名在下载组件( /libs/foundation/components/download/download.jsp)，其中 file 是下载组件的编辑配置中的放置目标的节点名称：
String ddClassName = DropTarget.CSS_CLASS_PREFIX + "file";
类型的节点 cq:DropTargetConfig 必须具有以下属性：
以下配置是从下载组件中获取的。 它支持中的任意资源（mime类型可以是任意字符串） media 将组从内容查找器拖放到组件中。 放置后，组件属性 fileReference 正在更新：
<cq:dropTargets jcr:primaryType="nt:unstructured">
<file
jcr:primaryType="cq:DropTargetConfig"
accept="[.*]"
groups="[media]"
propertyName="./fileReference"/>
</cq:dropTargets>
cq：actionConfigs（仅限经典UI） cq-actionconfigs-classic-ui-only
此 cq:actionConfigs 节点（节点类型） nt:unstructured)定义附加到由定义的列表的新操作列表。 cq:actions 属性。 的每个子节点 cq:actionConfigs 通过定义构件来定义新操作。
以下示例配置定义了一个新按钮（带有用于经典UI的分隔符）：
-
分隔符，由xtype定义
tbseparator；- 此变量仅供经典UI使用。
- 触屏UI会忽略此定义，因为xtype会被忽略（并且不需要使用分隔符，因为操作工具栏在触屏UI中的构造方式有所不同）。
-
名为的按钮 管理评论 运行处理程序函数的
CQ_collab_forum_openCollabAdmin().
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
cq:actions="[EDIT,COPYMOVE,DELETE,INSERT]"
jcr:primaryType="cq:EditConfig">
<cq:actionConfigs jcr:primaryType="nt:unstructured">
<separator0
jcr:primaryType="nt:unstructured"
xtype="tbseparator"/>
<manage
jcr:primaryType="nt:unstructured"
handler="function(){CQ_collab_forum_openCollabAdmin();}"
text="Manage comments"/>
</cq:actionConfigs>
</jcr:root>
cq：formParameters cq-formparameters
此 cq:formParameters 节点（节点类型） nt:unstructured)定义添加到对话框表单的其他参数。 每个属性都映射到一个表单参数。
以下配置添加一个名为的参数 name，使用值设置 photos/primary 到对话框窗体：
<cq:formParameters
jcr:primaryType="nt:unstructured"
name="photos/primary"/>
cq：inplaceEditing cq-inplaceediting
此 cq:inplaceEditing 节点（节点类型） cq:InplaceEditingConfig)定义组件的就地编辑配置。 它可以具有以下属性：
以下配置启用就地编辑组件并定义 plaintext 作为编辑器类型：
<cq:inplaceEditing
jcr:primaryType="cq:InplaceEditingConfig"
active="{Boolean}true"
editorType="plaintext"/>
cq：listeners cq-listeners
此 cq:listeners 节点（节点类型） cq:EditListenersConfig)定义对组件执行操作之前或之后执行的操作。 下表定义了它可能的属性。
REFRESH_INSERTED 和 REFRESH_SELFMOVED 处理程序仅在经典UI中可用。cq:listeners 节点：-
对于嵌套组件，以下属性的值 必须 是
REFRESH_PAGE： >aftermoveaftercopy
事件处理程序可以通过自定义实施实施。 例如，其中 project.customerAction 是静态方法：
afteredit = "project.customerAction"
以下示例等效于 REFRESH_INSERTED 配置：
afterinsert="function(path, definition) { this.refreshCreated(path, definition); }"
before<action> 和 after<action> 的事件部分 CQ.wcm.EditBar 和 CQ.wcm.EditRollover 构件文档。使用下列配置，在删除、编辑、插入或移动组件后刷新页面：
<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
afterdelete="REFRESH_PAGE"
afteredit="REFRESH_PAGE"
afterinsert="REFRESH_PAGE"
afterMove="REFRESH_PAGE"/>