Table of Contents

maxLevel	2
style	none

...

1.

...

사이냅 에디터 설치파일은 아래와 같이 구성되어 있습니다.

...

Installation

Synap Editor installation package is comprised of the following components.

Synap Editor + Import Module
- SynapEditor_2.x.x.zip
메타파일 변환용 폰트Forts for metafile conversion
- fonts.zip

설치파일을 원하는 경로에 복사 후 압축을 해제합니다.

(이 설명서에서는 /workspace 경로에 파일 복사 후 압축을 해제합니다. 또한 /workspace가 WEB ROOT 인 경우에 맞춰서 설명합니다.)

Copy the installation file to the desired path and decompress the zip file.

*In this example, we copy the file in the /workspace path and decompress the zip file. It will also be explained in case / workspace is located in WEB ROOT

When you decompress the SynapEditor_2.x.x.zip 파일을 압축해제하면 아래와 같은 경로가 생성됩니다.

...

file, the following path is generated.

Path

Content

Explanation

/workspace/SynapEditor_2.x.x/SynapEditor

externals : 외부모듈 디렉토리external module directory

plugins : 플러그인 디렉토리plugin directory

license.json : 라이센스 파일license file

synapeditor.config.js : 환경설정 파일configuration file

synapeditor.min.css, synapedtiro.min.js : 사이냅 에디터Synap Editor

synapeditor.pkgd.min.css, synapeditor.pkgd.min.js : 외부모듈과 플러그인이 모두 포함된 사이냅 에디터Synap Editor including external modules and plugins

/workspace/SynapEditor_2.x.x/sedocConverter

Windows

Linux

임포트 모듈 (실행파일Import module (execution file)

Windows : sedocConverter.exe, 각종 all kinds of dll

Linux : sedocConverter_exe

Decompress fonts.zip under /workspace.

fonts.zip 파일도 /workspace아래에 압축을 풀어주세요.

경로Path

설명Explanation

/workspace/fonts

문서 임포트 시 메타파일

Font file for converting metafile (wmf/emf)

변환에 사용되는 폰트파일

when the document is imported

2.

...

Configuration

2.1 Set up the License 라이선스 설정

Open the synapeditor.config.js 파일을 열어서 js file and choose the path for license.json 파일의 경로를 지정합니다. 이 때 license.json 파일의 경로는 브라우저에서 접근 가능해야 합니다file. The license.json file path should be accessible via a browser. .

Code Block

language	js
theme	Emacs
title	synapeditor.config.js
linenumbers	true

{
   /**
     * Set *up 라이센스the 파일의path 경로or 또는object 라이센스for 객체를license 설정합니다.file
     * ex) '/synapeditor/license.json'
     * ex)  {
                'company': 'SynapSoft',
                'key': [
                    'licenseKey'
                ]
            }
     */
    'editor.license': 'synapeditor/license.json',
  ...
}

3.

...

Editor initialization and edited content saving

Incorporating Synap Editor into your own environment is also very simple and straightforward.
You can choose either <div> or <textarea> tag for the instantiation of Synap Editor.

...

Code Block

language	xml
theme	Emacs
linenumbers	true

<!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>
<body>
	<form id="seform" name="seform" action="/save" method="post">
		<textarea id="synapEditor"></textarea>
		<input type="submit" value="SAVE"/>
	</form>
</body>
</html>

4.

...

Set up plugins and external module

You can add the various plugins of Synap Editor as below.

Please refer to plugin page for more detailed information.

Excerpt Include

	플러그인
	플러그인
nopanel	true

Apply External Module 외부모듈 적용

Apply external module like Code Mirror for more powerful editing features.

Code Mirror 등 외부 모듈을 적용하여 더 강력한 편집기능을 사용할 수 있습니다.

Please refer to external page for more detailed information.

적용 방법은 외부모듈 페이지를 참고하세요..

Example of applying plugin and external module 플러그인과 외부모듈 적용 예

Code Block

language	xml
theme	Emacs
linenumbers	true

<!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 -->
<!-- 개인정보보호 -->
<script src="synapeditor/plugins/personalDataProtection/personalDataProtection.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/personalDataProtection/personalDataProtection.min.css">
<!-- 특수기호/이모지 -->
<script src="synapeditor/plugins/characterPicker/characterPicker.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/characterPicker/characterPicker.min.css">
<!-- 포토에디터 -->
<script src="synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.css">
<!-- 웹접근성 검사 -->
<script src="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.css">

<!-- Synap Editor Externals -->
<script type="text/javascript" src="synapeditor/externals/formulaParser/formula-parser.min.js"></script>
<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>
<body onload="initEditor();">
	<div id="synapEditor"></div>
</body>
</html>

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.js
linenumbers	true

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

4. Set up Import and upload API

이미지, 동영상, 파일 업로드 및 문서(doc, docx, hwp, xls, xlsx) 임포트 처리를 위해 환경설정 파일에 임포트 및 업로드 API 경로를 설정합니다.

Register the import and upload API path to the configuration file for file(image, video, ...) upload and document file(doc, docx, xls, xlsx) import.

...

Code Block

language	js
theme	Emacs
title	synapeditor.config.js
linenumbers	true

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

Refer to Configuration page for more detailed information regarding other setting up regarding other menu and toolbar etc.

기타 메뉴 및 툴바 설정 등 환경설정에 대한 자세한 내용은 Configuration을 참고해주세요.

...

Page tree

Versions Compared

Old Version 4

New Version 5

Key

1.

Installation

2.

Configuration

2.1 Set up the License 라이선스 설정

3.

Editor initialization and edited content saving

4.

Set up plugins and external module

Apply External Module 외부모듈 적용

Example of applying plugin and external module 플러그인과 외부모듈 적용 예

4. Set up Import and upload API

Page tree

Page History

Versions Compared

Old Version 4

New Version 5

Key

1.

Installation

2.

Configuration

2.1 Set up the License 라이선스 설정

3.

Editor initialization and edited content saving

4.

Set up plugins and external module

Apply External Module 외부모듈 적용

Example of applying plugin and external module 플러그인과 외부모듈 적용 예

4. Set up Import and upload API