Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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. 

formulaParser에디터의 표에서 엑셀 함수를 사용할 수 있도록 기능을 확장합니다.SEDocModelParserhwp,
External Module용도
CodeMirror
소스코드를 더 예쁘게 보여주고 편리하게 편집 할 수 있습니다.
You 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
문서를 임포트할 수 있도록 기능을 확장합니다.SEShapeManager

도형이 포함된 문서에 대한 임포트 및 도형표인이 가능하도록 기능을 확장합니다.

도형편집 플러그인을 사용하시려면 이  모듈을 꼭 적용해야 합니다
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.

...

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 -- 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/horizontalLineExtension/horizontalLineExtension.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.min.css">
<!-- quote Extension -->
<script src="synapeditor/plugins/quoteExtension/quoteExtension.min.min.js"></script>
<link rel="stylesheet" href="synapeditor/plugins/quoteExtension/quoteExtension.min.min.css">

<!-- Synap Editor Externals -->
<script type="text/javascript" src='synapeditor/externals/formulaParser/formula-parser.min.js'></script>
<!-- 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/SEShapeManager/SEShapeManager.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>

...