확장 등록

index.html 경로에 매핑된 ExtensionRegistration.js은(는) AEM 확장의 진입점이며 다음을 정의합니다.

  • getBadges()에서 구성 특성 id, prefix, suffix, backgroundColortextColor을(를) 사용하여 배지의 정의를 정의합니다.
  • 이 예에서는 # 문자를 사용하여 이 배지의 경계를 정의합니다. 즉, #(으)로 둘러싸인 RTE의 모든 문자열이 이 배지의 인스턴스로 처리됩니다.

또한 RTE 위젯의 주요 세부 사항을 참조하십시오.

  • getWidgets()의 위젯 정의가 id, labelurl 특성을 가진 함수입니다.
  • url 특성 값, 모달을 로드할 상대 URL 경로(/index.html#/largeBookingsCustomerService)입니다.

src/aem-cf-editor-1/web-src/src/components/ExtensionRegistration.js

import React from "react";
import { Text } from "@adobe/react-spectrum";
import { register } from "@adobe/uix-guest";
import { extensionId } from "./Constants";

// This function is called when the extension is registered with the host and runs in an iframe in the Content Fragment Editor browser window.
function ExtensionRegistration() {
  const init = async () => {
    const guestConnection = await register({
      id: extensionId,
      methods: {
        rte: {
          // RTE Badges
          getBadges: () => [
            {
              id: "phoneNumber",
              prefix: "#",
              suffix: "#",
              backgroundColor: "",
              textColor: "#071DF8",
            },
          ],

          // RTE Widgets
          getWidgets: () => [
            {
              id: "largegroup-contact-list-widget",
              label: "Large Group Bookings Customer Service",
              url: "/index.html#/largeBookingsCustomerService",
            },
          ],
        },
      },
    });
  };

  init().catch(console.error);

  return <Text>IFrame for integration with Host (AEM)...</Text>;
}

export default ExtensionRegistration;