설치

3.4.0 버전부터 지원합니다.

설치
설정
- 2.1 라이선스 설정
에디터 초기화 및 내용 저장
- 3.1 <div> 태그 사용
- 3.2 <textarea> 태그 사용
에디터 내용 저장 및 불러오기
- 4.1 에디터 내용 저장
- 4.2 에디터 내용 불러오기
플러그인 및 외부 모듈 적용
임포트 및 업로드 API 설정
임포트 기능 런타임 환경
iframe 사용 시 스타일 적용
콘텐츠 보안 정책(CSP) 설정 가이드

1. 설치

Synap Editor 설치 파일은 다음과 같이 구성되어 있습니다:

패키지	파일 이름
Synap Editor + 임포트 모듈	`SynapEditor_3.x.x.zip`
메타파일 변환용 폰트	`fonts.zip`

설치 파일을 원하는 경로에 복사하고 압축을 풉니다.

이 가이드에서는 파일을 /workspace에 복사해 압축을 푼다고 가정합니다. 또한 이 가이드는 /workspace가 웹 루트(WEB ROOT)라고 가정합니다.

SynapEditor_3.x.x.zip의 압축을 해제하면 다음과 같은 디렉터리 구조가 생성됩니다:

경로	내용	설명
`/workspace/SynapEditor_3.x.x/SynapEditor`		`externals` : 외부 모듈 디렉터리 `iframeMode` : iframeMode 디렉터리 `lang` : 언어 디렉터리 `plugins` : 플러그인 디렉터리 `theme` : 테마 디렉터리 `license.json` : 라이선스 파일 `synapeditor.config.js` : 설정 파일 2.13.0 버전부터 `synapeditor.pkgd.min.js`와 `synapeditor.pkgd.min.css`는 더 이상 제공되지 않습니다. 이 번들 파일들은 Synap Editor에서 제공하는 모든 플러그인을 포함하고 있었습니다. 번들 크기가 크기 때문에, `synapeditor.min.js`를 사용하고 실제로 필요한 플러그인만 추가하는 것을 권장합니다.
`/workspace/SynapEditor_3.x.x/sedocConverter`	Windows Linux	임포트 모듈(실행 파일) Windows: `sedocConverter.exe` 및 다양한 DLL Linux: `sedocConverter_exe`

또한 /workspace에서 fonts.zip 파일의 압축을 해제합니다.

경로	설명
`/workspace/fonts`	문서 임포트 중 메타파일(wmf/emf)을 변환하는 데 사용되는 폰트 파일

2. 설정

2.1 라이선스 설정

synapeditor.config.js를 열고 license.json 파일의 경로를 지정합니다. 경로는 브라우저에서 접근 가능해야 합니다.

// synapeditor.config.js
{
  /**
   * Specifies the path to the license file, or a license object.
   * ex) '/synapeditor/license.json'
   * ex) {
   *   'company': 'Synapsoft',
   *   'key': [
   *     'licenseKey'
   *   ]
   * }
   */
  'editor.license': 'synapeditor/license.json',
  ...
}

3. 에디터 초기화 및 내용 저장

설정 파일을 사용하여 에디터를 초기화합니다. 아래 설명을 참고하여 <div> 또는 <textarea> 태그를 사용해 에디터를 초기화할 수 있습니다.

3.1 `<div>` 태그 사용하기

3.1.1 `<script>` 및 `<link>` 태그를 사용하여 JS 및 CSS 파일을 포함합니다.

3.1.2501 버전부터 지원에서는 CSS 포함 방법에 대해 스타일 설정 가이드를 참고합니다.

<link href='SynapEditor/synapeditor.min.css' rel='stylesheet' type='text/css'>
<script src='SynapEditor/synapeditor.config.js'></script>
<script src='SynapEditor/synapeditor.min.js'></script>

3.1.2 문서 임포트 관련 모듈을 포함합니다.

xlsx, docx, hwp와 같은 문서의 임포트를 활성화하려면, 에디터 패키지의 externals 폴더에 위치한 SEDocModelParser 및 SEShapeManager 모듈을 포함합니다.

<script src="externals/SEDocModelParser/SEDocModelParser.min.js"></script>
<script src="externals/SEShapeManager/SEShapeManager.min.js"></script>

