Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add editor readme #1

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 83 additions & 0 deletions README-EDITOR
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
# 稿定编辑器 SDK 接入说明
稿定编辑器 `SDK` 是对稿定能力的封装,以实现对设计服务的无缝对接,目前支持以下服务:

- [x] 平面编辑器
- [x] 图片编辑器
- [ ] TODO: H5编辑器
- [ ] TODO: 打通用户登录, 请联系定制

Npm 包参见:[@gaoding/editor-sdk](https://www.npmjs.com/package/@gaoding/editor-sdk)

### 平面编辑器
1. 海量创意模板快速生成
1. 支持指定数十种主流模板场景类目 (https://gaoding.com/templates)


### 图片编辑器
- [x] 1. 图片剪裁功能
- [x] 2. 图片增强、图片滤镜效果
- [x] 3. 图片添加水印、添加相框、添加文字
- [x] 4. 海量创意素材(文字、贴纸、边框、水印...)
- [ ] 5. 马赛克、涂鸦

##

### 在接入前,要做什么?
请先与我们联系(邮箱:`[email protected]`),以便我们安排专人接待,为合作方预设一些关键数据,如: `APPID`、`模板类目ID`

### 对接与调试
如合作方已经依本文档的定义实现了接口,我们需要合作方提供接入的域名信息,并记录到稿定的系统中,然后,由专人负责与合作方对接调试

### 安装
```shell
npm i @gaoding/editor-sdk
# or
yarn add @gaoding/editor-sdk
```

### npm 使用方式
```javascript
import { GdEditorSdk } from '@gaoding/editor-sdk';

const sdk = new GdEditorSdk({
// 区分编辑器类型 (图片编辑器、平面编辑器、H5编辑器)
appId: '由SDK方提供',
// onUpload 执行后,是否自动关闭弹窗,默认为 true
autoClose: true;
// 完成编辑器下载时触发
onUpload(blob) {
// 直接展示
const url = window.URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = url;
document.body.append(img);

// 上传的例子
const form = new FormData();
form.append('file', blob, 'gaoding.jpg');
axios.post('url', form, { headers: { 'Content-Type': 'multipart/form-data' } })
.then(res => {
alert('上传成功');
})
.catch(error => {
alert(error.message);
})
},
// 自定义iFrame样式
style: {}
})

// 打开弹窗
sdk.open({
ext: {
// 指定海报模板类目(图片、简历、GIF、LOGO、海报、表情头像、文章配图、适配封面。。。)
// ps: 使用场景为平面编辑器, 分类 ID 由 SDK方提供
third_cate_id: '',
// 指定编辑器底图
// ps: 使用场景为图片编辑器,需开放 CORS 跨域能力
image: 'https://st-gdx.dancf.com/materials/115030/shots/20190830-155521-WWU47.png'
}
});
// 关闭弹窗
sdk.close();
```