Status

title	릴리즈 2.2.0 이상

Table of Contents

maxLevel	2
style	none

...

1. 설치

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

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

...

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

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

경로

내용

설명

/workspace/SynapEditor_23.x.x/SynapEditor

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

환경설정 : synapeditor.config.js

라이센스 : license.json

외부모듈 : externals

플러그인: plugins

/workspace/SynapEditor_2.x.x/sedocConverter

임포트 모듈 (실행파일)

Windows : sedocConverter.exe, 각종 dll

Linux : sedocConverter_exe

Status

title	릴리즈 2.3.0 이상

외부모듈: formula-parser.min.js 추가 되었습니다.
플러그인: tuiImageEditor 추가 되었습니다.

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

...

/workspace/fonts

...

2.1 라이선스 설정

synapeditor.config.js 파일을 열어서 license.json 파일의 경로를 수정합니다. 이 때 license.json 파일은 브라우저에서 접근 가능한 경로로 표시해줘야 합니다.

Code Block

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

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

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

환경설정 파일을 이용해서 에디터를 초기화합니다. 아래 설명을 참고하여 <div>나 <textarea> 태그중 하나를 선택해서 사용하시면 됩니다.

3.1 <div> tag 사용

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

Code Block

language	js
theme	Emacs
linenumbers	true

<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 <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="resource/synapeditor/synapeditor.min.css" rel="stylesheet" type="text/css">
<script src="synapeditor/synapeditor.config.js"></script>
<script src="resource/synapeditor/synapeditor.min.js"></script>
<script>
function initEditor() {
	var se = new SynapEditor("synapEditor", synapEditorConfig);
}
</script>
<body onload="initEditor();">
	<div id="synapEditor"></div>
</body>
</html>

3.1.3 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="resource/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="resource/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>
<body>
	<div id="synapEditor"></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 사용

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

Code Block

language	js
theme	Emacs
linenumbers	true

<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 <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="resource/synapeditor/synapeditor.min.css" rel="stylesheet" type="text/css">
<script src="synapeditor/synapeditor.config.js"></script>
<script src="resource/synapeditor/synapeditor.min.js"></script>
<script>
function initEditor() {
	var se = new SynapEditor("synapEditor", synapEditorConfig);
}
</script>
<body onload="initEditor();">
	<textarea id="synapEditor"></textarea>
</body>
</html>

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

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

...

language	xml
theme	Emacs
linenumbers	true

...

Image Added

externals : 외부모듈 디렉토리

iframeMode : iframeMode 디렉토리

lang : 언어 디렉토리

plugins : 플러그인 디렉토리

theme : 테마 디렉토리

license.json : 라이센스 파일

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

Warning

Status


colour	Yellow
title	2.13.0 이상

synapeditor.pkgd.min.js, synapeditor.pkgd.min.css 파일을 제공하지 않습니다.

Info

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

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

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

/workspace/SynapEditor_3.x.x/sedocConverter

Windows

Image Added

Linux

Image Added

임포트 모듈 (실행파일)

Windows : sedocConverter.exe, 각종 dll

Linux : sedocConverter_exe

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

경로	설명
/workspace/fonts	문서 임포트 시 메타파일(wmf/emf) 변환에 사용되는 폰트파일

2. 환경설정

2.1 라이선스 설정

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

Code Block

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

{
   /**
     * 라이센스 파일의 경로 또는 라이센스 객체를 설정합니다.
     * ex) '/synapeditor/license.json'
     * ex)  {
                'company': 'Synapsoft',
                'key': [
                    'licenseKey'
                ]
            }
     */
    'editor.license': 'synapeditor/license.json',
  ...
}

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

환경설정 파일을 이용해서 에디터를 초기화합니다. 아래 설명을 참고하여 <div>나 <textarea> 태그중 하나를 이용하여 초기화하면 됩니다.

3.1 <div> tag 사용

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

Info

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

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

Code Block

language	js
theme	Emacs
linenumbers	true

<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 문서 임포트 관련 모듈을 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="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>
<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="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>
<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

4.1 코드미러 적용

코드미러를 적용하면 에디터의 '소스 보기' 에서 코드 편집을 원활하게 할 수 있습니다.

...

Image Removed

...

Image Removed

코드미러 사이트에서 js 파일과 css 파일을 다운받아 경로를 추가해 주거나, CDN 을 이용해 코드미러를 적용할 수 있습니다.

package externals 사용

package 하위 externlas codeMirror script file 사용

...

language	xml
theme	Emacs
title	index.html
linenumbers	true

...

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

Code Block

language	js
theme	Emacs
linenumbers	true

