...

사이냅 에디터 + 임포트 모듈
- SynapEditor_23.x.x.zip
메타파일 변환용 폰트
- fonts.zip

...

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

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

경로

내용

설명

/workspace/SynapEditor_23.x.x/SynapEditor

Image RemovedImage Added

externals : 외부모듈 디렉토리

iframeMode : iframeMode 디렉토리

lang : 언어 디렉토리

plugins : 플러그인 디렉토리

theme : 테마 디렉토리

license.json : 라이센스 파일

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

Warning

Status


colour	Yellow
title	2.13.0 이상

synapeditor.pkgd.min.

css

js,

synapedtiro

synapeditor.pkgd.min.

js : 사이냅 에디터

css 파일을 제공하지 않습니다.

Info
synapeditor.pkgd.min.

css

js, synapeditor.pkgd.min.

js : 플러그인이 모두 포함된 사이냅 에디터

css 파일에는 사이냅에디터에서 제공하는 플러그인들이 모두 포함되어 있습니다.

모든 플러그인을 다 사용하실 경우 위 파일을 사용하시면 됩니다.

다만 synapeditor.pkgd.min.js 파일의 사이즈가 커서 가급적 synapeditor.min.js 파일을 사용하시고 필요한 플러그인들을 별도로 적용하는걸 권장하고 있습니다.

/workspace/SynapEditor_23.x.x/sedocConverter

Windows

Linux

임포트 모듈 (실행파일)

Windows : sedocConverter.exe, 각종 dll

Linux : sedocConverter_exe

...

3.1.1 <script>와 <link> tag를 사용하여 js파일과 css파일을 include하세요.

Code Blockinfo

language	js
theme	title	3.1.2501 버전 이상에서 css파일 include 방법

style 설정 매뉴얼을 참고합니다.

Code Block

language	js
theme	Emacs
linenumbers	true

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

3.1.2

...

language	xml
theme	Emacs
linenumbers	true

...

문서 임포트 관련 모듈을 include하세요.

xlsx, docx, hwp 등의 문서를 임포트 하는 기능을 사용하기 위해서는 에디터 패키지 externals 폴더 아래에 포함된 SEDocModelParser, SEShapeManager 모듈을 include 합니다.

Code Block

language	xml
theme	Emacs

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

3.1.3 <div> tag를 사용하여 새로운 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="synapeditorSynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
<script src="synapeditorSynapEditor/synapeditor.config.js"></script>
<script src="synapeditorSynapEditor/synapeditor.min.js"></script>
<script>
function initEditor() {
	var se = new SynapEditor("synapEditor", synapEditorConfig);
}
</script>
<body onload="initEditor();">
	<div id="synapEditor" style="height:700px;"></div>
</body>
</html>

3.1.

...

4 HTML form tag를 사용하여 작성된 내용을 저장하세요.

아래 예제는 POST 요청을 전송하기 위해 jQuery를 사용하였습니다.

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="synapeditorSynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="synapeditorSynapEditor/synapeditor.config.js"></script>
<script src="synapeditorSynapEditor/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>
<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> tag

...

사용
Anchor
textarea
textarea

3.2.1 <script>와 <link> tag를 사용하여 js파일과 css파일을 include하세요.

Code Block

language	js
theme	Emacs
linenumbers	true

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

3.2.2

...

문서 임포트 관련 모듈을 include하세요.

xlsx, docx, hwp 등의 문서를 임포트 하는 기능을 사용하기 위해서는 에디터 패키지 externals 폴더 아래에 포함된 SEDocModelParser, SEShapeManager 모듈을 include 합니다.

Code Block

language	xml
theme	Emacs
linenumbers	true

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

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" <script src="externals/SEDocModelParser/SEDocModelParser.min.js"></script>
<script src="externals/SEShapeManager/SEShapeManager.min.js"></script>

3.2.3 <textarea> tag 를 사용하여 새로운 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="synapeditorSynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
<script src="synapeditorSynapEditor/synapeditor.config.js"></script>
<script src="synapeditorSynapEditor/synapeditor.min.js"></script>
<script>
function initEditor() {
	var se = new SynapEditor("synapEditor", synapEditorConfig);
}
</script>
<body onload="initEditor();">
	<div style="height:700px;">
		<textarea id="synapEditor"></textarea>
	</div>
</body>
</html>

3.2.3 HTML form tag를 사용하여 작성된 내용을 저장하세요.

아래 예제는 POST 요청을 전송하기 위해 jQuery를 사용하였습니다.

textarea에 내용이 있을 경우 해당 내용으로 에디터가 초기화 됩니다. 릴리즈 2.12.0 이상

Code Block

language	xml
theme	Emacs
linenumbers	true

...

<div>

...

<textarea

...

id="

...

synapEditor"

...

><p>사이냅에디터를

...

초기화 합니다.</p></textarea>

Image Added

3.2.4 HTML form tag를 사용하여 작성된 내용을 저장하세요.

아래 예제는 POST 요청을 전송하기 위해 jQuery를 사용하였습니다.

Code Block

language	xml
theme	Emacs
linenumbers	true

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

<head>
<meta charset="utf-8">
<meta namehttp-equiv="viewportX-UA-Compatible" content="width=deviceIE=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="synapeditorSynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="synapeditorSynapEditor/synapeditor.config.js"></script>
<script src="synapeditorSynapEditor/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">
	<div style="height:700px;">
		<textarea id="synapEditor"></textarea>
	</div>
		<input type="submit" value="SAVE"/>
	</form>
