Synap Editor Documentation
Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

릴리즈 2.2.0 이상

1. 설치

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

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


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

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


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

경로내용설명

/workspace/SynapEditor_2.x.x/SynapEditor

externals : 외부모듈 디렉토리

plugins : 플러그인 디렉토리

license.json : 라이센스 파일

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

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

synapeditor.pkgd.min.css, synapeditor.pkgd.min.js : 외부모듈과 플러그인이 모두 포함된 사이냅 에디터

/workspace/SynapEditor_2.x.x/sedocConverter

Windows

Linux

임포트 모듈 (실행파일)

Windows : sedocConverter.exe, 각종 dll

Linux : sedocConverter_exe


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

경로설명

/workspace/fonts

문서 임포트 시 메타파일(wmf/emf) 변환에 사용되는 폰트파일


2. 환경설정

2.1 라이선스 설정

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

synapeditor.config.js
{
   /**
     * 라이센스 파일의 경로 또는 라이센스 객체를 설정합니다.
     * 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하세요.

<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 객체를 생성합니다.

<!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"></div>
</body>
</html>

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

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

<!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 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하세요.

<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 객체를 생성합니다.

<!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();">
	<textarea id="synapEditor"></textarea>
</body>
</html>

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

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

<!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. 플러그인 및 외부모듈 적용

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

Error rendering macro 'excerpt-include'

No link could be created for '플러그인'.

외부모듈 적용

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

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

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

<!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>
synapeditor.config.js
{
'editor.toolbar': [
    //...,
    'personalDataProtection',
    'specialCharacter', 'emoji',
    'tuiImageEditor',
    'WebAccessibilityChecker',
    //...
],
}

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

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

nlnljnl;knkl;

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


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


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



  • No labels