<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 type="text/javascript" src="../resource/xml.min.js"></script>
<link rel='stylesheet' href='../resource/codemirror.min.css'>

CDN 을 이용한 적용

에디터가 설치된 html 파일 <head> 태그에 아래 내용을 추가합니다.

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

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

Code Block

language	xml
theme	Emacs
title	index.html
linenumbers	true

<!-- code mirror -->
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/codemirror.min.js'<script src="externals/SEDocModelParser/SEDocModelParser.min.js"></script>
<script typesrc="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/mode/xml/xmlexternals/SEShapeManager/SEShapeManager.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/codemirror.min.css'>

4.2 엑셀 함수 사용

Status

title	릴리즈 2.3.0 이상

package externals 사용

package 하위 externlas formula-parser script file 사용

formula parser를 적용하면 에디터에서 엑셀 함수를 사용 할 수 있습니다.

formula-parser script를 html에 추가하지 않을 경우 엑셀 함수 입력칸 노출되지 않습니다.
formula-parser script를 html에 추가하지 않을 경우 임포트시 엑셀 문서에 포함된 함수를 사용 할 수 없습니다.

Code Block

language	xml
theme	Emacs

<!-- formula-parser -->
<script type="text/javascript" src="../resource/formula-parser.min.js"></script>

Image Removed

...

Status

title	릴리즈 2.3.0 이상

에디터에서 제공하는 플러그인을 사용하도록 설정하여 확장 기능을 사용할 수 있습니다.

플러그인을 작성하는 방법은 여기를 참고해주세요.

5.0 플러그인 적용하기

플러그인 파일 불러오기

html 파일에 플러그인 스크립트 파일을 불러오는 코드를 추가합니다.

Code Block

language	xml
theme	Emacs

<!-- 플러그인 파일을 불러오는 코드를 에디터 스크립트(synapeditor.min.js)보다 아래에 작성합니다 -->
<script type="text/javascript" src="../plugins/myPlugin/myPlugin.js"></script>

에디터에 설정하기

"editor.plugins" 설정에 플러그인의 이름을 추가하여 에디터에 플러그인을 사용하도록 설정합니다.

Code Block

language	js
theme	Emacs
title	configuration.js

"editor.plugins": ["myPlugin"] // "myPlugin" 플러그인 사용 설정

플러그인 버튼 위치 설정하기

플러그인에서 기능에 대한 버튼을 제공하는 경우, 플러그인이 제공하는 버튼을 추가할 위치를 지정할 수 있습니다.

툴바의 맨 끝에 버튼 추가

"editor.plugins" 설정에 플러그인의 이름만 설정하면 툴바의 맨 끝에 버튼이 추가됩니다.

Code Block

language	js
theme	Emacs
title	configuration.js

"editor.plugins": ["myPlugin"] // 툴바의 맨 끝에 추가

지정된 위치에 버튼 추가

"editor.plugins" 설정에 객체형식으로 name과 position을 설정하면 버튼을 추가할 위치를 지정할 수 있습니다.

Code Block

language	js
theme	Emacs
title	configuration.js

"editor.plugins": [{
	name: "myPlugin", // 플러그인 이름
	position: {
		toolbar: 5  // 툴바의 5번째 위치(index)에 버튼 추가
	}
}]

position의 키로 올 수 있는 값은 다음과 같습니다.

toolbar : 툴바
textBalloon : 텍스트 선택시 나타나는 벌룬
imageBalloon : 이미지 선택시 나타나는 벌룬
videoBalloon : 비디오 선택시 나타나는 벌룬
tableCellBalloon : 테이블 셀 선택시 나타나는 벌룬
drawingObjectBalloon : DIV 선택시 나타나는 벌룬
hyperlinkBalloon : 링크 선택시 나타나는 벌룬

position의 키에대한 값으로 올 수 있는 값은 정수로서 의미는 다음과 같습니다.

-9999 : 맨 앞에 추가
-1 : 뒤에서 첫번째 위치에 추가
0 : 맨 앞에 추가
1 : 앞에서 첫번째 위치에 추가
9999 : 맨 뒤에 추가

5.1 ToastUI 이미지 에디터 적용

Status

title	릴리즈 2.3.0 이상

package 하위 plugins tuiImageEditor script file 사용

이미지 에디터를 적용하면 이미지에 다양한 효과를 적용할 수 있습니다.

(URL로 삽입한 이미지가 아닌, 업로드된 이미지나 base64 인코딩된 이미지에 대해서만 편집이 가능합니다)

Code Block

language	xml
theme	Emacs

