腾讯云智绘编辑器 SDK(移动端)接入文档_音视频解决方案_同尘科技

腾讯云智绘 2年前 (2023-03-02) 浏览 100

如何接入?

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折起,即将结束: 马上收藏

同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠

阿里云解决方案也看看?: 点击对比阿里云的解决方案

- 0人点赞 -

发表点评 (0条)

not found

暂无评论,你要说点什么吗?