Synap Editor Documentation
Page tree

Versions Compared

Old Version 3

changes.mady.by.user 강은정

Saved on

compared with

New Version Current

changes.mady.by.user Kwon JongPyo

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Status
title릴리즈 Release 2.2.0 이상or Above

Table of Contents
maxLevel2
stylenone

...

1.

...

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

...

Installation

SynapEditor installation package is comprised of the following components.

  • SynapEditor + Import Module
    • SynapEditor_2.x.x.zip
  • 메타파일 변환용 폰트Fonts for metafile conversion 
    • fonts.zip

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

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


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

*In this Guide, we copy the file into /workspace and decompress the zip file. Explanations are based on the assumption that /workspace is located in WEB ROOT.


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

...

file, the following path is generated. 

PathContentExplanation

/workspace/SynapEditor_2.x.x/SynapEditor

Image RemovedImage Added

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

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

theme : theme directory

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

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

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

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

/workspace/SynapEditor_2.x.x/sedocConverter

Windows

Linux

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

Windows : sedocConverter.exe , 각종 and multiple dll files

Linux : sedocConverter_exe


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

...

file under /workspace. 

PathExplanation

/workspace/fonts

문서 임포트 시 메타파일

Font file used to convert metafiles (wmf/emf)

변환에 사용되는 폰트파일

during document import


2.

...

Configuration

2.

...

1 License Configuration

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

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


3.

...

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

...

3. Initializing SynapEditor and Saving Edited Contents

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

3.1 Using <div> tag

3.1.1

...

Include js and css file for SynapEditor with <script> and <link> tags

Code Block
languagejs
themeEmacs
linenumberstrue
<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 Create new SynapEditor instance using <div> tag

Code Block
languagexml
themeEmacs
linenumberstrue
<!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 Save edited content by POSTing HTML form

...

This example uses jQuery to send POST request.

Code Block
languagexml
themeEmacs
linenumberstrue
<!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 Using <textarea> tag

...

Anchor
textarea
textarea

3.2.1

...

Include script and css file for SynapEditor with <script> and <link> tags

Code Block
languagejs
themeEmacs
linenumberstrue
<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 Create new SynapEditor instance using <textarea> tag

...

Code Block
languagexml
themeEmacs
linenumberstrue
<!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 Save edited content by POSTing HTML form

...

This example uses jQuery to send POST request.

Code Block
languagexml
themeEmacs
linenumberstrue
<!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.

...

Applying Plugins and External Modules 

You can add the various plugins provided by SynapEditor as follows. 

Please refer to Plugin page for more detailed information.

Excerpt Include
플러그인Plugin플러그인
Plugin
nopaneltrue

외부모듈 적용

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

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

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

...

languagexml
themeEmacs
linenumberstrue

...

Applying External Modules 

Apply external modules like Code Mirror etc. to enjoy more powerful editing features. 

External Module용도
CodeMirrorYou can display the source code prettier and edit it conveniently.
formulaParserExpand the function so that you can use the Excel function in the editor table.
SEDocModelParserExpands functionality to import doc, docx, xls, xlsx documents.
SEShapeManager

The function is expanded to enable import and mark-in of a document containing figures.

This module must be applied to use the shape editing plug-in.

Please refer to External Module page for more detailed information.

Example of applying plugins and external modules 

Code Block
languagexml
themeEmacs
linenumberstrue
<!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 -->
<!-- Shape Editor / Release 2.8.0 or above -->
<script src="synapeditor/plugins/shapeEditor/shapeEditor.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/shapeEditor/shapeEditor.min.css">
<!-- Personal Data Protection -->
<script src="synapeditor/plugins/personalDataProtection/personalDataProtection.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/personalDataProtection/personalDataProtection.min.css">
<!-- Special Character/Emoji -->
<script src="synapeditor/plugins/characterPicker/characterPicker.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/characterPicker/characterPicker.min.css">
<!-- Photo Editor -->
<script src="synapeditor/plugins/tuiImageEditor/synapeditortuiImageEditor.configmin.js"></script>
<script src<link rel="stylesheet" href="synapeditor/plugins/tuiImageEditor/synapeditortuiImageEditor.min.js"></script>

css">
<!-- SynapWeb EditorAccessibility PluginsChecker -->
<!-- 개인정보보호 -->
<script src="synapeditor/plugins/personalDataProtection/personalDataProtection/webAccessibilityChecker/webAccessibilityChecker.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/personalDataProtectionwebAccessibilityChecker/personalDataProtectionwebAccessibilityChecker.min.min.css">
<!-- horizontalLine 특수기호/이모지Extension -->
<script src="synapeditor/plugins/characterPickerhorizontalLineExtension/characterPickerhorizontalLineExtension.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/characterPickerwebAccessibilityChecker/characterPickerwebAccessibilityChecker.min.min.css">
<!-- quote 포토에디터Extension -->
<script src="synapeditor/plugins/tuiImageEditorquoteExtension/tuiImageEditorquoteExtension.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/tuiImageEditorquoteExtension/tuiImageEditorquoteExtension.min.min.css">

<!-- 웹접근성Synap Editor 검사Externals -->
<script
<script type="text/javascript" src="'synapeditor/pluginsexternals/webAccessibilityCheckerformulaParser/webAccessibilityCheckerformula-parser.min.min.js"'></script>
<link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.css">


<!-- Release 2.8.0 or above -->
<script type="text/javascript" src='synapeditor/externals/SEDocModelParser/SEDocModelParser.min.js'></script>
<!-- Synap Editor ExternalsRelease 2.8.0 or above -->
<script type="text/javascript" src="'synapeditor/externals/formulaParserSEShapeManager/formula-parserSEShapeManager.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 id="synapEditor"></div>
</body>
</html>

...

Code Block
languagejs
themeEmacs
titlesynapeditor.config.js
linenumberstrue
{
'editor.toolbar': [
    //...,
    'personalDataProtection',
    'specialCharacter', 'emoji',
    'tuiImageEditor',
    'WebAccessibilityChecker',
    //...
],
}

4

...

. Import API and Upload API Configuration

Set the import and upload API path to the configuration file for file (image, video, ...) upload and document (doc, docx, hwp, xls, xlsx) 임포트 처리를 위해 환경설정 파일에 임포트 및 업로드 API 경로를 설정합니다import.

nlnljnl;knkl;

임포트 및 업로드에 필요한 API
Info

APIs(/importDoc, /uploadImage, /uploadVideo, /uploadFIle) 는  서버연동 매뉴얼을 참고하셔서 Back-end에 구현해주셔야 합니다required for Import and upload should be implemented in Back-end. Please refer to Server Connection Manual.


Code Block
languagejs
themeEmacs
titlesynapeditor.config.js
linenumberstrue
{
    'editor.import.api': '/importDoc',
    'editor.upload.image.api': '/uploadImage',
    'editor.upload.video.api': '/uploadVideo',
    'editor.upload.file.api': '/uploadFile',
   ...
}

기타 메뉴 및 툴바 설정 등 환경설정에 대한 자세한 내용은 환경설정을  참고해주세요.Please refer to Configuration page for more detailed information regarding other settings including other menu and toolbar properties.