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
- Fonts for metafile conversion
- fonts.zip
...
Path | Content | Explanation |
---|---|---|
/workspace/SynapEditor_2.x.x/SynapEditor | 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 : Synap EditorSynapEditor synapeditor.pkgd.min.css, synapeditor.pkgd.min.js : Synap Editor including external modules and 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 |
...
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 Synap Editor SynapEditor and Saving Edited Contents
Incorporating Synap Editor SynapEditor into your own environment is also very simple and straightforward.
You can 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 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.1.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> |
...
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
...
You can add the various plugins provided by Synap Editor SynapEditor as follows.
Please refer to Plugin page for more detailed information.
Excerpt Include | ||||||
---|---|---|---|---|---|---|
|
Applying External Modules
Apply external modules like Code Mirror etc. to enjoy more powerful editing features. Please refer to
External Module |
---|
...
Example of applying plugins and external modules
...
language | xml |
---|---|
theme | Emacs |
linenumbers | true |
...
용도 | |
---|---|
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 --> <link<script hrefsrc="synapeditor/plugins/tuiImageEditor/synapeditortuiImageEditor.min.cssjs"></script> <link rel="stylesheet" typehref="text/synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.css"> <!-- Web Accessibility Checker --> <script src="synapeditor/synapeditor.config/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.js"></script> <script src <link rel="stylesheet" href="synapeditor/synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.js"></script> <!-- Synap Editor Plugins --css"> <!-- PersonalhorizontalLine Data ProtectionExtension --> <script src="synapeditor/plugins/personalDataProtectionhorizontalLineExtension/personalDataProtectionhorizontalLineExtension.min.min.js"></script> <link rel="stylesheet" href="synapeditor/plugins/personalDataProtectionwebAccessibilityChecker/personalDataProtectionwebAccessibilityChecker.min.min.css"> <!-- Specialquote Character/EmojiExtension --> <script src="synapeditor/plugins/characterPickerquoteExtension/characterPickerquoteExtension.min.min.js"></script> <link rel="stylesheet" href="synapeditor/plugins/characterPickerquoteExtension/characterPickerquoteExtension.min.min.css"> <!-- PhotoSynap 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> <!-- Web Accessibility Checker 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 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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
{ '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, xls, xlsx) import.
...