集成页面

> 该功能可以实现将易企秀的指定界面嵌入企业自有产品，低成本实现产品深度融合。

# 页面集成步聚
1. 实现[单点登录](https://hc.eqxiu.cn/doc/22/ "单点登录")对接，当易企秀界面登录失效时会自动通过单点登录完成登录；
2. 在需要嵌入易企秀页面的地方通过iframe技术嵌入对应页面；

- 实现原理
![](/media/202206/2022-06-06_154603_942837.png)

# 可集成页面列表
### 平台模版&我的\企业作品&作品回收站参数说明：
| 参数名称 | 备注 |
| --- | --- |
|  useType| 展示应用类型，eg:?useType=hd 多个 useType=hd,h5 可以选择性组合应用|
| hideBar | 隐藏应用类型，默认为显示，eg:?hideBar=1,模版集成时会去除应用类型展示|
| hideBack |  隐藏页面的返回按钮，默认展示，例如回收站，直接集成。设置无返回按钮 |

内容中台可集成的页面列表如下：

| **页面** | **地址** |
| --- | --- |
| 作品列表全页面 | https://www.eqxiu.cn/embed/creation?secretId=SECRET_ID&Authorization=AUTHORIZATION&type=TYPE |
|我的作品全页面| https://www.eqxiu.cn/embed/creation?secretId=SECRET_ID&Authorization=AUTHORIZATION&myProductType=group  |
|我的作品分类页|https://www.eqxiu.cn/embed/creation?secretId=SECRET_ID&Authorization=AUTHORIZATION&myProductType=type|
|我的作品作品页| https://www.eqxiu.cn/embed/creation?secretId=SECRET_ID&Authorization=AUTHORIZATION&myProductType=list（支持&type=hd等作品类型过滤）|
|企业模板分类页| https://www.eqxiu.cn/embed/enterpriseTemplate?secretId=SECRET_ID&Authorization=AUTHORIZATION&myBusinessType=type   |
|企业模板作品页|https://www.eqxiu.cn/embed/enterpriseTemplate?secretId=SECRET_ID&Authorization=AUTHORIZATION&myBusinessType=list|
|企业资源企业素材页|https://www.eqxiu.cn/qyMaterial/business?secretId=SECRET_ID&Authorization=AUTHORIZATION&tab=${tab}<br>tab参数说明：指定显示菜单值包含material:素材;template:模版;prize:奖品;也可以组合使用，例如tab=material,template展示素材以及模版。默认tab不传或者为空展示全部|
|企业资源企业模版页|https://www.eqxiu.cn/qyMaterial/enterprise?secretId=SECRET_ID&Authorization=AUTHORIZATION&tab=${tab}<br>tab参数说明：指定显示菜单值包含material:素材;template:模版;prize:奖品;也可以组合使用，例如tab=material,template展示素材以及模版。默认tab不传或者为空展示全部|
|企业资源企业奖品页|https://www.eqxiu.cn/qyMaterial/prizeManage?secretId=SECRET_ID&Authorization=AUTHORIZATION&tab=${tab}<br>tab参数说明：指定显示菜单值包含material:素材;template:模版;prize:奖品;也可以组合使用，例如tab=material,template展示素材以及模版。默认tab不传或者为空展示全部|
| 仅平台模板页面 | https://www.eqxiu.cn/embed/template?secretId=SECRET_ID&Authorization=AUTHORIZATION&type=TYPE|
| 仅企业模板页面 | https://www.eqxiu.cn/embed/template/enterprise?secretId=SECRET_ID&Authorization=AUTHORIZATION&type=TYPE |
| 企业模板&平台模板页面(tab切换) | https://www.eqxiu.cn/embed/all/template/platform?secretId=SECRET_ID&Authorization=AUTHORIZATION&type=TYPE |
| 作品数据统计页面 | https://www.eqxiu.cn/embed/datapage/${creationId}?secretId=SECRET_ID&Authorization=AUTHORIZATION |
| 互动编辑器页面 | https://www.eqxiu.cn/gc/${creationId}?secretId=SECRET_ID&Authorization=AUTHORIZATION |
| 表单编辑器页面 | https://www.eqxiu.cn/fe/${creationId}?secretId=SECRET_ID&Authorization=AUTHORIZATION |
| H5编辑器页面 | https://www.eqxiu.cn/c/${creationId}?secretId=SECRET_ID&Authorization=AUTHORIZATION |
| 长页编辑器页面 | https://www.eqxiu.cn/lc/${creationId}?secretId=SECRET_ID&Authorization=AUTHORIZATION |
| 海报编辑器页面 | https://www.eqxiu.cn/design/${creationId}?secretId=SECRET_ID&Authorization=AUTHORIZATION |
| [图片素材编辑页面](https://hc.eqxiu.cn/doc/1108 "图片素材编辑页面") | https://www.eqxiu.cn/design/create/blank?secretId=SECRET_ID&Authorization=AUTHORIZATION&filePath=filePath&width=width&height=height|
| [图片素材美化页面](https://hc.eqxiu.cn/doc/1108 "图片素材美化页面") | https://www.eqxiu.cn/design/tool/photo?secretId=SECRET_ID&Authorization=AUTHORIZATION&filePath=filePath|
| 其它通用页面 | 需在需要集成的页面URL中，添加一个 URL Query Param: nolayout=1，嵌入的页面将隐藏原生的菜单栏|

“互动编辑器页面”提供了一组参数（将以下任一参数拼到URL上），可以用来控制页面是否可编辑的效果：
```
approval=disableEdit 作品状态为审批中时，隐藏保存和发布按钮，禁用编辑
approval=disablePage 作品状态为审批中时，禁用整个页面
disableEdit=1 作品在任何状态时，隐藏保存和发布按钮，禁用编辑
disablePage=1 作品在任何状态时，禁用整个页面
```

## 参数说明
- SECRET_ID为请求密钥ID，从控制台密钥管理处获得；
- AUTHORIZATION为当前登录用户SessionId,通过[静默登录接口](https://hc.eqxiu.cn/doc/25/ "静默登录接口")获得
- TYPE为编辑器品类标识，参见[作品类型字典](https://hc.eqxiu.cn/doc/18/ "作品类型字典")
- ${creationId}为作品ID，可从[作品列表接口](https://hc.eqxiu.cn/doc/35/)等处取得

# 集成页面交互
> 客户系统集成内容中台的页面后，当进入编辑器界面时会遇到和父页面交互的问题。内容中台提供两种页面集成方式，两种方式退出编辑器页面后，需要采用对应的方式实现跳转到指定的URL。

## iframe嵌入方式
示例代码：
```html
<!DOCTYPE html>
<html>
  <body>
    <iframe src="https://www.eqxiu.cn/embed/creation?secretId=79663h6&Authorization=32f909e22b&type=hd" width="200" height="200"></iframe>
  </body>
</html>
```
1. iframe集成方式在退出**编辑界面**时，使用`postMessage`，向父页面发送消息通知，父页面根据消息内容业务的定义，进行跳转逻辑处理，示例代码：
```javascript
// 集成的编辑器页面发送消息
window.parent.postMessage({
	eventType: 'quit', // 'publishStart': 开始发布， publish：确认发布','quit：退出', 'save': 保存
	creationType: 'hd', // 编辑器类型 hd:互动, h5:h5, design:海报, form:表单, ls:长页
	creationId: '', // 作品id
	params: {
		staffId: '', // 员工id
		corpId: '' //公司id
	}
}, '*');

**新增开始发布事件（publishStart）推送，时机为点击发布按钮，如下图所示：**
![](/media/202403/2024-03-07_142713_2910650.5396447256343448.png)

**确认发布（publish）推送时机，如下图所示：**
![](/media/202403/2024-03-07_142820_7881880.2597979435430341.png)
```
```javascript
// 父页面接收消息
window.addEventListener('message', function (e) {  // 监听 message 事件
  console.log(e.data); // 编辑器返回数据
  if(e.data.eventType === 'quit'){ // 退出编辑器
    iframe.src = 'https://www.eqxiu.cn/embed/creation?secretId=79663h6&Authorization=32f909e22b&type=hd';
  } else if(e.data.eventType === 'publish'){ // 发布作品
    window.location.reload();
  }
});
```
2. iframe集成方式在退出**数据管理**界面时，使用postMessage，向父页面发送消息通知，父页面根据消息内容业务的定义，进行跳转逻辑处理，示例代码：
```js
// 集成的页面发送消息
window.parent.postMessage({
    eventType: 'dataAnalysisBack',
	creationType: 'hd', // 编辑器类型 hd:互动, h5:h5, design:海报, form:表单, ls:长页
	creationId: '', // 作品id
}, '*');
```
```js
// 父页面接收消息
window.addEventListener('message', function (e) {  // 监听 message 事件
  console.log(e.data); // 集成页面返回数据
  if(e.data.eventType === 'dataAnalysisBack'){ // 退出数据管理页面
  }
});
```

## 打开新页签方式
示例代码：
```html
<!DOCTYPE html>
<html>
  <body>
    <a href="https://www.eqxiu.cn/embed/creation?secretId=79663h6&Authorization=32f909e22b&type=hd" target="_blank">打开作品列表页面</a>
  </body>
</html>
```
打开新页签集成方式，需要在内容中台的控制设置跳转地址。

## 注意事项
指定发布与退出后的跳转地址，==配置地址后，将不会发送postmessage。==
配置方法：控制台->集成管理->页面集成，修改对应的url即可

![](/media/202207/2022-07-05_170140_805692.png)
**注意：配置地址后，将不会发送`postMessage`消息。**

配置步骤：[页面集成配置](https://hc.eqxiu.cn/doc/206/)