...
| HTML |
|---|
<!-- external modules -->
<script type="text/javascript" src='/se/resource/synapeditor/externals/formulaParser/formula-parser.min.js'></script>
<script type="text/javascript" src='/se/resource/synapeditor/externals/SEDocModelParser/SEDocModelParser.min.js'></script>
<script type="text/javascript" src='/se/resource/synapeditor/externals/SEShapeManager/SEShapeManager.min.js'></script>
<script type="text/javascript" src='/se/resource/synapeditor/externals/codeMirror/codemirror.min.js'></script>
<script type="text/javascript" src="/se/resource/synapeditor/externals/codeMirror/xml.min.js"></script>
<link rel='stylesheet' href='/se/resource/synapeditor/externals/codeMirror/codemirror.min.css'>
<!-- Synap Editor -->
<script src='/se/resource/synapeditor/synapeditor.config.js'></script>
<script src='/se/resource/synapeditor/synapeditor.min.js'></script>
<link href='/se/resource/synapeditor/synapeditor.min.css' rel='stylesheet' type='text/css'>
<!-- plugins -->
<script type="text/javascript" src='/se/resource/synapeditor/plugins/formEditor/formEditor.min.js'></script>
<link rel='stylesheet' href='/se/resource/synapeditor/plugins/formEditor/formEditor.min.css'>
<style type="text/css">
.se-contents p {
margin: 16px 0px;
}
.se-text-body p {
margin: 0px;
}
</style>
<div style="background-color: #ffffff; width:99%; height:500px;">
<div id="synapEditor">
<div class="se-contents" style="box-sizing: content-box; font-family: "맑은 고딕"; font-size: 11pt; line-height: 1.2;" data-document-padding-top="18" data-document-padding-bottom="18" data-document-padding-left="23" data-document-padding-right="23"><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>다양한 폼 요소를 삽입하고 편집해 보세요 </span><span class="se-emoji" style="font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "Emoji Symbols", "EmojiOne Mozilla" !important;">😊</span></p><tablep><form><p style="vertical-align: text-bottom; margin: 16px 0px; display: block; overflow-wrap: break-word;"><br></p><table style="border-collapse: collapse; vertical-align: text-bottom; line-height: normal; width: 100%; word-break: break-all;" data-template-id="1"><colgroup><col style="width: 50%;"><col style="width: 50%;"></colgroup><tbody><tr><td style="text-align: left; vertical-align: top; padding: 5px; border-color: rgb(214, 214, 214); border-style: solid; border-width: 1px; word-break: break-word;"><p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>텍스트 필드: </span><input placeholder="내용을 입력해 주세요" type="text"></p><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>텍스트 영역: </span></p><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><textarea placeholder="내용을 입력해 주세요"></textarea></p><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>선택 박스: </span><select><option value="1">항목1</option><option value="2">항목2</option><option value="3">항목3</option></select></p><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>라디오 버튼: </span><input checked="true" name="test_radio" type="radio"><input name="test_radio" type="radio"><input name="test_radio" type="radio" disabled="true"><input name="test_radio" type="radio"><span class="se-zws-run"><br></span></p><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>체크 박스: </span><input checked="true" name="test_check" type="checkbox"><input name="test_check" type="checkbox"><input checked="true" name="test_check" type="checkbox" disabled="true"><input name="test_check" type="checkbox"><span class="se-zws-run"><br></span></p></td><td style="text-align: left; vertical-align: top; padding: 5px; border-color: rgb(214, 214, 214); border-style: solid; border-width: 1px; word-break: break-word;"><p style="margin: 0px; display: block; overflow-wrap: break-word;"><span>버튼: </span><button type="button">버튼</button><span> </span><button type="button" disabled="true">비활성 버튼</button></p><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>히든 필드: </span><input id="secret_field" name="secret_value" type="hidden" value="synapeditor"></p><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>데이터 목록: </span><datalist id="data_list"><option value="apple">사과</option><option value="banana">바나나</option><option value="kiwi">키위</option><option value="grape">포도</option></datalist><input list="data_list" type="text"><span class="se-zws-run"><br></span></p><fieldset style="border-color: rgb(214, 214, 214); border-style: solid; border-width: 1px;"><legend style="margin: 0px; display: block; overflow-wrap: break-word;"><span>필드셋</span></legend><p style="margin: 0px; display: block; overflow-wrap: break-word;"><br></p></fieldset><p style="margin: 0px; display: block; overflow-wrap: break-word;"><br></p></td></tr></tbody></table><table><p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><br></p></form><p><br></p></div>
</div>
</div>
<script>
const config = Object.assign(synapEditorConfig, {
"editor.license":"/se/resource/license.json",
"editor.toolbar": [
"new", "|",
"source", "preview", "guide", "|",
"formEditor_text", "formEditor_textarea", "formEditor_select", "formEditor_radio", "formEditor_checkbox",
"formEditor_button", "formEditor_hidden", "formEditor_datalist", "formEditor_fieldset", "formEditor_form"
],
"editor.menu.show": false,
"editor.guide": true,
"editor.contentFilter.allowEventAttribute": true
});
window.editor = new SynapEditor("synapEditor", config, document.getElementById('synapEditor').innerHTML);
</script> |
...