文档中心>腾讯云智绘>开发指南>编辑器 SDK(移动端)接入文档

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

最近更新时间:2024-05-24 10:46:21

我的收藏

如何接入?

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 说明

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