3.1.3 `<div>` 태그를 사용하여 새로운 Synap Editor 인스턴스 생성

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <title>Synap Editor | Unlimited Rich Text Editor</title>

  <link href="SynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
  <script src="SynapEditor/synapeditor.config.js"></script>
  <script src="SynapEditor/synapeditor.min.js"></script>
  <script>
    function initEditor() {
      var se = new SynapEditor("synapEditor", synapEditorConfig);
    }
  </script>
</head>
<body onload="initEditor();">
  <div id="synapEditor" style="height:700px;"></div>
</body>
</html>

3.1.4 작성한 내용을 HTML form 태그를 사용하여 저장합니다.

아래 예제는 jQuery를 사용하여 POST 요청을 보냅니다.

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <title>Synap Editor | Unlimited Rich Text Editor</title>
  <link href="SynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="SynapEditor/synapeditor.config.js"></script>
  <script src="SynapEditor/synapeditor.min.js"></script>
  <script>
    $(document).ready(function() {
      var se = new SynapEditor("synapEditor", synapEditorConfig);

      $('#seform').on('submit', function() {
        $('#editor').val( se.getPublishingHtml() );
        return true;
      });
    });
  </script>
</head>
<body>
  <div style="height:700px;">
    <div id="synapEditor"></div>
  </div>
  <form id="seform" name="seform" action="/save" method="post">
    <textarea id="editor" style="display:none"></textarea>
    <input type="submit" value="SAVE"/>
  </form>
</body>
</html>

3.2 `<textarea>` 태그 사용하기

3.2.1 `<script>` 및 `<link>` 태그를 사용하여 JS 및 CSS 파일을 포함합니다.

<link href='SynapEditor/synapeditor.min.css' rel='stylesheet' type='text/css'>
<script src='SynapEditor/synapeditor.config.js'></script>
<script src='SynapEditor/synapeditor.min.js'></script>

3.2.2 문서 임포트 관련 모듈을 포함합니다.

xlsx, docx, hwp와 같은 문서의 임포트를 활성화하려면, 에디터 패키지의 externals 폴더에 위치한 SEDocModelParser 및 SEShapeManager 모듈을 포함합니다.

<script src="externals/SEDocModelParser/SEDocModelParser.min.js"></script>
<script src="externals/SEShapeManager/SEShapeManager.min.js"></script>

3.2.3 `<textarea>` 태그를 사용하여 새로운 Synap Editor 인스턴스 생성하기

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <title>Synap Editor | Unlimited Rich Text Editor</title>

  <link href="SynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
  <script src="SynapEditor/synapeditor.config.js"></script>
  <script src="SynapEditor/synapeditor.min.js"></script>
  <script>
    function initEditor() {
      var se = new SynapEditor("synapEditor", synapEditorConfig);
    }
  </script>
</head>
<body onload="initEditor();">
  <div style="height:700px;">
    <textarea id="synapEditor"></textarea>
  </div>
</body>
</html>

textarea에 내용이 있으면, 에디터는 해당 내용으로 초기화됩니다. (2.12.0 버전부터 지원)

Code

<div>
  <textarea id="synapEditor"><p>Initializing Synap Editor.</p></textarea>
</div>

Result

1.00

3.2.4 HTML form 태그를 사용하여 작성한 내용을 저장합니다.

아래 예제는 jQuery를 사용하여 POST 요청을 보냅니다.

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <title>Synap Editor | Unlimited Rich Text Editor</title>
  <link href="SynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="SynapEditor/synapeditor.config.js"></script>
  <script src="SynapEditor/synapeditor.min.js"></script>
  <script>
    $(document).ready(function() {
      var se = new SynapEditor("synapEditor", synapEditorConfig);
    });
  </script>
</head>
<body>
  <form id="seform" name="seform" action="/save" method="post">
    <div style="height:700px;">
      <textarea id="synapEditor"></textarea>
    </div>
    <input type="submit" value="SAVE"/>
  </form>
</body>
</html>

4. 에디터 내용 저장 및 불러오기

4.1 에디터 내용 저장

getPublishingHtml()

에디터의 내용을 HTML로 가져옵니다.

에디터의 내용을 데이터베이스나 HTML 파일에 저장할 때 이것을 사용합니다.

var html = editor.getPublishingHtml();

4.2 에디터 내용 불러오기

