View Source

이후의 예제는 아래와 같이 SynapEditor 객체를 설정하였다고 가정합니다.

new SynapEditor('synapEditor', {
	'editor.upload.image.api': "/uploadImage",
	'editor.upload.video.api': "/uploadVideo",
	'editor.upload.file.api': "/uploadFile",
	'editor.import.api': "/importDoc"
});

이미지파일 업로드

[request]

이미지 업로드를 위해 지정한 고객 시스템의 URL로 에디터에서 해당 파일을 전송합니다. 이 URL은 앞서 설정된 editor.upload.image.api 값에 해당합니다.

Request URL: http://hostname/uploadImage
Request Method: POST

키	설명	필수	타입
file	업로드할 이미지 파일 (multipart/form-data)	O	Binary

[response]

이미지가 정상적으로 업로드되면, 고객 시스템에서는 아래와 같은 응답을 돌려주어야 합니다.

{
    "uploadPath":"uploads/36a43f36f442b5824c6b061eb734553d.png"
}

키	설명	타입
uploadPath	이미지가 업로드된 경로 (브라우저에서 접근할 수 있는 상대경로 또는 전체 URL)	String

동영상 업로드

[request]

동영상 업로드를 위해 지정한 고객 시스템의 URL로 에디터에서 해당 파일을 전송합니다. 이 URL은 앞서 설정된 editor.upload.video.api 값에 해당합니다.

Request URL: http://hostname/uploadVideo
Request Method: POST

키	설명	필수	타입
file	업로드할 동영상 파일 (multipart/form-data)	O	Binary

[response]

동영상이 정상적으로 업로드되면, 고객 시스템에서는 아래와 같은 응답을 돌려주어야 합니다.

{
    "uploadPath":"uploads/36a43f36f442b5824c6b061eb734553d.mp4"
}

키	설명	타입
uploadPath	동영상이 업로드된 경로 (브라우저에서 접근할 수 있는 상대경로 또는 전체 URL)	String

Uploading an arbitrary file

업로드 가능한 파일 확장자 안내

⚠️ 주의가 필요한 파일 형식
1. 문서 계열 (doc, docx, ppt, pptx, xls, xlsx, pdf, rtf, odt, ods, odp, hwp, hwpx 등)
- 매크로나 스크립트가 포함될 수 있음
- 서버에서 미리보기용으로 PDF 또는 PNG 등으로 변환 후 제공하는 것이 안전함

2. 마크업 / 스타일 언어 (xml, css, svg, textile, html 등)
- XSS나 스크립트 삽입 위험이 있음
- 반드시 sanitize(정화) 과정을 거쳐야 안전함

3. 실행 파일 / 임베디드 파일 (swf, eof 등)
- 직접 실행될 수 있거나 안전하지 않음
- 일반적으로 업로드 차단을 권장

[request]

임의의 파일 업로드를 위해 지정한 고객 시스템의 URL로 에디터에서 해당 파일을 전송합니다. 이 URL은 앞서 설정된 editor.upload.file.api 값에 해당합니다.

Request URL: http://hostname/uploadFile
Request Method: POST

키

설명

필수

타입

file

업로드할 파일 (multipart/form-data)

file to be uploaded

O

Binary

[response]

동영상이 정상적으로 업로드되면, 고객 시스템에서는 아래와 같은 응답을 돌려주어야 합니다.

{
    "uploadPath":"uploads/36a43f36f442b5824c6b061eb734553d.docx"
}

키	설명	타입
uploadPath	파일이 업로드된 경로 (브라우저에서 접근할 수 있는 상대경로 또는 전체 URL)	String

문서 임포트

임포트를 위한 문서변환은 Synap Editor가 제공하는 sedocConverter 모듈에 의해 서버에서 이루어진다(sedocConverter는 Linux, Windows 환경을 지원한다).
사용자가 에디터에서 임포트를 실행하면 문서는 서버로 전송되고 sedocConverter 모듈로 변환 후 변환결과가 에디터로 전송된다.

사이냅 에디터 문서 > 서버연동 > import.PNG

에디터에서 임포트가 실행되면 'editor.import.api'에 지정된 API(예; "/importDoc")로 문서가 전송된다.
이 때 Back-end API 부분은 아래 개발환경 별 Example을 참고하여 직접 구현해야 한다.

에디터 환경설정에서 임포트를 "editor.import.api": "/importDoc" 와 같이 설정한 경우 아래와 같이 요청과 응답이 이루어진다.

[request]

클라이언트에서 문서 임포트를 위해 지정한 URL에 file(문서)를 전송한다.

Request URL: http://hostname/importDoc
Request Method: POST

키	설명	필수	타입
file	임포트할 문서 파일 (multipart/form-data)	O	Binary

[response]

문서 파일이 정상적으로 변환되면 아래와 같은 응답을 클라이언트로 전송해줘야 한다.

{
    "serializedData":[10, 213, 156, ...],
    "importPath": "works/36a43f36f442b5824c6b061eb734553d"
}

키	설명	타입
serializedData	문서 변환 후 클라이언트에서 사용할 수 있는 형태로 문서 모델을 직렬화 한 데이터	Array
importPath	변환된 파일의 압축을 푼 경로 (메타 파일 경로 참조시 필요하며, 브라우저에서 접근할 수 있는 상대 경로여야 함.)	String