</body>
</html>

...

 type="submit" value="SAVE"/>
	</form>
</body>
</html>

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

4.1 에디터 작성 내용 저장

getPublishingHtml()

에디터에 작성된 내용을 HTML 형식으로 가져옵니다.

에디터의 내용을 DB나 html 파일로 저장 시에 사용합니다.

Code Block

language	js
theme	Emacs
linenumbers	true

var html = editor.getPublishingHtml();

4.2 에디터 내용 불러오기

openHTML()

HTML을 에디터에 보여줍니다.

DB나 html 파일의 내용을 에디터에 보여줄 시 사용합니다.

Code Block

language	js
theme	Emacs
linenumbers	true

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

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

사이냅 에디터에서 제공하는 다양한 플러그인들을 아래와 같이 적용 할 수 있습니다. 플러그인에 대한 상세한 정보는 플러그인 페이지를 참고하세요.

...

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="synapeditorSynapEditor/synapeditor.min.css" rel="stylesheet" type="text/css">
<script src="synapeditorSynapEditor/synapeditor.config.js"></script>
<script src="synapeditorSynapEditor/synapeditor.min.js"></script>


<!-- Synap Editor Plugins -->
<!-- 도형-- 도형편집기 / v2.8.0 이후 지원 -->
<script src="synapeditorSynapEditor/plugins/shapeEditor/shapeEditor.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/shapeEditor/shapeEditor.min.css">
<!-- 개인정보보호 -->
<script src="synapeditorSynapEditor/plugins/personalDataProtection/personalDataProtection.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/personalDataProtection/personalDataProtection.min.css">
<!-- 특수기호/이모지 -->
<script src="synapeditorSynapEditor/plugins/characterPicker/characterPicker.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/characterPicker/characterPicker.min.css">
<!-- 웹접근성 검사 -->
<script src="synapeditorSynapEditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.css">
<!-- 포토에디터 -->
<script src="synapeditorSynapEditor/plugins/tuiImageEditor/tuiImageEditor.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.css">
<!-- 가로줄 확장 -->
<script src="synapeditorSynapEditor/plugins/horizontalLineExtension/horizontalLineExtension.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.css">
<!-- 인용문구 확장 -->
<script src="synapeditorSynapEditor/plugins/quoteExtension/quoteExtension.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/quoteExtension/quoteExtension.min.min.css">

<!-- Synap Editor Externals -->
<script type="text/javascript" src='synapeditorSynapEditor/externals/formulaParser/formula-parser.min.js'></script>/formula-parser.min.js'></script>
<!-- v2.8.0 이후 지원 -->
<script type="text/javascript" src='synapeditorSynapEditor/externals/SEDocModelParser/SEDocModelParser.min.js'></script>
<!-- v2.8.0 이후 지원 -->
<script type="text/javascript" src='synapeditorSynapEditor/externals/SEShapeManager/SEShapeManager.min.js'></script>

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

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

Code Block

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

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

...

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

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

...

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

7. 임포트 기능 동작 환경

임포트 기능 동작 환경 및 최소 사양은 다음과 같습니다.

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

Space shortcuts

Page tree

Versions Compared

Old Version 52

New Version Current

Key

3.1.1 <script>와 <link> tag를 사용하여 js파일과 css파일을 include하세요.

3.1.2

문서 임포트 관련 모듈을 include하세요.

3.1.3 <div> tag를 사용하여 새로운 Synap Editor 객체를 생성합니다.

3.1.

4 HTML form tag를 사용하여 작성된 내용을 저장하세요.

3.2 <textarea> tag

사용
Anchor
textarea
textarea

3.2.1 <script>와 <link> tag를 사용하여 js파일과 css파일을 include하세요.

3.2.2

문서 임포트 관련 모듈을 include하세요.

3.2.3 <textarea> tag 를 사용하여 새로운 Synap Editor 객체를 생성합니다.

3.2.3 HTML form tag를 사용하여 작성된 내용을 저장하세요.

3.2.4 HTML form tag를 사용하여 작성된 내용을 저장하세요.

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

4.1 에디터 작성 내용 저장

4.2 에디터 내용 불러오기

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

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

7. 임포트 기능 동작 환경

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 52

New Version Current

Key

3.1.1 <script>와 <link> tag를 사용하여 js파일과 css파일을 include하세요.

3.1.2

문서 임포트 관련 모듈을 include하세요.

3.1.3 <div> tag를 사용하여 새로운 Synap Editor 객체를 생성합니다.

3.1.

4 HTML form tag를 사용하여 작성된 내용을 저장하세요.

3.2 <textarea> tag

사용 Anchortextareatextarea

3.2.1 <script>와 <link> tag를 사용하여 js파일과 css파일을 include하세요.

3.2.2

문서 임포트 관련 모듈을 include하세요.

3.2.3 <textarea> tag 를 사용하여 새로운 Synap Editor 객체를 생성합니다.

3.2.3 HTML form tag를 사용하여 작성된 내용을 저장하세요.

3.2.4 HTML form tag를 사용하여 작성된 내용을 저장하세요.

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

4.1 에디터 작성 내용 저장

4.2 에디터 내용 불러오기

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

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

7. 임포트 기능 동작 환경

사용
Anchor
textarea
textarea