openHTML()

에디터 안에 HTML을 표시합니다.

이것은 데이터베이스 또는 HTML 파일에서 에디터로 내용을 표시할 때 사용합니다.

var html = "<H1>Synap Editor</H1><P>Holistic Rich Text Editor</P>";
editor.openHTML(html);

5. 플러그인 및 외부 모듈 적용

아래와 같이 Synap Editor에서 제공하는 다양한 플러그인을 적용할 수 있습니다. 각 플러그인에 대한 자세한 정보는 플러그인 페이지를 참고합니다.

플러그인 파일 불러오기

<!-- Note: Plugin files must be included after the Synap Editor file. -->

<!-- Synap Editor file -->
<link rel="stylesheet" href="../synapeditor.min.css">
<script src="../synapeditor.min.js"></script>

<!-- Plugin file -->
<link rel="stylesheet" href="../plugins/webAccessibilityChecker/webAccessibilityChecker.min.css">
<script src="../plugins/webAccessibilityChecker/webAccessibilityChecker.min.js"></script>

플러그인 UI 만들기

<script>
  new SynapEditor('ID of the HTML element to initialize the editor on', {
    //...
    'editor.toolbar': [
      //...
      'webAccessibilityChecker' // To expose the button provided by the plugin in the UI, use the plugin's UI name as you would any other editor setting.
      //...
    ]
    //...
  });
</script>

외부 모듈 적용하기

CodeMirror, formulaParser, SEDocModelParser, SEShapeManager와 같은 외부 모듈을 적용하여 더욱 강력한 편집 기능을 사용할 수 있습니다.

외부 모듈	용도
CodeMirror	소스 코드를 더 보기 좋게 표시하고 편집을 쉽게 만듭니다.
formulaParser	에디터의 표를 확장하여 스프레드시트(엑셀 스타일) 함수들을 사용할 수 있게 합니다.
SEDocModelParser	에디터를 확장하여 `hwp`, `doc`, `docx`, `xls`, `xlsx` 문서를 임포트할 수 있게 합니다.
SEShapeManager	에디터를 확장하여 Shape가 포함된 문서를 임포트하고 해당 Shape를 표시할 수 있게 합니다. Shape Editor 플러그인에 필수입니다.

자세한 적용 방법은 외부 모듈 페이지를 참고합니다.

플러그인 및 외부 모듈 적용 예시

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <title>Synap Editor | Unlimited Rich Text Editor</title>

  <!-- Synap Editor -->
  <link href="SynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
  <script src="SynapEditor/synapeditor.config.js"></script>
  <script src="SynapEditor/synapeditor.min.js"></script>

  <!-- Synap Editor Plugins -->
  <!-- Shape Editor / supported from v2.8.0 -->
  <script src="SynapEditor/plugins/shapeEditor/shapeEditor.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/shapeEditor/shapeEditor.min.css">
  <!-- Personal Data Protection -->
  <script src="SynapEditor/plugins/personalDataProtection/personalDataProtection.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/personalDataProtection/personalDataProtection.min.css">
  <!-- Special Characters / Emoji -->
  <script src="SynapEditor/plugins/characterPicker/characterPicker.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/characterPicker/characterPicker.min.css">
  <!-- Web Accessibility Checker -->
  <script src="SynapEditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.css">
  <!-- Photo Editor -->
  <script src="SynapEditor/plugins/tuiImageEditor/tuiImageEditor.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.css">
  <!-- Horizontal Line Extension -->
  <script src="SynapEditor/plugins/horizontalLineExtension/horizontalLineExtension.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/horizontalLineExtension/horizontalLineExtension.min.css">
  <!-- Quote Extension -->
  <script src="SynapEditor/plugins/quoteExtension/quoteExtension.min.js"></script>
  <link rel="stylesheet" href="synapeditor/plugins/quoteExtension/quoteExtension.min.css">

  <!-- Synap Editor Externals -->
  <script type="text/javascript" src='SynapEditor/externals/formulaParser/formula-parser.min.js'></script>
  <!-- supported from v2.8.0 -->
  <script type="text/javascript" src='SynapEditor/externals/SEDocModelParser/SEDocModelParser.min.js'></script>
  <!-- supported from v2.8.0 -->
  <script type="text/javascript" src='SynapEditor/externals/SEShapeManager/SEShapeManager.min.js'></script>

  <!-- CodeMirror -->
  <script type="text/javascript" src='SynapEditor/externals/codeMirror/codemirror.min.js'></script>
  <script type="text/javascript" src="SynapEditor/externals/codeMirror/xml.min.js"></script>
  <link rel='stylesheet' href='SynapEditor/externals/codeMirror/codemirror.min.css'>

  <script>
    function initEditor() {
      var se = new SynapEditor("synapEditor", synapEditorConfig);
    }
  </script>