<!-- image editor -->
<!-- 에디터 스크립트 아래에 추가

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="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>
<body onload="initEditor();">
	<div style="height:700px;">
		<textarea id="synapEditor"></textarea>
	</div>
</body>
</html>

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 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">
	<div style="height:700px;">
		<textarea id="synapEditor"></textarea>
	</div>
		<input 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. 플러그인 및 외부모듈 적용

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

Excerpt Include

	플러그인
	플러그인
nopanel	true

외부모듈 적용

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

External Module	용도
CodeMirror	소스코드를 더 예쁘게 보여주고 편리하게 편집 할 수 있습니다.
formulaParser	에디터의 표에서 엑셀 함수를 사용할 수 있도록 기능을 확장합니다.
SEDocModelParser	hwp, doc, docx, xls, xlsx 문서를 임포트할 수 있도록 기능을 확장합니다.
SEShapeManager	도형이 포함된 문서에 대한 임포트 및 도형표인이 가능하도록 기능을 확장합니다. 도형편집 플러그인을 사용하시려면 이 모듈을 꼭 적용해야 합니다.

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

플러그인과 외부모듈 적용 예

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 -->
<!-- 도형편집기 / v2.8.0 이후 지원 -->
<script src="SynapEditor/plugins/shapeEditor/shapeEditor.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/shapeEditor/shapeEditor.min.css">
<!-- 개인정보보호 -->
<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/webAccessibilityChecker/webAccessibilityChecker.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.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/horizontalLineExtension/horizontalLineExtension.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.css">
<!-- 인용문구 확장 -->
<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>
<!-- v2.8.0 이후 지원 -->
<script type="text/javascript" src='SynapEditor/externals/SEDocModelParser/SEDocModelParser.min.js'></script>
<!-- v2.8.0 이후 지원 -->
<script type="text/javascript" src="../plugins/tuiImageEditor/tuiImageEditor.js"></script>

Code Block

language	js
theme	Emacs
title	configuration.js

// 플러그인 설정에 "tuiImageEditor" 추가
"editor.plugins": [{
    name: "tuiImageEditor",
    position: {
        imageBalloon: -1 // 이미지 벌룬의 -1 위치에 버튼 추가
    }
}]

...

Image Removed

...

Image Removed

5.2 WebSpellChecker 맞춤법 검사도구 적용

...

package 하위 plugins webSpellChecker script file 사용

맞춤법검사 도구를 적용하면 에디터내의 컨텐츠를 맞춤법을 검사하고 수정 할 수 있습니다.

Code Block

language	xml
theme	Emacs

<!-- webSpellChcker -->
<!-- 에디터 스크립트 아래에 추가 -->
<script type="text/javascript" src="../plugins/webSpellChecker/webSpellChecker.js"></script>'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>
<body onload="initEditor();">
	<div style="height:700px;">
		<div id="synapEditor"></div>
	</div>
</body>
</html>

// 플러그인 설정에 "webSpellChecker" 추가 "editor.plugins"

Code Block

language	js
theme	Emacs
title	synapeditor.config.js


linenumbers	true

{
'editor.toolbar': [{
    name: "webSpellChecker"//...,
    position: {'personalDataProtection',
    'specialCharacter', 'emoji',
   imageBalloon: -1 // 이미지 벌룬의 -1 위치에 버튼 추가
    }
}] 'tuiImageEditor',
    'WebAccessibilityChecker',
    //...
],
}

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

...

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

Info
임포트 및 업로드에 필요한 API ( /importDoc, /uploadImage, /uploadVideo, /uploadFIle)는 서버연동 매뉴얼을 참고하셔서 Back-end에 구현해주셔야 합니다.

...

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',
   ...
}

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

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

Page History

Versions Compared

Old Version 32

New Version Current

Key

1. 설치

2.1 라이선스 설정

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

3.1 <div> tag 사용

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

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

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

3.2 <textarea> tag 사용

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

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

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

2. 환경설정

2.1 라이선스 설정

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

3.1 <div> tag 사용

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

4.1 코드미러 적용

package externals 사용

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

CDN 을 이용한 적용

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

4.2 엑셀 함수 사용

package externals 사용

5.0 플러그인 적용하기

플러그인 파일 불러오기

플러그인 버튼 위치 설정하기

툴바의 맨 끝에 버튼 추가

지정된 위치에 버튼 추가

5.1 ToastUI 이미지 에디터 적용

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

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

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

4.1 에디터 작성 내용 저장

4.2 에디터 내용 불러오기

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

외부모듈 적용

플러그인과 외부모듈 적용 예

5.2 WebSpellChecker 맞춤법 검사도구 적용

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

7. 임포트 기능 동작 환경

3.2 <textarea> tag 사용
Anchor