Only the Chinese version of this page is provided currently. The English version will be provided soon.
Help & Documentation>腾讯云智绘>开发指南>编辑器 SDK(移动端)接入文档

编辑器 SDK(移动端)接入文档

Last updated: 2024-10-24 22:06:32

如何接入?

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
模板 id,templateId 说明
string
—
是
from
打开的模板来源,具体参见下方,from 字段有哪些,from 说明
string
—
是
headConfig
头部配置,headConfig 说明
object
—
是
bottomConfig
底部配置,bottomConfig 说明
object
—
是
templateDataConfig
自定义模板数据配置,templateDataConfig 说明
array
—
否
styleConfig
打开 iframe 样式配置,styleConfig 说明
object
—
否
commonConfig
通用的配置,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为showall
dataConfig: { // dataConfig为请求数据的配置
url: 'https://xxxxx', // 获取无限滚动列表中数据的接口,获取方式为GET
headers: { // 接口自定义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为unlimited
dataConfig: { // dataConfig为请求数据的配置
levelUrl: 'https://xxx', // 获取无限级分类的接口,获取方式为GET
url: 'https://xxx', // 获取无限滚动列表中数据的接口,获取方式为GET
headers: { // 接口自定义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为showChild
dataConfig: { // dataConfig为请求数据的配置
childUrl: 'https://xxx', // 获取无限滚动列表中数据的接口,获取方式为GET
url: 'https://xxx', // 获取按照分类显示数据的接口,获取方式为GET
tagList: ['测试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', // 必须包含此id
top: 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 说明

因为会有一些业务方提出个性化的定制化开发需求,因此将某些定制化的非通用性功能放在此配置中,如果您也有定制化功能的诉求,也可以随时联系我们的管理员。