</head>
<body onload="initEditor();">
  <div style="height:700px;">
    <div id="synapEditor"></div>
  </div>
</body>
</html>

// synapeditor.config.js
{
  'editor.toolbar': [
    //...,
    'personalDataProtection',
    'specialCharacter', 'emoji',
    'tuiImageEditor',
    'WebAccessibilityChecker',
    //...
  ],
}

6. 임포트 및 업로드 API 설정

이미지, 비디오, 파일 업로드와 문서 임포트(doc, docx, hwp, xls, xlsx)를 처리하려면, 설정 파일에서 임포트 및 업로드 API 경로를 설정합니다.

필수 API(/importDoc, /uploadImage, /uploadVideo, /uploadFile)는 백엔드에서 구현되어야 합니다. 자세한 내용은 서버 연동 매뉴얼을 참고합니다.

// synapeditor.config.js
{
  'editor.import.api': '/importDoc',
  'editor.upload.image.api': '/uploadImage',
  'editor.upload.video.api': '/uploadVideo',
  'editor.upload.file.api': '/uploadFile',
  ...
}

메뉴 및 툴바와 같은 기타 설정에 대한 자세한 내용은 구성 페이지를 참고합니다.

7. 임포트 기능 런타임 환경

임포트 기능의 런타임 환경 및 최소 사양은 다음과 같습니다:

커널 2.6.32 이상이 탑재된 리눅스 배포판(RedHat Enterprise, Fedora, Ubuntu, CentOS 등) — GLIBC 2.14 이상
Windows 10 이상
Microsoft Windows Server 2012 / 2012 R2 / 2016

8. iframe 사용 시 스타일 적용

3.1.2501 버전부터 지원 및 2.19.2501 버전부터 지원에서 사용 가능합니다.

이제 다이얼로그, 풍선팝업, 툴팁과 같은 UI 요소들이 에디터의 메인 컨테이너 외부(<body> 아래)에 렌더링되므로, 이러한 요소들에 대해 별도의 CSS 스타일링이 필요합니다.

자세한 구성에 대해서는 스타일 설정 페이지를 참고합니다.

예시: 스크립트를 통한 CSS 적용

// Apply CSS by adding a script when initializing the editor
initEditor = () => {
  ...
  const paths = [
    'url of synapeditor.min.css',
    'url of externalStyle.css',
    'url of shapeEditor.min.css',
    'url of webAccessibilityChecker.min.css',
    'url of webSpellChecker.min.css',
    'url of personalDataProtection.min.css',
    'url of characterPicker.min.css',
    'url of documentComparison.min.css',
    'url of formEditor.min.css',
    'url of forbiddenWordDetection.min.css',
    'url of ocr.min.css'
  ];

  const topDocument = window.top.document;
  paths.forEach(function (cssFile) {
    if (topDocument.querySelector(`[href=' + cssFile + ']`)) {
      return;
    }

    var link = topDocument.createElement('link');
    link.rel = 'stylesheet';
    link.href = cssFile;
    topDocument.head.appendChild(link);
  });
  ...
  window.editor = new SynapEditor(editorId, that.editorConfig, html, eventListener);
}

9. 콘텐츠 보안 정책(CSP) 설정 가이드

리치 텍스트 에디터의 특성상, Synap Editor는 편집 중에 인라인 스타일, 인라인 스크립트, data-URL 기반 스타일을 동적으로 생성합니다.

결과적으로, CSP를 제한적으로 설정하면(예: style-src 'self', script-src 'self'), 브라우저가 해당 리소스의 실행을 차단하게 되며, 에디터가 올바르게 동작하지 않거나 일부 기능이 제한될 수 있습니다.

에디터가 올바르게 작동하려면 다음 CSP 설정이 필요합니다:

