<!-- 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'>

<div style="background-color: #ffffff; width:99%; height:500px;">
        <div id="synapEditor">
			<p>
				<span>눈금자눈금자 아이콘( </span>
				<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpDMDhBNkI0M0VFQUJFODExODhGRUE1QzdBNDExRkNDQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0QkQ2MUM1QUFDMjIxMUU4OUM1N0E1MzgyNERFMjI4NyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0QkQ2MUM1OUFDMjIxMUU4OUM1N0E1MzgyNERFMjI4NyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMwOEE2QjQzRUVBQkU4MTE4OEZFQTVDN0E0MTFGQ0NBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMwOEE2QjQzRUVBQkU4MTE4OEZFQTVDN0E0MTFGQ0NBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+MNmkfAAAAFZJREFUeNpi/P//PwMlgImBQjDwBrDY2tr+p4YLGEnFhw8fZqSOF5DY/2GmwgDQew0gGijegCb+H+oS6roAqw3oYkDXoKhltLGxoSgWGEeTMuUGAAQYALZCGpW6WmVLAAAAAElFTkSuQmCC"/>
				<span> )을 클릭하면 편집영역 상단에 눈금자가 표시됩니다.</span>
			</p>
			<p>
				<span>눈금자를이용해서워드프로세서처럼편집해보세요</span>
			</p>
			<p><span></span></p>
			<p>
				<span>첫 줄 들여쓰기</span><br/>
				<span>내어쓰기</span><br/>
				<span>왼쪽 들여쓰기</span><br/>
				<span>오른쪽 들여쓰기</span>
			</p>
			<p><span></span></p>
			<p>
				<span>글머리</span>
			</p>
			<p>
				<span>글머리</span>
			</p>
			<p>
				<span>글머리</span>
			</p>
		</div>
</div>
<script>
		const config = Object.assign(synapEditorConfig, {
			"editor.license":"/se/resource/license.json",
			"editor.toolbar": ["new","|", "ruler" , "|", "bulletList", "numberedList", "multiLevelList"],
			"editor.menu.show": false,
			"editor.import.maxSize": 10485760,
		    "editor.import.api": "/se/importDoc",
		    "editor.upload.maxSize": 3145728,
		    "editor.upload.image.api": "/se/uploadFile",
		    "editor.upload.video.api": "/se/uploadFile",
		    "editor.upload.file.api": "/se/uploadFile"
			});
		window.editor = new SynapEditor("synapEditor", config, document.getElementById('synapEditor').innerHTML);
</script>