...
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| linenumbers | true |
|---|
|
<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
...
문서 임포트 관련 모듈을 include하세요.
xlsx, docx, hwp 등의 문서를 임포트 하는 기능을 사용하기 위해서는 에디터 패키지 externals 폴더 아래에 포함된 SEDocModelParser, SEShapeManager 모듈을 include 합니다.
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| linenumbers | true |
|---|
|
<!DOCTYPE html>
<html lang="ko"><script src="externals/SEDocModelParser/SEDocModelParser.min.js"></script>
<script src="externals/SEShapeManager/SEShapeManager.min.js"></script> |
3.1.3 <div> tag를 사용하여 새로운 Synap Editor 객체를 생성합니다.
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| linenumbers | true |
|---|
|
<!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.
...
4 HTML form tag를 사용하여 작성된 내용을 저장하세요.
아래 예제는 POST 요청을 전송하기 위해 jQuery를 사용하였습니다.
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| linenumbers | true |
|---|
|
<!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"/save></textarea>
<input type="submit" methodvalue="postSAVE"/>
<textarea id="editor" style="display:none"></textarea>
<input type="submit" value="SAVE"/>
</form>
</body>
</html> |
3.2 <textarea> tag 사용
...
3.2 <textarea> tag 사용
3.2.1 <script>와 <link> tag를 사용하여 js파일과 css파일을 include하세요.
| Code Block |
|---|
| language | js |
|---|
| theme | Emacs |
|---|
| linenumbers | true |
|---|
|
<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 문서 임포트 관련 모듈을 include하세요.
xlsx, docx, hwp 등의 문서를 임포트 하는 기능을 사용하기 위해서는 에디터 패키지 externals 폴더 아래에 포함된 SEDocModelParser, SEShapeManager 모듈을 include 합니다.
| Code Block |
|---|
| language | jsxml |
|---|
| theme | Emacs | linenumbers | true |
|---|
|
<link href='synapeditor/synapeditor.min.css' rel='stylesheet' type='text/css'>
<script src='synapeditor/synapeditor.config"externals/SEDocModelParser/SEDocModelParser.min.js'"></script>
<script src='synapeditor/synapeditor"externals/SEShapeManager/SEShapeManager.min.js'"></script> |
3.2.
...
3 <textarea> tag 를 사용하여 새로운 Synap Editor 객체를 생성합니다.
| Code Block |
|---|
| language | xml |
|---|
| theme | Emacs |
|---|
| linenumbers | true |
|---|
|
<!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();">
<textarea id="synapEditor"></textarea>
</body>
</html> |
3.2.
...
4 HTML form tag를 사용하여 작성된 내용을 저장하세요.
아래 예제는 POST 요청을 전송하기 위해 jQuery를 사용하였습니다.
...