createImageEditor(初始化)
编辑器实例化API参数说明
编辑器实例化，这是你使用编辑器 API 的前置过程。
通过CDN方式
会在 window 对象中添加一个 gaoding 字段, 开发者可通过 gaoding 对象进行实例化编辑器
<!DOCTYPE html>
<html>
<head>
<script src="https://open.gaoding.com/assets/editor-sdk-v2.js"></script>
</head>
<body>
<script type="text/javascript">
const editor = window.gaoding.createImageEditor({
appId: '在稿定开放平台应用详情里查看',
});
</script>
</body>
</html><code><!DOCTYPE html>
<html>
<head>
<script src="https://open.gaoding.com/assets/editor-sdk-v2.js"></script>
</head>
<body>
<script type="text/javascript">
const editor = window.gaoding.createImageEditor({
appId: '在稿定开放平台应用详情里查看',
});
</script>
</body>
</html></code>通过 npm 方式
import { createImageEditor } from '@gaoding/editor-sdk';
const editor = createImageEditor({
appId: '在稿定开放平台应用详情里查看',
});<code>import { createImageEditor } from '@gaoding/editor-sdk';
const editor = createImageEditor({
appId: '在稿定开放平台应用详情里查看',
});</code>实例化参数
options.appId(必填)
类型: string
使用的应用ID，可在控制台-应用详情-基础信息查看
const editor = createImageEditor({
appId: 'xxxxx',
});<code>const editor = createImageEditor({
appId: 'xxxxx',
});</code>options.container
类型: string | HTMLElement
选择嵌入的元素容器。填写 container 后，编辑器将会嵌入在指定的容器中。 在开发者希望不使用默认弹窗的展示形式时可自定义。
const editor = createImageEditor({
appId: 'xxxxx',
container: '#app'
});<code>const editor = createImageEditor({
appId: 'xxxxx',
container: '#app'
});</code>options.onCloseModal
类型: () => Promise<void | false> | void | false
弹窗形式打开编辑器的情形下，点击关闭按钮时触发关闭弹窗，但如果函数返回 false 则会终止关闭编辑器（该方法可用于防止用户误操作关闭）。
const editor = createImageEditor({
appId: 'xxxxx',
onCloseModal() {
return confirm('确定要关闭编辑器?');
}
});<code>const editor = createImageEditor({
appId: 'xxxxx',
onCloseModal() {
return confirm('确定要关闭编辑器?');
}
});</code>options.authorize（必填）
类型: () => Promise<string>
进行开发者系统的用户账户与稿定系统的账户绑定，开启该功能后，使用编辑器的用户不需要手动登录稿定账户。而是在打开编辑器时，通过开发者提供的授权码进行登录。 点击查看获取稿定账户授权码文档。
const editor = createImageEditor({
appId: 'xxxxx',
async authorize() {
// 与开放者自己的服务器通信，返回用户授权码
return fetch('/gaoding/authorize')
.then(res => res.json())
.then(res => {
// 请确认该返回值是字符串
console.log(res.data.code);
return res.data.code;
})
}
});<code>const editor = createImageEditor({
appId: 'xxxxx',
async authorize() {
// 与开放者自己的服务器通信，返回用户授权码
return fetch('/gaoding/authorize')
.then(res => res.json())
.then(res => {
// 请确认该返回值是字符串
console.log(res.data.code);
return res.data.code;
})
}
});</code>options.getUseRightCert
仅配置了 authorize 参数时生效
类型: (info: { appId: string; abilityCode: string; workId: string; }) => Promise<string | false | Error>
当平台方允许用户下载作品时，用该方法可获取权益凭证。 目前 abilityCode 只有 IE002 。当用户点击保存时触发。要求开放者返回一个凭证字符串。 如果开放者返回 false 或者 Error 时，则判断为开发者拒接用户使用凭证。 因该函数支持返回 Promise ，故平台开发者也可在这钩子函数中做用户的权益判断。 比如付费操作等。 点击查看扣减权益文档。
const editor = createImageEditor({
appId: 'xxxxx',
async authorize() {
// 与开放者自己的服务器通信，返回用户授权码
return fetch('/gaoding/authorize')
.then(res => res.json())
.then(res => {
// 请确认该返回值是字符串
console.log(res.data.code);
return res.data.code;
})
},
async getUseRightCert(info) {
// 判断用户是否有权益使用。以下为伪代码，当用户是会员时才允许下载图片，否则需要购买会员
// 注：需要将info内的参数传递给后端
if (user.isVip) {
return fetch('后端接口地址', {
headers: {
'content-type': 'application/json',
},
params: {
app_id: info.appId,
works_id: info.workId,
ability_code: info.abilityCode,
},
})
.then((res) => res.json())
.then((res) => res.use_cert);
} else {
await user.buyVip();
if (user.isVip) {
return fetch('后端接口地址', {
headers: {
'content-type': 'application/json',
},
params: {
app_id: info.appId,
works_id: info.workId,
ability_code: info.abilityCode,
},
})
.then((res) => res.json())
.then((res) => res.use_cert);
}
return new Error('你当前不是VIP用户, 请先开通后使用')
}
}
});<code>const editor = createImageEditor({
appId: 'xxxxx',
async authorize() {
// 与开放者自己的服务器通信，返回用户授权码
return fetch('/gaoding/authorize')
.then(res => res.json())
.then(res => {
// 请确认该返回值是字符串
console.log(res.data.code);
return res.data.code;
})
},
async getUseRightCert(info) {
// 判断用户是否有权益使用。以下为伪代码，当用户是会员时才允许下载图片，否则需要购买会员
// 注：需要将info内的参数传递给后端
if (user.isVip) {
return fetch('后端接口地址', {
headers: {
'content-type': 'application/json',
},
params: {
app_id: info.appId,
works_id: info.workId,
ability_code: info.abilityCode,
},
})
.then((res) => res.json())
.then((res) => res.use_cert);
} else {
await user.buyVip();
if (user.isVip) {
return fetch('后端接口地址', {
headers: {
'content-type': 'application/json',
},
params: {
app_id: info.appId,
works_id: info.workId,
ability_code: info.abilityCode,
},
})
.then((res) => res.json())
.then((res) => res.use_cert);
}
return new Error('你当前不是VIP用户, 请先开通后使用')
}
}
});</code>