...
| 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">
<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>
<table style="vertical-align: text-bottom; border-collapse: collapse; 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 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></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 name="test_radio" type="radio" checked="true"><input name="test_radio" type="radio"><input name="test_radio" type="radio"><input name="test_radio" type="radio"></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 name="test_check" type="checkbox"><input name="test_check" type="checkbox"></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</button><span class="se-zws-run"><br></span></p>
<p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>히든 필드: </span><input type="hidden"></p>
<p style="margin: 16px 0px; display: block; overflow-wrap: break-word;"><span>데이터 목록: </span><input 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>
</div>
</div>
<script>
const config = Object.assign(synapEditorConfig, {
"editor.license":"/se/resource/license.json",
"editor.toolbar": [
"new", "|",
"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.contentFilter.allowEventAttribute": true
});
window.editor = new SynapEditor("synapEditor", config, document.getElementById('synapEditor').innerHTML);
</script> |
...