Synap Editor Documentation
Page tree

Versions Compared

Old Version 6

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

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. 

PathContentExplanation

/workspace/SynapEditor_2.x.x/SynapEditor

Image RemovedImage Added

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. 

PathExplanation

/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
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.

...

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
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 2 Create new Synap Editor 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 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 Synap Editor with 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 Synap Editor 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="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
플러그인Plugin플러그인
Plugin
nopaneltrue

...

Applying External

...

Modules 

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

Please refer to external page for more detailed information.

Example of applying plugin and external module 

...

languagexml
themeEmacs
linenumberstrue

...

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/tuiImageEditor.min.js"></script>
<link rel="stylesheet" href="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 DataExtension Protection -->
<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 type="text/javascript" src="'synapeditor/pluginsexternals/tuiImageEditorformulaParser/tuiImageEditorformula-parser.min.js"'></script>
<link
rel="stylesheet" href="synapeditor/plugins/tuiImageEditor/tuiImageEditor.min.css">
<!-- Web Accessibility CheckerRelease 2.8.0 or above -->
<script type="text/javascript" src="'synapeditor/pluginsexternals/webAccessibilityCheckerSEDocModelParser/webAccessibilityChecker.minSEDocModelParser.min.js"'></script>
<link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.css">

<!-- 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
languagejs
themeEmacs
titlesynapeditor.config.js
linenumberstrue
{
'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

APIs(/importDoc, /uploadImage, /uploadVideo, /uploadFIle) required for Import and upload should be implemented in Back-end. Please refer to server connection manualServer 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 setting up regarding settings including other menu and toolbar etcproperties.