介绍

除了使用前端组件进行集成，我们还可以使用 iframe 的方式通过路由传参的方式集成 iCraft 编辑的场景。

使用

下面是一个实例，演示如何使用 iframe 的方式集成 iCraft Editor 编辑的场景。

const style = {
  width: "100%",
  height: "500px",
  position: "relative" as const,
  overflow: "hidden" as const,
};
 
const EDITOR_BASE_URL = "https://icraft.gantcloud.com/editor";
 
export default () => {
  const params = new URLSearchParams({
    url: "https://icraft.gantcloud.com/api/static/templates/ArgoCD.icraft",
    preview: "true",
    defaultAnimationPlan: "0",
    autoPlay: "true",
    loop: "true",
  });
 
  const src = `${EDITOR_BASE_URL}?${params.toString()}`;
 
  return (
    <div style={style}>
      <iframe
        src={src}
        title='iCraft Editor'
        width='100%'
        height='100%'
        style={{ border: "none" }}
        allowFullScreen
      />
    </div>
  );
};

路由参数

Name	description	type	default	required
url	.icraft 文件地址	string		false
preview	是否预览模式	boolean	false	false
defaultCustomCamera	默认自定义相机序号	number		false
defaultAnimationPlan	默认动画方案序号	number		false
defaultLoop	默认循环播放	boolean	false	false
autoPlay	自动播放	boolean	false	false
template	模板标识	string		false

介绍

使用

路由参数

Home

Others