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>