腾讯云智绘编辑器 SDK(移动端)接入文档_音视频解决方案_同尘科技
如何接入?
1. 联系管理员索要,appid、channel、scope、appKey 您可以使用以下账户信息进行测试:appid: commonIframechannel: commonIframescope: allappKey: bb6681972a3744488e9a8c7521635099注意:其中 appKey 为私钥。2. 通过 appid、channel、stamp、timestamp 获取 sig。3. 通过 appid 获取 access_token。4. 使用 npm 安装 zhihui-editor-mobile-sdk5. 将 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
2. closeIframe — 关闭 iframe
打开 Iframe 配置参数说明
参数 | 说明 | 类型 | 默认值 | 是否必须 |
appid | 由管理员分配 | string | — | 是 |
channel | 由管理员分配 | string | — | 是 |
scope | 由管理员分配 | string | — | 是 |
teamId | 由管理员分配,获取业务方团队内容时配置 | string | — | 否 |
companyId | 由管理员分配,获取业务方公司内容时配置 | 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: '/2023/12/29/xxx.jpg', // 用户预览的缩略图 url: '/2023/12/29/xxx.jpg' // 实际添加到画布中的图片 } ], 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: '/2023/12/29/xxx.jpg', // 用户预览的缩略图 url: '/2023/12/29/xxx.jpg' // 实际添加到画布中的图片 } ], 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: '/2023/12/29/xxx.jpg', // 实际添加到画布中的图片 thumbUrl: '/2023/12/29/xxx.jpg' // 用户预览的缩略图 } ]]
请求 childUrl 数据API需要提供的参数
参数 | 说明 | 类型 | 默认值 |
Offset | 请求跳过数据数量 | number | — |
Limit | 获取数据的数量,不可更改 | number | 50 |
Keyword | 搜索关键词 | string | — |
Category | 分类参数 | number | string | — |
需要注意参数首字母为大写,并且当 Keyword 为空时,应返回默认数据。返回数据规定:
{ items: [ // 无限列表的数据 { thumbUrl: '/2023/12/29/xxx.jpg', // 用户预览的缩略图 url: '/2023/12/29/xxx.jpg' // 实际添加到画布中的图片 } ], 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: '/2023/12/29/2997b0c920be29c12c16ae3a2b2bc378.jpg', },]
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 说明
因为会有一些业务方提出个性化的定制化开发需求,因此将某些定制化的非通用性功能放在此配置中,如果您也有定制化功能的诉求,也可以随时联系我们的管理员。
对音视频的解决方案有疑惑?想了解解决方案收费? 联系解决方案专家
腾讯云限时活动1折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠
阿里云解决方案也看看?: 点击对比阿里云的解决方案
暂无评论,你要说点什么吗?