사이냅 에디터 문서
Space shortcuts
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 10 Next »

1. 설치

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

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


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

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


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

경로설명

/workspace/SynapEditor_2.x.x/SynapEditor

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

환경설정 : synapeditor.config.js

라이센스 : license.json

/workspace/SynapEditor_2.x.x/sedocConverter

임포트 모듈 (실행파일)

Windows : sedocConverter.exe, 각종 dll

Linux : sedocConverter_exe


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

경로설명

/workspace/fonts

메타파일(wmf/emf) 변환에 사용되는 font들


2. 환경설정

2.1 라이선스 설정

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

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

<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="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를 사용하였습니다.

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

<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="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를 사용하였습니다.

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

3.3 코드미러 적용

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

코드미러를 적용하지 않았을 때 '소스 보기'코드미러를 적용했을 때 '소스 보기'

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

CDN 을 이용한 적용

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

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


3.2 수식 적용

formula parser를 적용하면 에디터에서 수식 편집을 사용 할 수 있습니다.

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



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

환경설정 파일에 임포트 및 업로드 API 경로를 등록합니다.

임포트 및 업로드에 필요한 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