서버 통합

이 페이지에서는 Synap Editor를 백엔드 환경과 통합하는 방법을 설명합니다. 사용 중인 개발 환경에 맞는 아래 가이드를 참고하여 에디터를 연결합니다.

환경별 통합 가이드

  • Java Spring Framework 예제
  • Java Servlet 예제
  • ASP.NET (C#) 예제
  • ASP (Classic) 예제
  • PHP 예제
  • PHP4 예제
  • Django 예제
  • Ruby on Rails 예제
  • WordPress 플러그인 예제

아래 예제들은 에디터가 다음과 같이 구성되었다고 가정합니다:

// Synap Editor configuration
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 값에 해당합니다.

  • 요청 URL: http://hostname/uploadImage
  • 요청 메서드: POST
키설명필수타입
file업로드할 이미지 파일 (multipart/form-data)OBinary

[response]

이미지가 성공적으로 업로드되면, 고객 시스템은 다음 형식으로 응답을 반환해야 합니다:

{
    "uploadPath": "uploads/36a43f36f442b5824c6b061eb734553d.png"
}
키설명타입
uploadPath이미지가 업로드된 경로 (브라우저에서 접근할 수 있는 상대 경로나 전체 URL)String

Video 업로드

[request]

에디터는 업로드를 위해 지정된 고객 시스템 URL로 video를 전송합니다. 이 URL은 위에서 설정한 editor.upload.video.api 값에 해당합니다.

  • 요청 URL: http://hostname/uploadVideo
  • 요청 메서드: POST
키설명필수타입
file업로드할 Video 파일 (multipart/form-data)OBinary

[response]

video가 성공적으로 업로드되면, 고객 시스템은 다음 형식으로 응답을 반환해야 합니다:

{
    "uploadPath": "uploads/36a43f36f442b5824c6b061eb734553d.mp4"
}
키설명타입
uploadPathvideo가 업로드된 경로(브라우저에서 접근할 수 있는 상대 경로나 전체 URL)String

파일 업로드

주의가 필요한 파일 타입

  1. 문서 형식 (doc, docx, ppt, pptx, xls, xlsx, pdf, rtf, odt, ods, odp, hwp, hwpx, 등)
    • 매크로나 스크립트를 포함할 수 있음
    • 임포트 시에만 허용하는 것을 권장
  2. 마크업 / 스타일링 언어 (xml, css, svg, textile, html 등)
    • XSS 또는 스크립트 인젝션 위험
  3. 실행 파일 / 내장 파일 (swf, eof 등)
    • 직접 실행되거나 그 밖의 이유로 안전하지 않을 수 있음

[request]

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

  • 요청 URL: http://hostname/uploadFile
  • 요청 메서드: POST
키설명필수타입
file업로드할 파일 (multipart/form-data)OBinary

[response]

파일이 성공적으로 업로드되면, 고객 시스템은 다음 형식으로 응답을 반환해야 합니다:

{
    "uploadPath": "uploads/36a43f36f442b5824c6b061eb734553d.docx"
}
키설명타입
uploadPath파일이 업로드된 경로(브라우저에서 접근 가능한 상대 경로나 전체 URL)String

문서 임포트

임포트를 위한 문서 변환은 Synap Editor에서 제공하는 sedocConverter 모듈이 서버에서 수행합니다. 이 모듈은 Linux와 Windows를 지원합니다.

사용자가 에디터에서 임포트를 실행하면, 문서는 서버로 전송되고, sedocConverter에 의해 변환된 후 결과가 에디터로 다시 전송됩니다.

임포트를 실행하면, 문서는 editor.import.api에 설정된 API(예: /importDoc)로 전송됩니다. 백엔드 API 부분은 직접 구현해야 하며, 환경별 예제(예: ASP.NET (C#) 예제, PHP 예제 등)를 참고합니다.

에디터가 "editor.import.api": "/importDoc"로 구성된 경우, 요청과 응답은 다음과 같습니다.

[request]

클라이언트는 문서 임포트를 위해 지정된 URL로 문서 file을 전송합니다.

  • 요청 URL: http://hostname/importDoc
  • 요청 메서드: POST
키설명필수타입
file임포트할 문서 파일 (multipart/form-data)OBinary

[response]

문서 파일이 성공적으로 변환되면, 다음과 같은 응답이 클라이언트에게 반환되어야 합니다:

{
    "serializedData": [10, 213, 156, ...],
    "importPath": "works/36a43f36f442b5824c6b061eb734553d"
}
키설명타입
serializedData변환 후 클라이언트에서 사용할 수 있는 형태로 직렬화된 문서 모델Array
importPath변환된 파일이 압축 해제된 경로 (메타파일 경로를 해결하는 데 필요하며, 브라우저에서 접근 가능한 상대 경로여야 함)String

관련 정보


하위 문서