...
Synap Editor installation package is comprised of the following components.
- Synap Editor + 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.
...
| Path | Content | Explanation |
|---|---|---|
/workspace/SynapEditor_2.x.x/SynapEditor |
| externals : external External module directory plugins : plugin Plugin directory license.json : license License file synapeditor.config.js : configuration Configuration file synapeditor.min.css, synapedtiro.min.js : Synap Editor synapeditor.pkgd.min.css, synapeditor.pkgd.min.js : Synap Editor including external modules and 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.
| 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': 'SynapSoft',
'key': [
'licenseKey'
]
}
*/
'editor.license': 'synapeditor/license.json',
...
} |
3. 3. Initializing Synap Editor and
...
Saving Edited Contents
Incorporating Synap Editor into your own environment is also very simple and straightforward.
You can choose use either <div> or <textarea> tag for the instantiation of Synap Editor.
3.1 Using <div> tag
3.1.1 Include
...
js and css file for Synap Editor 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 instance using <div> tag
...
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> |
...
| 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 provided by Synap Editor as belowfollows.
Please refer to plugin Plugin page for more detailed information.
| Excerpt Include | ||||||
|---|---|---|---|---|---|---|
|
...
Applying External
...
Modules
Apply external module modules like Code Mirror etc. to get enjoy more powerful editing features.
Please refer to external 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 -->
<!-- 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">
<!-- Synap Editor Externals -->
<script type="text/javascript" src="synapeditor/externals/formulaParser/formula-parser.min.js"></script>
<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 and
...
Upload API Settings
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 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
{
'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.