腾讯云智绘编辑器 SDK（PC 端）接入文档_音视频解决方案_同尘科技

如何接入？

1. 联系管理员索要，appid、channel、scope、appKey 您可以使用以下账户信息进行测试：appid: commonIframechannel: commonIframescope: allappKey: bb6681972a3744488e9a8c7521635099注意：其中 appKey 为私钥。2. 通过 appid、channel、stamp、timestamp 获取 sig3. 通过 appid 获取 access_token4. 使用 npm 安装 zhihui-editor-sdk5. 将 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

 {zhihuiEditor.openIframe()}}>调起编辑器SDK

2. closeIframe — 关闭 iframe

 {zhihuiEditor.closeIframe()}}>关闭编辑器SDK

打开编辑器 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: '/2023/12/29/xxx.jpg'  }}

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

User 配置 Demo

let header = {} // 想要正确运行的话可以联系管理员获取header后进行请求
let option = {  ...  leftConfig: {    user: [      {        menuName: '测试',        menuIcon: '/2023/12/29/https://www.tongchenkeji.com/wp-content/uploads/2023/12/20231229064148-658e6a2cad023.jpg',        menuIconActive: '/2023/12/29/https://www.tongchenkeji.com/wp-content/uploads/2023/12/20231229064148-658e6a2cc9001.jpg',        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: '/2023/12/29/https://www.tongchenkeji.com/wp-content/uploads/2023/12/20231229064148-658e6a2cad023.jpg',        menuIconActive: '/2023/12/29/https://www.tongchenkeji.com/wp-content/uploads/2023/12/20231229064148-658e6a2cc9001.jpg',        type: 'showAll',        dataConfig: {          url: 'https://taishan.qq.com/api/ape/search',          headers: header,        }      },      {        menuName: '测试3',        menuIcon: '/2023/12/29/https://www.tongchenkeji.com/wp-content/uploads/2023/12/20231229064148-658e6a2cad023.jpg',        menuIconActive: '/2023/12/29/https://www.tongchenkeji.com/wp-content/uploads/2023/12/20231229064148-658e6a2cc9001.jpg',        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: '/2023/12/29/xxx.jpg',    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: '/2023/12/29/https://www.tongchenkeji.com/wp-content/uploads/2023/12/20231229064149-658e6a2d54067.jpg',  },]

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

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

对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

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

阿里云解决方案也看看？： 点击对比阿里云的解决方案