模板编辑器

特别说明：该版本已停止售卖，请联系商务查看高阶版本的模板设计SDK。

通过 JavaScript SDK 的方式，将稿定编辑器添加到网站中

使用前提

使用前需在开发平台创建应用, 并在应用中添加模板编辑器产品，可参考入驻指引了解。

步骤1: 添加域名白名单

使用编辑器产品时，出于安全考量，需将应用和网站域名进行绑定。未绑定的域名为非法域名，会出现403静止访问的提示

具体操作看添加域名白名单

步骤2: 安装 JavaScript SDK

安装的方式有两种

第一种通过 NPM 方式

<code>npm i @gaoding/editor-sdk@next
# or
yarn add @gaoding/editor-sdk@next</code>

第二种通过 CDN 方式

<code><script src="https://open.gaoding.com/assets/editor-sdk-v2.js"></script></code>

该方式的优点是使用简单并且保证 sdk 为最新版本，不用因 SDK 更新而重新安装

步骤3: 实例化模板编辑器

参数中的 appId 可在我的应用中点击应用详情-基础信息中查看

<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.createMobileTemplateEditor({
                appId: '在稿定开放平台应用详情里查看',
                async authorize() {
                    // return "xxxxxx" 返回授权码
                },
                async getUseRightCert(info) {
                    // return  'xxxx' 返回权益标识
                },
            });
        </script>
    </body>
</html></code>

authorize 方法，该方法返回调用开放平台获取授权码返回的 code 字段。具体调用方式查看获取授权码

getUseRightCert 方法，该方法用于扣减权益。具体调用方式查看扣减权益

例子

下面例子中，展示了如何使用稿定模板编辑器创建一个空白画布。

<code><!DOCTYPE html>
<html>
    <head>
      <script src="https://open.gaoding.com/assets/editor-sdk-v2.js"></script>
    </head>
    <body>
        <button>创建模板</button>
        <script type="text/javascript">
            const editor = window.gaoding.createTemplateEditor({
                appId: '在稿定开放平台应用详情里查看',
                async authorize() {
                    // return "xxxxxx" 返回授权码
                },
                async getUseRightCert(info) {
                    // return  'xxxx' 返回权益标识
                },
            });
            function create() {
                editor.createDesign().then(res => {
                    // 如果 res 为 false 表示没有进行导出操作
                    if (res) {
                        editor.close();
                        // files 为导出的文件数组
                        const { files } = res;
                        console.log(files);
                        // ...do something
                    }
                })
            }
            document.querySelector('button').addEventListener('click', create);
        </script>
    </body>
</html></code>

例子

下面以 Node 环境为例子，模拟鉴权和扣除权益的流程

server.js

<code>const axios = require('axios');
const express = require('express');
const {
    createHmac
} = require('crypto');

const app = express();

axios.defaults.baseURL = 'https://open-api.gaoding.com';
axios.interceptors.request.use(async (config) => {
    const timestamp = Math.floor(Date.now() / 1000);
    const ak = '控制台查看AK';
    const sk = '控制台查看SK';
    config.headers['x-AccessKey'] = ak;
    config.headers['x-Timestamp'] = timestamp;
    let canonicalRequest = `${config.method.toUpperCase()}@${(config.url + '/').replace(
            /\/\/$/,
            '/',
        )}`;
    if (config.params) {
        const qs = Object.keys(config.params || {})
            .sort()
            .map((k) => `${k}=${config.params[k]}`)
            .join('&');
        canonicalRequest += `@${qs}`;
    } else {
        canonicalRequest += '@';
    }
    canonicalRequest += `@${timestamp}`;
    if (config.data) {
        canonicalRequest += `@${JSON.stringify(config.data)}`;
    }
    console.log(canonicalRequest);
    config.headers['x-Signature'] = createHmac('sha1', sk)
        .update(canonicalRequest)
        .digest('base64');
    console.log(config);
    return config;
});

app.get('/user-code', async (request, response) => {
    // 调用开放平台获取授权码接口
    const {
        data
    } = await axios.get(
        '/api/authorized/code', {
            params: {
                app_id: request.query.app_id,
                uid: request.query.uid,
            },
            headers: {

            }
        });
    response.send({
        code: data.code,
    });
});

app.get('/user-right', async (request, response) => {
    // 调用开放平台扣除用户权益接口
    const {
        data
    } = await axios.post('/api/use-cert', {
        app_id: request.query.app_id,
        ability_code: request.query.ability_code,
        works_id: request.query.works_id,
    });

    response.send({
        use_cert: data.use_cert,
    });
});

app.listen(3000);</code>

index.html