Status | ||
---|---|---|
|
Table of Contents | ||||
---|---|---|---|---|
|
...
1. Installation
Synap Editor SynapEditor installation package is comprised of the following components.
- Synap Editor SynapEditor + Import Module
- SynapEditor_2.x.x.zip
- Forts Fonts for metafile conversion
- fonts.zip
...
Copy the installation file to the desired path and decompress the zip file.
*In this exampleGuide, we copy the file in the into /workspace path and decompress the zip file. It will also be explained in case 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.
Path | Content | Explanation |
---|---|---|
/workspace/SynapEditor_2.x.x/SynapEditor | externals : external External module directory plugins : plugin Plugin directory theme : theme directory license.json : license License file synapeditor.config.js : configuration Configuration file synapeditor.min.css, synapedtiro.min.js : Synap EditorSynapEditor synapeditor.pkgd.min.css, synapeditor.pkgd.min.js : Synap Editor including external modules and pluginsSynapEditor including plugins | |
/workspace/SynapEditor_2.x.x/sedocConverter | Windows Linux | Import module (execution file) Windows : sedocConverter.exe , all kinds of dlland multiple dll files Linux : sedocConverter_exe |
Decompress fonts.zip file under /workspace. fonts.zip 파일도 /workspace아래에 압축을 풀어주세요.
Path | Explanation |
---|---|
/workspace/fonts | Font file for converting metafile used to convert metafiles (wmf/emf) when the during document is importedimport |
2. Configuration
2.
...
1 License Configuration
Open the synapeditor.config.js file and choose designate the path for license.json file. The path for license.json file path should be accessible via a the browser. .
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
{ /** * 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.
...
3. Initializing SynapEditor and Saving Edited Contents
Incorporating SynapEditor into your own environment is also very simple and straightforward.
You can choose use either <div> or <textarea> tag for the instantiation of Synap EditorSynapEditor.
3.1 Using <div> tag
3.1.1 Include
...
js and css file
...
for SynapEditor with <script> and <link> tags
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<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 2 Create new Synap Editor SynapEditor instance using <div> tag
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<!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 uses jQuery to send POST request.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<!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 | ||||
---|---|---|---|---|
|
3.2.1 Include script and css file for Synap Editor with for SynapEditor with <script> and <link> tags
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<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 Synap Editor SynapEditor instance using <textarea> tag
...
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<!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 of Synap Editor as belowprovided by SynapEditor as follows.
Please refer to plugin Plugin page for more detailed information.
Excerpt Include | ||||||
---|---|---|---|---|---|---|
|
...
Applying External
...
Modules
Apply external module modules like Code Mirror for etc. to enjoy more powerful editing features.
Code Mirror 등 외부 모듈을 적용하여 더 강력한 편집기능을 사용할 수 있습니다.
Please refer to external page for more detailed information.
적용 방법은 외부모듈 페이지를 참고하세요.
Example of applying plugin and external module 플러그인과 외부모듈 적용 예
...
language | xml |
---|---|
theme | Emacs |
linenumbers | true |
...
External Module | 용도 |
---|---|
CodeMirror | You can display the source code prettier and edit it conveniently. |
formulaParser | Expand the function so that you can use the Excel function in the editor table. |
SEDocModelParser | Expands 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 | ||||||
---|---|---|---|---|---|---|
| ||||||
<!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/tuiImageEditor.min.js"></script> <link rel="stylesheet" href="synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.css"> <!-- Web Accessibility Checker --> <script src="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.js"></script> <link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.css"> <!-- horizontalLine Extension --> <script src="synapeditor/plugins/personalDataProtectionhorizontalLineExtension/personalDataProtectionhorizontalLineExtension.min.min.js"></script> <link rel="stylesheet" href="synapeditor/plugins/personalDataProtectionwebAccessibilityChecker/personalDataProtectionwebAccessibilityChecker.min.min.css"> <!-- 특수기호/이모지quote Extension --> <script src="synapeditor/plugins/characterPickerquoteExtension/characterPickerquoteExtension.min.min.js"></script> <link rel="stylesheet" href="synapeditor/plugins/characterPickerquoteExtension/characterPickerquoteExtension.min.min.css"> <!-- Synap Editor 포토에디터Externals --> <script srctype="synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.js"></script> <link rel="stylesheet" href="synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.css">text/javascript" src='synapeditor/externals/formulaParser/formula-parser.min.js'></script> <!-- 웹접근성 검사 Release 2.8.0 or above --> <script srctype="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.js"></script> <link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.css"> text/javascript" src='synapeditor/externals/SEDocModelParser/SEDocModelParser.min.js'></script> <!-- Synap Editor Externals Release 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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
{ 'editor.toolbar': [ //..., 'personalDataProtection', 'specialCharacter', 'emoji', 'tuiImageEditor', 'WebAccessibilityChecker', //... ], } |
4.
...
Import API and
...
Upload API Configuration
Register Set the import and upload API path to the configuration file for file (image, video, ...) upload and document file (doc, docx, xls, xlsx) import.
Info |
---|
임포트 및 업로드에 필요한 API 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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
{ 'editor.import.api': '/importDoc', 'editor.upload.image.api': '/uploadImage', 'editor.upload.video.api': '/uploadVideo', 'editor.upload.file.api': '/uploadFile', ... } |
Refer Please refer to Configuration page for more detailed information regarding other setting up regarding settings including other menu and toolbar etcproperties. 기타 메뉴 및 툴바 설정 등 환경설정에 대한 자세한 내용은 Configuration을 참고해주세요.