稿定开放平台编辑器 SDK

浏览器版本要求

Chrome >= 60

Firefox >= 55

Safari >= 14

Edge >= 16

使用

yarn add @gaoding/editor-sdk
#or
npm install @gaoding/editor-sdk

模板编辑器

• 打开指定模板

  import { createTemplateEditor } from '@gaoding/editor-sdk';
  
  const editor = createTemplateEditor({
      appId: '在稿定开放平台应用详情里查看',
  });
  

  const res = await editor.openTemplate({ id: '模板ID', }); // 如果 res 为 false 表示没有进行导出操作 if (res) { // files 为导出的文件数组， urls 为导出的文件 url 地址 const { files, urls } = res; // ...do something }

• 导入文件， 比如 PSD,PPTX,AI

  import { createTemplateEditor } from '@gaoding/editor-sdk';
  
  const editor = createTemplateEditor({
      appId: '在稿定开放平台应用详情里查看',
  });
  
  const res = await editor.importFile();
  // 如果 res 为 false 表示没有进行导出操作
  if (res) {
      // files 为导出的文件数组， urls 为导出的文件 url 地址
      const { files, urls } = res;
      // ...do something
  }
  

• 创建空白画布

  import { createTemplateEditor } from '@gaoding/editor-sdk';
  
  const editor = createTemplateEditor({
      appId: '在稿定开放平台应用详情里查看',
  });
  
  const res = await editor.create({ width: 500, height: 500, categoryId: 1 });
  // 如果 res 为 false 表示没有进行导出操作
  if (res) {
      // files 为导出的文件数组， urls 为导出的文件 url 地址
      const { files, urls } = res;
      // ...do something
  }
  

图片编辑器

• 导入文件

  import { createImageEditor } from '@gaoding/editor-sdk';
  
  const editor = createImageEditor({
      appId: '在稿定开放平台应用详情里查看',
  });
  
  // editor.importFile(file: string | Blob) 支持 Blob 文件 和 url
  // 如果如果传的是 url 需要保证支持跨域
  const res = await editor.importFile(
      'https://st0.dancf.com/static/02/202104280445-9936.png',
  );
  
  // 如果 res 为 false 表示没有进行导出操作
  if (res) {
      // files 为导出的文件数组， urls 为导出的文件 url 地址
      const { files, urls } = res;
      // ...do something
  }
  

抠图编辑器

• 导入文件

  import { createKoutuEditor } from '@gaoding/editor-sdk';
  
  const editor = createKoutuEditor({
      appId: '在稿定开放平台应用详情里查看',
  });
  
  // editor.importFile(file: string | Blob) 支持 Blob 文件 和 url
  // 如果如果传的是 url 需要保证支持跨域
  const res = await editor.importFile(
      'https://st0.dancf.com/static/02/202104280445-9936.png',
  );
  
  // 如果 res 为 false 表示没有进行导出操作
  if (res) {
      // urls 为导出的文件 url 地址
      const { urls } = res;
      // ...do something
  }
  

• 高级版

  import { createKoutuEditor } from '@gaoding/editor-sdk';
  
  const editor = createKoutuEditor({
      appId: '在稿定开放平台应用详情里查看',
      version: 'KE002',
      async getUseRightToken(info) {
          //  使用权益的API
          return request
              .post('/demo-api/use-certs', {
                  app_id: info.appId,
                  ability_code: info.abilityCode,
              })
              .then(res => res.data);
      },
      getUserCode() {
          // 获取用户授权码的API
          return request
              .get('/demo-api/authorized/code', {
                  params: { app_id: formData.appId },
              })
              .then(res => res.data);
      },
  });
  
  // editor.importFile(file: string | Blob) 支持 Blob 文件 和 url
  // 如果如果传的是 url 需要保证支持跨域
  const res = await editor.importFile(
      'https://st0.dancf.com/static/02/202104280445-9936.png',
  );
  
  // 如果 res 为 false 表示没有进行导出操作
  if (res) {
      // urls 为导出的文件 url 地址
      const { urls } = res;
      // ...do something
  }