如何接入?
1. 联系管理员索要,appid、channel、scope、appKey 您可以使用以下账户信息进行测试:
appid: commonIframe
channel: commonIframe
scope: all
appKey: bb6681972a3744488e9a8c7521635099
注意:
其中 appKey 为私钥。
2. 通过 appid、channel、stamp、timestamp 获取 sig。
4. 使用 npm 安装 zhihui-editor-mobile-sdk
5. 将 appid、channel、scope、stamp、timestamp、templateId、from、token 作为参数传入。
6. 调用 openIframe 方法打开即可
接入过程说明
当您获取 access_token 后您需要执行以下步骤方可打开编辑器。
使用 npm 安装 zhihui-editor-mobile-sdk:
npm i zhihui-editor-mobile-sdk
将 appid、channel、scope、stamp、timestamp、templateId、from、token 作为参数传入:
import ZhihuiEditor from 'zhihui-editor-mobile-sdk'let option = {appid: 'commonIframe',channel: 'commonIframe',timestamp: 1629711353224,scope: 'all', // 注意此处的scope是按照字符串传入templateId: '62c2571219c76e620670584c',from: 'material',token: token.data.data.access_token,}let zhihuiEditor = new ZhihuiEditor(option)
调用 openIframe 方法打开即可:
zhihuiEditor.openIframe()
实例化方法
1. openIframe:打开 iframe
<button onClick={() => {zhihuiEditor.openIframe()}}>调起智绘iframe</button>
2. closeIframe:关闭 iframe
<button onClick={() => {zhihuiEditor.closeIframe()}}>关闭智绘iframe</button>
打开 Iframe 配置参数说明
参数 | 说明 | 类型 | 默认值 | 是否必须 |
appid | 业务方唯一 id,由管理员分配 | string | — | 是 |
channel | 业务方渠道,由管理员分配 | string | — | 是 |
scope | 作用域配置,由管理员分配 | string | — | 是 |
teamId | 团队 id,获取业务方团队内容时配置,由管理员分配 | string | — | 否 |
companyId | 企业 id,获取业务方公司内容时配置,由管理员分配 | string | — | 否 |
timestamp | 13位时间戳 | number | — | 是 |
token | 请求 token | string | — | 是 |
templateId | string | — | 是 | |
from | string | — | 是 | |
headConfig | object | — | 是 | |
bottomConfig | object | — | 是 | |
templateDataConfig | array | — | 否 | |
styleConfig | object | — | 否 | |
commonConfig | object | — | 否 |
templateId 说明
1. 来源于智绘系统提供的模板 id,如果需要可以联系管理员。
2. 如果是用户自定义的模板数据,也就是 from 为 userConfig 时,那么此字段为时间戳。
from 说明
1. material — 当使用模板为智绘系统提供时,from 字段需要填写 material。
2. record — 当用户使用编辑器返回的 recordId 打开编辑器时,from 字段需要填写 record。
3. userConfig — 当用户使用自定义模板数据时,from 需要填写 userConfig。
4. userPackageConfig — 针对性的配置,一般业务方不需要用到。
headConfig 说明
参数 | 说明 | 类型 | 默认值 |
onClickDownload | 用户点击下载按钮callback | function | — |
headConfig 配置Demo
let option = {...headConfig: {onClickDownload: (res) => {console.log(res)},},}
onClickDownload 返回
{"name": "56a4419401b62dcda242595e4f32114a.png","status": "done","url": "//static.taishan.qq.com/editor/material/56a4419401b62dcda242595e4f32114a.png","thumbUrl": "//static.taishan.qq.com/editor/material/56a4419401b62dcda242595e4f32114a.png?imageMogr2/thumbnail/!50p","width": 720,"height": 400,"recordId": 'xxxxxx'}
参数 | 说明 | 类型 | 默认值 |
name | 图片名称 | string | — |
status | 图片导出状态 | string | done |
url | 图片真实 url | string | — |
thumbUrl | 图片缩略图 | string | — |
width | 图片宽度 | number | — |
height | 图片高度 | number | — |
recordId | 用户完成内容的 id,可以在二次编辑时使用 | string | — |
bottomConfig 说明
参数 | 说明 | 类型 | 默认值 |
user | 用户配置的底部自定义素材 | object | — |
user 配置
用户可以配置三种自定义的素材列表,分别是无限滚动列表、无限级分类展示+无限滚动列表、按照分类展示+无限滚动列表。
无限滚动列表配置
user: {type: 'showAll', // 无限滚动列表的type为showalldataConfig: { // dataConfig为请求数据的配置url: 'https://xxxxx', // 获取无限滚动列表中数据的接口,获取方式为GETheaders: { // 接口自定义token,为可选项'xxx-token': 'xxxx'},},}
请求 url 数据 API 需要提供的参数:
参数 | 说明 | 类型 | 默认值 |
Offset | 请求跳过数据数量 | number | — |
Limit | 获取数据的数量,不可更改 | number | 50 |
Keyword | 搜索关键词 | string | — |
需要注意参数首字母为大写,并且当 Keyword 为空时,应返回默认数据。
返回数据规定:
{items: [ // 无限分类列表的数据{thumbUrl: 'https://xxx.png', // 用户预览的缩略图url: 'https://xxx.png' // 实际添加到画布中的图片}],total: 200 // 列表总数,如果返回错误无法正确计算加载更多}
无限级分类展示+无限滚动列表
user: {type: 'unlimited', // 无限级分类展示+无限滚动列表的type为unlimiteddataConfig: { // dataConfig为请求数据的配置levelUrl: 'https://xxx', // 获取无限级分类的接口,获取方式为GETurl: 'https://xxx', // 获取无限滚动列表中数据的接口,获取方式为GETheaders: { // 接口自定义token,为可选项'xxx-token': 'xxxx'},},}
请求 url 数据 API 需要提供的参数:
参数 | 说明 | 类型 | 默认值 |
Offset | 请求跳过数据数量 | number | — |
Limit | 获取数据的数量,不可更改 | number | 50 |
Keyword | 搜索关键词 | string | — |
Category | 分类参数 | number | string | — |
需要注意参数首字母为大写,并且当Keyword为空时,应返回默认数据。
返回数据规定:
{items: [ // 无限分类列表的数据{thumbUrl: 'https://xxx.png', // 用户预览的缩略图url: 'https://xxx.png' // 实际添加到画布中的图片}],total: 200 // 列表总数,如果返回错误无法正确计算加载更多}
请求levelUrl数据API需要提供的参数-无
请求levelUrl返回数据规定:返回对象需要包含id、parentId、name、rank属性,其中id属性为当用户点击分类以后将此id传入获取图片素材url的Category字段。
[{ id: 1, parentId: 0, name: '一级菜单', rank: 1 },{ id: 2, parentId: 0, name: '一级菜单', rank: 1 },{ id: 3, parentId: 0, name: '一级菜单', rank: 1 },{ id: 4, parentId: 1, name: '二级菜单1', rank: 2 },{ id: 5, parentId: 1, name: '二级菜单2', rank: 2 },{ id: 6, parentId: 2, name: '二级菜单3', rank: 2 },{ id: 7, parentId: 4, name: '三级菜单', rank: 3 },{ id: 8, parentId: 7, name: '四级菜单', rank: 4 },{ id: 9, parentId: 8, name: '五级菜单', rank: 5 },{ id: 10, parentId: 9, name: '六级菜单', rank: 6 },{ id: 11, parentId: 10, name: '七级菜单', rank: 7 },{ id: 12, parentId: 11, name: '八级菜单', rank: 8 },{ id: 13, parentId: 12, name: '九级菜单', rank: 9 },{ id: 14, parentId: 13, name: '十级菜单', rank: 10 }]
按照分类展示+无限滚动列表
user: {type: 'showChild', // 按照分类展示+无限滚动列表的type为showChilddataConfig: { // dataConfig为请求数据的配置childUrl: 'https://xxx', // 获取无限滚动列表中数据的接口,获取方式为GETurl: 'https://xxx', // 获取按照分类显示数据的接口,获取方式为GETtagList: ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7', '测试8', '测试9'],// 在搜索栏下方显示的tag列表,当用户点击以后会将tag内容作为关键词请求childUrl接口,此配置为可选项headers: { // 接口自定义token,为可选项'xxx-token': 'xxxx'},},}
请求 url 数据 API 需要提供的参数-无
返回数据规定:
[id: 'xxx', // 分类id,当用户点击分类以后将此id传入childUrl的Category字段。name: 'xxx', // 分类名称,显示作用material: [ // 返回的每一种分类的显示图片,每一个分类显示3个{url: 'https://xxx.png', // 实际添加到画布中的图片thumbUrl: 'https://xxx.png' // 用户预览的缩略图}]]
请求 childUrl 数据API需要提供的参数
参数 | 说明 | 类型 | 默认值 |
Offset | 请求跳过数据数量 | number | — |
Limit | 获取数据的数量,不可更改 | number | 50 |
Keyword | 搜索关键词 | string | — |
Category | 分类参数 | number | string | — |
需要注意参数首字母为大写,并且当 Keyword 为空时,应返回默认数据。
返回数据规定:
{items: [ // 无限列表的数据{thumbUrl: 'https://xxx.png', // 用户预览的缩略图url: 'https://xxx.png' // 实际添加到画布中的图片}],total: 200 // 列表总数,如果返回错误无法正确计算加载更多}
templateDataConfig 说明
templateDataConfig 字段为数组,数组中可以包含多个图片、文字类型对象。
注意:
需要注意,因为画布本身没有默认大小,因此默认必须传入一层 workarea 用来定义画布的基础信息。
图片对象属性
参数 | 说明 | 类型 | 默认值 |
angle | 图片旋转角度 | number | — |
height | 图片高度 | number | — |
left | left距离 | number | — |
opacity | 透明度 | number | — |
originX | 对象变换的水平原点,可能值为"left", "right", "center" | string | — |
originY | 对象变换的垂直原点,可能值为"top", "bottom", "center" | string | — |
src | 图片的src | string | — |
top | top距离 | number | — |
type | 类型,必须填写:image | string | — |
scaleX | 图片水平方向缩放大小 | number | — |
scaleY | 图片垂直方向缩放大小 | number | — |
width | 图片宽度 | number | — |
文字对象属性
参数 | 说明 | 类型 | 默认值 |
angle | 旋转角度 | number | — |
fill | 颜色 | string | — |
fontFamily | 字体 | string | — |
fontSize | 字体大小 | number | — |
fontStyle | 字体样式,可能的值为"normal", "italic", "oblique" | string | — |
fontWeight | 字体粗细,可能的值为 bold, normal, 400, 600, 800 | number | string |
height | 字体高度 | number | — |
left | left距离 | number | — |
opacity | 透明度 | number | — |
originX | 对象变换的水平原点,可能值为"left", "right", "center" | string | — |
originY | 对象变换的垂直原点,可能值为"top", "bottom", "center" | string | — |
scaleX | 水平方向缩放大小 | number | — |
scaleY | 垂直方向缩放大小 | number | — |
text | 文本内容 | string | — |
textAlign | 文字对齐方式,可能的值为"left", "center", "right", "justify", "justify-left", "justify-center" or "justify-right" | string | — |
top | top距离 | number | — |
type | 必须填写:textbox | string | — |
width | 字体宽度 | number | — |
templateDataConfig 配置 Demo
[{id: 'workarea', // 必须包含此idtop: 0,left: 0,width: 1242,height: 2208,},{type: 'image',top: 0,left: 0,src: 'https://static.taishan.qq.com/editor/assets/2997b0c920be29c12c16ae3a2b2bc378.png',},]
styleConfig 说明
参数 | 说明 | 类型 | 默认值 |
parentDomId | iframe 打开的父节点 id | string | — |
iframeStyle | 打开的 iframe 样式,可以按照 react 中 css 方式写入 | object | — |
styleConfig 配置 Demo
let option = {......styleConfig: {parentDomId: 'test',iframeStyle: {position: 'absolute',top: 0,left: 0,zIndex: 10000,display: 'block',width: '100%',height: '100%',},}}
commonConfig 说明
因为会有一些业务方提出个性化的定制化开发需求,因此将某些定制化的非通用性功能放在此配置中,如果您也有定制化功能的诉求,也可以随时联系我们的管理员。