편집기 띄우기

편집기를 띄우는 정식 메서드는 셋입니다. 모두 EditorSession을 반환하고, 모두 공통 옵션에 각자 고유한 필드를 더합니다.

어떤 메서드를 쓸까요

하려는 것	메서드
템플릿으로 새 프로젝트를 만들어 편집합니다	`createProject`
저장된 프로젝트를 다시 엽니다	`openProject`
기존 프로젝트를 재활용해 새 프로젝트를 만듭니다. 사용자 사진은 제거됩니다	`recycleProject`

메서드	필수 옵션	고유 옵션
`createProject(o)`	`ps_code`, `title`, `token`, `parent_element`	`ps_code_param?`, `template_uri?`, `content_uri?`
`openProject(o)`	`project_id`, `token`, `parent_element`	`ps_code?`
`recycleProject(o)`	`project_id`, `title`, `token`, `parent_element`	없음

EditorSession을 반환하는 experimental 메서드도 둘 있습니다. reformProject, fitProject입니다. v2에 문서 없이 있던 명령을 그대로 옮긴 것이라 옵션 타입이 느슨하고(ExperimentalLaunchOptions), SDK가 확인하는 필수 옵션은 parent_element와 token뿐입니다. 안정 계약으로 보장하지 않으니 새 연동에는 위 세 메서드를 쓰세요. 나머지 experimental 메서드까지 포함한 목록은 띄우기 옵션에 있습니다.

옵션 이름은 project_id지만 편집기 URL에는 prjid로 나갑니다. SDK가 변환해 줍니다. 같은 개념의 철자가 여러 개인 이유는 용어집에 있습니다.

새 프로젝트 만들기

import { createEdicusClient } from '@edicus/sdk'

const edicus = createEdicusClient()

const session = edicus.createProject({
  parent_element: document.getElementById('editor-mount')!,
  token,
  partner: '<파트너 코드>',
  ps_code: '90x50@NAMECARD',
  template_uri: 'gcs://template/partners/<파트너 코드>/res/template/<템플릿 ID>.json',
  title: '내 명함',
  mobile: 'm2',
})

const { project_id } = await session.waitFor('project-id-created')

새 프로젝트의 id는 project-id-created 이벤트로 한 번 옵니다. 이 id를 저장해 두지 않으면 나중에 그 프로젝트를 다시 열 수 없습니다.

저장된 프로젝트 열기

const session = edicus.openProject({
  parent_element: el,
  token,
  project_id: '-LiBngTbCFYNjcOVcxcY',
})

주문된 프로젝트(ordered)는 편집기로 띄우지 않도록 주의하세요. 띄워서 수정하더라도 이미 주문된 정보는 바뀌지 않습니다. 비동기 복제가 진행 중인 프로젝트(cloning)를 열면 로드에 실패합니다.

자주 쓰는 공통 옵션

전체 목록은 띄우기 옵션 레퍼런스에 있습니다. 여기서는 처음에 알아야 할 것만 봅니다.

HTMLElement

required

편집기 iframe이 들어갈 요소입니다. 이 요소에 크기가 없으면 편집기가 보이지 않습니다.

string

required

서버에서 발급받은 토큰입니다. 토큰과 API 키를 보세요.

string

모션원에서 발급받은 파트너 코드입니다.

string

사이즈코드와 상품코드를 @로 붙인 값입니다. 예: 90x50@NAMECARD

string

템플릿 리소스의 uri입니다. 예: gcs://template/partners/<파트너 코드>/res/template/<템플릿 ID>.json상품 설정의 편집기 종류가 template인 상품은 createProject에 template_uri가 필요합니다. 사진인화(print) 상품은 template_uri를 읽지 않으므로 넘기지 않아도 됩니다.

boolean | 'm2'

default:"false"

모바일 UI를 쓸지 정합니다. false는 PC UI, true는 기존 모바일 UI, 'm2'는 신규 모바일 UI입니다.

'standard' | 'preview' | 'vdp'

생략하거나 'standard'면 일반 편집입니다. 'preview'는 사진인화 상품의 확인용 화면이고, 'vdp'는 가변 데이터 편집 모드입니다.

number

포토북 내지 스프레드의 장수입니다. 주지 않으면 템플릿에 있는 그대로 만듭니다.TnView와 Preview의 npage(한 화면에 보여줄 페이지 수)와는 다른 개념입니다. 이름이 비슷해 혼동하기 쉽습니다.

boolean

default:"false"

true면 저장 버튼이 나가기로 바뀝니다. 누르면 저장하지 않고 바로 goto-cart를 보냅니다.

'ko' | 'en' | 'ja'

언어 코드입니다. 생략하면 편집기가 'ko'로 씁니다.

string

달력 날짜 생성 커맨드입니다. '2019-1'이면 2019년 1월부터 12개월 달력을 만듭니다.

필수 옵션을 빠뜨리면

띄우기 메서드는 필수 옵션이 없으면 iframe을 만들기 전에 동기로 예외를 던집니다. 메시지에 어느 키가 빠졌는지 들어 있습니다.

[edicus-sdk] createProject: 'ps_code' is required

v2는 필수 파라미터가 빠져도 검증 없이 깨진 URL을 만들었습니다. 원인을 알기 어려운 방식으로 실패했었는데, v3에서 고쳤습니다.

띄운 뒤에 프로젝트나 템플릿 바꾸기

iframe을 새로 만들지 않고 내용만 교체할 수 있습니다.

session.changeProject('PROJECT_ID')
session.changeTemplate({ ps_code: '90x50@NAMECARD', template_uri: 'gcs://...' })

changeTemplate의 template_uri와 content_uri는 띄우기 URL과 같은 방식으로 쿼리스트링이 제거됩니다. 서명된 URL의 토큰이 편집기 URL로 새는 것을 막기 위한 처리입니다.

시작하기

개념

편집기 SDK

서버 연동

레퍼런스

어떤 메서드를 쓸까요

새 프로젝트 만들기

저장된 프로젝트 열기

자주 쓰는 공통 옵션

필수 옵션을 빠뜨리면

띄운 뒤에 프로젝트나 템플릿 바꾸기

다음 단계

세션 API

띄우기 옵션 전체

​어떤 메서드를 쓸까요

​새 프로젝트 만들기

​저장된 프로젝트 열기

​자주 쓰는 공통 옵션

​필수 옵션을 빠뜨리면

​띄운 뒤에 프로젝트나 템플릿 바꾸기

​다음 단계

세션 API

띄우기 옵션 전체

어떤 메서드를 쓸까요

새 프로젝트 만들기

저장된 프로젝트 열기

자주 쓰는 공통 옵션

필수 옵션을 빠뜨리면

띄운 뒤에 프로젝트나 템플릿 바꾸기

다음 단계