如何使用AEM React可编辑组件v2
AEM提供 AEM React可编辑组件v2,这是一个基于Node.js的SDK,允许创建React组件,支持使用AEM SPA编辑器在上下文中编辑组件。
有关AEM React可编辑组件v2的更多详细信息和代码示例,请查看技术文档:
AEM页面
AEM React可编辑组件可与SPA编辑器或Remote SPA React应用程序一起使用。 必须通过扩展的AEM页面公开填充可编辑React组件的内容。 SPA页面组件. 映射到可编辑React组件的AEM组件必须实施AEM 组件导出程序框架 — 例如 AEM核心WCM组件.
依赖项
确保React应用程序在Node.js 14及更高版本上运行。
React应用程序使用AEM React可编辑组件v2所需的最低依赖项集包括: @adobe/aem-react-editable-components
, @adobe/aem-spa-component-mapping
、和 @adobe/aem-spa-page-model-manager
.
package.json
{
...
"dependencies": {
"@adobe/aem-react-editable-components": "^2.0.1",
"@adobe/aem-spa-component-mapping": "^1.1.1",
"@adobe/aem-spa-page-model-manager": "^1.4.4",
...
},
...
}
SPA编辑器
在基于AEM编辑器的React应用程序中使用SPA React可编辑组件时,AEM ModelManager
SDK(即SDK):
- 从AEM检索内容
- 使用AEM内容填充React可食用组件
使用初始化的ModelManager封装React应用程序,并渲染React应用程序。 React应用程序应包含一个 <Page>
组件导出自 @adobe/aem-react-editable-components
. 此 <Page>
组件具有根据动态创建React组件的逻辑。 .model.json
由AEM提供。
src/index.js
import { Constants, ModelManager } from '@adobe/aem-spa-page-model-manager';
import { Page } from '@adobe/aem-react-editable-components';
...
document.addEventListener('DOMContentLoaded', () => {
ModelManager.initialize().then(pageModel => {
const history = createBrowserHistory();
render(
<Router history={history}>
<Page
history={history}
cqChildren={pageModel[Constants.CHILDREN_PROP]}
cqItems={pageModel[Constants.ITEMS_PROP]}
cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
cqPath={pageModel[Constants.PATH_PROP]}
locationPathname={window.location.pathname}
/>
</Router>,
document.getElementById('spa-root')
);
});
});
此 <Page>
作为AEM页面的表示形式通过 pageModel
由 ModelManager
. 此 <Page>
组件为中的对象动态创建React组件 pageModel
通过匹配 resourceType
使用React组件,该组件通过以下方式向资源类型注册自身 MapTo(..)
.
可编辑的组件
此 <Page>
通过AEM页面的JSON表示形式传递 ModelManager
. 此 <Page>
组件然后通过匹配JS对象的,为JSON中的每个对象动态创建React组件 resourceType
React组件的值,该组件通过组件的 MapTo(..)
调用。 例如,以下内容将用于实例化实例
HTTP GET /content/.../home.model.json
...
":items": {
"example_123": {
"id": "example-a647cec03a",
"message": "Hello from an authored example component!",
":type": "wknd-examples/components/example"
}
}
...
AEM提供的上述JSON可用于动态实例化和填充可编辑的React组件。
import React from "react";
import { EditableComponent, MapTo } from "@adobe/aem-react-editable-components";
/**
* The component's EditConfig is used by AEM's SPA Editor to determine if and how authoring placeholders should be displayed.
*/
export const ExampleEditConfig = {
emptyLabel: "Example component",
isEmpty: function (props) => {
return props?.message?.trim().length < 1;
}
};
/**
* Define a React component. The `props` passed into the component are derived form the
* fields returned by AEM's JSON response for this component instance.
*/
export const Example = (props) => {
// Return null if the component is considered empty.
// This is used to ensure an un-authored component does not break the experience outside the AEM SPA Editor
if (ExampleEditConfig.isEmpty(props)) { return null; }
// Render the component JSX.
// The authored component content is available on the `props` object.
return (<p className="example__message">{props.message}</p>);
};
/**
* Wrap the React component with <EditableComponent> to make it available for authoring in the AEM SPA Editor.
* Provide the EditConfig the AEM SPA Editor uses to manage creation of authoring placeholders.
* Provide the props that are automatically passed in via the parent component
*/
const EditableExample = (props) => {
return (
<EditableComponent config={ExampleEditConfig} {...props}>
{/* Pass the ...props through to the Example component, since this is what does the actual component rendering */}
<Example {...props} />
</EditableComponent>
);
};
/**
* Map the editable component to a resourceType and export it as default.
* If this component is embedded in another editable component (as show below), make sure to
* import the "non-editable" component instance for use in the embedding component.
*/
export default MapTo("wknd-examples/components/example")(EditableExample);
嵌入组件
可编辑的组件可以重复使用并相互嵌入。 将一个可编辑组件嵌入另一个可编辑组件时,需要考虑两个关键因素:
- AEM中用于嵌入组件的JSON内容必须包含满足嵌入组件的内容。 这是通过为AEM组件创建收集必需数据的对话框来完成的。
- 必须嵌入React组件的“不可编辑”实例,而不是使用封装的“可编辑”实例
<EditableComponent>
. 原因是,如果嵌入的组件具有<EditableComponent>
包装器时,SPA编辑器会尝试使用编辑铬黄(蓝色悬停框)而不是外部嵌入组件来整理内部组件。
HTTP GET /content/.../home.model.json
...
":items": {
"embedding_456": {
"id": "example-a647cec03a",
"message": "Hello from an authored example component!",
"title": "A title for an embedding component!",
":type": "wknd-examples/components/embedding"
}
}
...
AEM提供的上述JSON可用于动态实例化和填充嵌入其他React组件的可编辑React组件。
import React from "react";
import { EditableComponent, MapTo } from "@adobe/aem-react-editable-components";
// Import the "non-editable" (not wrapped with <EditableComponent>) instance of the component
import { Example } from "./Example.js";
export const EmbeddingEditConfig = {
emptyLabel: "Embedding component",
isEmpty: function (props) => {
return props?.title?.trim().length < 1;
}
};
export const Embedding = (props) => {
if (EmbeddingEditConfig.isEmpty(props)) { return null; }
return (<div className="embedding">
{/* Embed the other components. Pass through props they need. */}
<Example message={props.message}/>
<p className="embedding__title">{props.title}</p>
</div>);
};
const EditableEmbedding = (props) => {
return (
<EditableComponent config={EmbeddingEditConfig} {...props}>
{/* Pass the ...props through to the Embedding component */}
<Embedding {...props} />
</EditableComponent>
);
};
// Export as default the mapped EditableEmbedding
export default MapTo("wknd-examples/components/embedding")(EditableEmbedding);