帮你快速理解、总结文档立即下载
文档中心>腾讯云智绘>开发指南>编辑器 SDK(PC 端)接入文档

编辑器 SDK(PC 端)接入文档

最近更新时间: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-sdk
5. 将 appid、channel、scope、stamp、timestamp、templateId、from、token 作为参数传入。
6. 调用 openIframe 方法打开即可

接入过程说明

说明:
当您获取 access_token 后您需要执行以下步骤方可打开编辑器。
使用 npm 安装 zhihui-editor-sdk
npm i zhihui-editor-sdk
将 appid、channel、scope、stamp、timestamp、templateId、from、token 作为参数传入。
import ZhihuiEditor from 'zhihui-editor-sdk'
let option = {
appid: 'commonIframe',
channel: 'commonIframe',
stamp: 'testUserId',
timestamp: 1629711353224,
scope: 'all', // 注意此处的scope是按照字符串传入
templateId: '6254db7bccc34b01db8666ec',
from: 'material',
token: token.data.data.access_token,
}
let zhihuiEditor = new ZhihuiEditor(option)
调用 openIframe 方法打开即可
zhihuiEditor.openIframe()

实例化方法

1. openIframe — 打开 iframe
<button onClick={() => {zhihuiEditor.openIframe()}}>调起编辑器SDK</button>
2. closeIframe — 关闭 iframe
<button onClick={() => {zhihuiEditor.closeIframe()}}>关闭编辑器SDK</button>

打开编辑器 SDK 参数说明

参数
说明
类型
默认值
是否必须
appid
由管理员分配
string
—
是
channel
由管理员分配
string
—
是
scope
由管理员分配
string
—
是
teamId
由管理员分配,获取业务方团队内容时配置
string
—
否
companyId
由管理员分配,获取业务方公司内容时配置
string
—
否
stamp
业务方用户 id
string
—
是
timestamp
13位时间戳
number
—
是
token
请求 token
string
—
是
source
字体加载来源
string
—
否
templateId
模板 id,当 from 为 userConfig 时填写时间戳,templateId 说明
string
—
是
from
打开的模板来源,具体参见下方,from 字段有哪些,from 说明
string
—
是
loadingConfig
loading 配置,loadingConfig 说明
object
—
否
leftConfig
左侧配置,leftConfig 说明
object
—
否
headConfig
头部配置,headConfig 说明
object
—
否
templateDataConfig
自定义模板数据配置,templateDataConfig 说明
array
—
否
styleConfig
打开 iframe 样式配置,styleConfig 说明
object
—
否
commonConfig
通用的配置,commonConfig 说明
object
—
否
onOpen
初始化打开时候调用函数
function
—
否
onOpened
初始化打开完成时候调用函数
function
—
否

templateId 说明

1. 来源于智绘系统提供的模板 id,如果需要可以联系管理员。
2. 如果是用户自定义的模板数据,也就是 from 为 userConfig 时,那么此字段为时间戳。

from 说明

1. material — 当使用模板为智绘系统提供时,from 字段需要填写 material。
2. record — 当用户使用编辑器返回的 recordId 打开编辑器时,from 字段需要填写 record。或者当用户使用智绘封面 api 生成图片后,需要二次编辑时 from 字段需要填写 record。
3. userConfig — 当用户使用自定义模板数据时,from 需要填写 userConfig。
4. userPackageConfig — 针对性的配置,一般业务方不需要用到。

loadingConfig 说明

参数
说明
类型
默认值
logoUrl
加载时的logo
string
—

loadingConfig 配置 Demo

let option = {
...
loadingConfig: {
logoUrl: 'https://xxx.png'
}
}

leftConfig 说明

参数
说明
类型
默认值
user
业务方自定义菜单配置
array
—

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 // 列表总数,如果返回错误无法正确计算加载更多
}

User 配置 Demo

let header = {} // 想要正确运行的话可以联系管理员获取header后进行请求

let option = {
...
leftConfig: {
user: [
{
menuName: '测试',
menuIcon: 'https://static.taishan.qq.com/editor/assets/01b2269953df053926f7045d0a670655.png',
menuIconActive: 'https://static.taishan.qq.com/editor/assets/280272c691fbdadb36701a48340c5d36.png',
type: 'showChild',
dataConfig: {
url: 'https://taishan.qq.com/api/category/getall?parentType=2',
tagList: ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7', '测试8', '测试9'],
headers: header,
childUrl: 'https://taishan.qq.com/api/ape/search',
},
},
{
menuName: '测试1',
menuIcon: 'https://static.taishan.qq.com/editor/assets/01b2269953df053926f7045d0a670655.png',
menuIconActive: 'https://static.taishan.qq.com/editor/assets/280272c691fbdadb36701a48340c5d36.png',
type: 'showAll',
dataConfig: {
url: 'https://taishan.qq.com/api/ape/search',
headers: header,
}
},
{
menuName: '测试3',
menuIcon: 'https://static.taishan.qq.com/editor/assets/01b2269953df053926f7045d0a670655.png',
menuIconActive: 'https://static.taishan.qq.com/editor/assets/280272c691fbdadb36701a48340c5d36.png',
type: 'unlimited',
dataConfig: {
levelUrl: 'https://taishan.qq.com/api/category',
url: 'https://taishan.qq.com/api/ape/search',
headers: header,
},
},
]
}
}

headConfig 说明

参数
说明
类型
默认值
logoUrl
头部的logo
string
—
downloadName
下载按钮的名称
string
—
dropDownloadName
下拉框下载按钮的名称
string
—
onClickDownload
用户点击下载按钮callback
function
—
isDownloadImg
点击下载按钮后是否下载图片
boolean
true
selectQuality
是否需要选择图片质量
boolean
true
saveRecord
是否自动触发保存记录
boolean
true
updateTemplate
是否只更新模板(为true时只返回更新状态,不返回其他信息)
boolean
false

headConfig 配置 Demo

let option = {
...
headConfig: {
logoUrl: 'https://xxx.png',
downloadName: '完成',
onClickDownload: (res) => {
console.log(res)
},
isDownloadImg: false,
},
}

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
—

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

参数
说明
类型
默认值
hasBackground
是否显示 iframe 打开的默认背景遮罩
boolean
true
hasQuitButton
是否显示 iframe 的退出按钮
boolean
true
parentDomId
iframe 打开的父节点 id
string
—
iframeStyle
打开的 iframe 样式,可以按照 react 中 css 方式写入
object
—
let option = {
......
styleConfig: {
hasBackground: false,
hasQuitButton: false,
parentDomId: 'test',
iframeStyle: {
position: 'absolute',
top: 0,
left: 0,
zIndex: 10000,
display: 'block',
width: '100%',
height: '100%',
},
}
}

commonConfig 说明

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