快速开始

在开始接入前，你需要先完成授权。

素材选择器的链接通过 iframe 嵌入你的系统，你的代码和组件会基于 postMessage 来进行通信交互数据。

素材选择器链接是：{authUrl}?aesUserInfo={encodeURIComponent(经过 aesKey 加密的用户信息)}&targetUrl={encodeURIComponent({domain}/dam_enterprise/material_selector)}。参照授权。

其中 domain 为客户内容中台（DAM）的域名。

原生
React

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>素材上传父页面</title>
  </head>
  <body>
    <script>
      const receiveMessage = (event) => {
        const iframe = document.getElementById('iframe');
        if (!iframe || event.source !== iframe.contentWindow) {
          // 判断是否为当前 iframe 发出的消息
          return;
        }

        if (event?.data?.type === 'tezign-selector-page-ready') {
          // iframe 页面加载完成，可以传入配置参数
          if (!iframe.contentWindow) {
            return;
          }

          iframe.contentWindow.postMessage(
            {
              type: 'tezign-material-selector',
              data: {
                config: [
                  { id: 'image', limit: 5 },
                  { id: 'audio', limit: 9 },
                ],
                filterCode: 'open-component-search-003',
                formatLimit: 5,
              },
            },
            '*',
          );
          return;
        }
        if (event?.data?.type === 'tezign-selector-confirm-btn') {
          // 点击【确认】 按钮 -- 这里接收已选择的素材集合
          console.log(event.data.selectedMaterial);
          return;
        }
        if (event?.data?.type === 'tezign-selector-cancel-btn') {
          // 点击【取消】 按钮
          console.log(event.data);
          return;
        }
      };
      window.addEventListener('message', receiveMessage, false);
    </script>
    <iframe src=`{authUrl}?aesUserInfo={encodeURIComponent(经过 aesKey
    加密的用户信息)}&targetUrl={encodeURIComponent({domain}/dam_enterprise/material_selector)}`
    id="iframe" />
  </body>
</html>

import React, { useEffect, useRef } from 'react';

// 此iframeUrl 填入素材选择器链接
const iframeUrl = `{authUrl}?aesUserInfo={encodeURIComponent(经过 aesKey 加密的用户信息)}&targetUrl={encodeURIComponent({domain}/dam_enterprise/material_selector)}`;

export default function App() {
  const ref = useRef(null);

  const receiveMessage = (event) => {
    if (!ref.current || ref.current !== event.source) {
      // 判断是否为当前iframe发出的消息
      return;
    }

    if (event?.data?.type === 'tezign-selector-page-ready') {
      // iframe 页面加载完成，可以传入配置参数
      ref?.current?.contentWindow?.postMessage(
        {
          type: 'tezign-material-selector',
          data: {
            config: [
              { id: 'image', limit: 5 },
              { id: 'audio', limit: 9 },
            ],
            filterCode: 'open-component-search-003',
            formatLimit: 5,
          },
        },
        '*',
      );
      return;
    }
    if (event?.data?.type === 'tezign-selector-confirm-btn') {
      // 点击【确认】 按钮 -- 这里接收已选择的素材集合
      console.log(event.data.selectedMaterial);
      return;
    }
    if (event?.data?.type === 'tezign-selector-cancel-btn') {
      // 点击【取消】 按钮
      console.log(event.data);
      return;
    }
  };

  useEffect(() => {
    window.addEventListener('message', receiveMessage, false);
    return () => {
      window.removeEventListener('message', receiveMessage);
    };
  }, []);

  return (
    <div>
      <iframe ref={ref} src={iframeUrl} id="iframe" />
    </div>
  );
}