Content-Security-Policy:
  style-src 'self' 'unsafe-inline' data:;
  script-src 'self' 'unsafe-inline' 'unsafe-eval';

적용 방법

일반적으로 CSP는 서버에서 HTTP 응답 헤더를 통해 설정하는 것이 권장됩니다.

Content-Security-Policy: style-src 'self' 'unsafe-inline' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval';

테스트 환경에서는 HTML <meta> 태그를 통해서도 적용할 수 있습니다.

<meta http-equiv="Content-Security-Policy"
      content="style-src 'self' 'unsafe-inline' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

참고 사항

위 설정은 리치 텍스트 에디터에 필요한 최소 권장 구성을 나타냅니다.
script-src 'self' 설정은 외부 도메인에서의 스크립트 실행을 차단합니다.
서비스 환경에 따라 추가적인 보안 정책(입력 검증, 서버-사이드 검증 등)을 권장합니다.

설치

목차

1. 설치

2. 설정

2.1 라이선스 설정

3. 에디터 초기화 및 내용 저장

3.1 `<div>` 태그 사용하기

3.1.1 `<script>` 및 `<link>` 태그를 사용하여 JS 및 CSS 파일을 포함합니다.

3.1.2 문서 임포트 관련 모듈을 포함합니다.

3.1.3 `<div>` 태그를 사용하여 새로운 Synap Editor 인스턴스 생성

3.1.4 작성한 내용을 HTML form 태그를 사용하여 저장합니다.

3.2 `<textarea>` 태그 사용하기

3.2.1 `<script>` 및 `<link>` 태그를 사용하여 JS 및 CSS 파일을 포함합니다.

3.2.2 문서 임포트 관련 모듈을 포함합니다.

3.2.3 `<textarea>` 태그를 사용하여 새로운 Synap Editor 인스턴스 생성하기

3.2.4 HTML form 태그를 사용하여 작성한 내용을 저장합니다.

4. 에디터 내용 저장 및 불러오기

4.1 에디터 내용 저장

4.2 에디터 내용 불러오기

5. 플러그인 및 외부 모듈 적용

6. 임포트 및 업로드 API 설정

7. 임포트 기능 런타임 환경

8. iframe 사용 시 스타일 적용

9. 콘텐츠 보안 정책(CSP) 설정 가이드

적용 방법

참고 사항

하위 문서

설치

목차

1. 설치

2. 설정

2.1 라이선스 설정

3. 에디터 초기화 및 내용 저장

3.1 <div> 태그 사용하기

3.1.1 <script> 및 <link> 태그를 사용하여 JS 및 CSS 파일을 포함합니다.

3.1.2 문서 임포트 관련 모듈을 포함합니다.

3.1.3 <div> 태그를 사용하여 새로운 Synap Editor 인스턴스 생성

3.1.4 작성한 내용을 HTML form 태그를 사용하여 저장합니다.

3.2 <textarea> 태그 사용하기

3.2.1 <script> 및 <link> 태그를 사용하여 JS 및 CSS 파일을 포함합니다.

3.2.2 문서 임포트 관련 모듈을 포함합니다.

3.2.3 <textarea> 태그를 사용하여 새로운 Synap Editor 인스턴스 생성하기

3.2.4 HTML form 태그를 사용하여 작성한 내용을 저장합니다.

4. 에디터 내용 저장 및 불러오기

4.1 에디터 내용 저장

4.2 에디터 내용 불러오기

5. 플러그인 및 외부 모듈 적용

6. 임포트 및 업로드 API 설정

7. 임포트 기능 런타임 환경

8. iframe 사용 시 스타일 적용

9. 콘텐츠 보안 정책(CSP) 설정 가이드

적용 방법

참고 사항

하위 문서

3.1 `<div>` 태그 사용하기

3.1.1 `<script>` 및 `<link>` 태그를 사용하여 JS 및 CSS 파일을 포함합니다.

3.1.3 `<div>` 태그를 사용하여 새로운 Synap Editor 인스턴스 생성

3.2 `<textarea>` 태그 사용하기

3.2.1 `<script>` 및 `<link>` 태그를 사용하여 JS 및 CSS 파일을 포함합니다.

3.2.3 `<textarea>` 태그를 사용하여 새로운 Synap Editor 인스턴스 생성하기