Synap Editor Documentation
Page tree

Versions Compared

Old Version 14

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.

...

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 external modules and 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
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',
  ...
}

...

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

...

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 

...

languagexml
themeEmacs
linenumberstrue

...

용도
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>


<!-- Synap Editor Plugins --css">
<!-- PersonalWeb DataAccessibility ProtectionChecker -->
<script src="synapeditor/plugins/personalDataProtectionwebAccessibilityChecker/personalDataProtectionwebAccessibilityChecker.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/personalDataProtectionwebAccessibilityChecker/personalDataProtectionwebAccessibilityChecker.min.min.css">
<!-- SpecialhorizontalLine Character/EmojiExtension -->
<script src="synapeditor/plugins/characterPickerhorizontalLineExtension/characterPickerhorizontalLineExtension.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/characterPickerwebAccessibilityChecker/characterPickerwebAccessibilityChecker.min.min.css">
<!-- Photoquote EditorExtension -->
<script src="synapeditor/plugins/tuiImageEditorquoteExtension/tuiImageEditorquoteExtension.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/tuiImageEditorquoteExtension/tuiImageEditorquoteExtension.min.min.css">

<!-- WebSynap AccessibilityEditor CheckerExternals -->
<script type="text/javascript" src="'synapeditor/pluginsexternals/webAccessibilityChecker/webAccessibilityChecker.minformulaParser/formula-parser.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/SEDocModelParser/SEDocModelParser.min.js'></script>
<!-- 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>

...