...
| HTML |
|---|
<link href='http://www.synapeditor.com/resource/synapeditor/synapeditor.min.css' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src='http://www.synapeditor.com/resource/synapeditor/synapeditor.min.js'></script>
<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>
</div>
</div>
<script>
window.editor = new SynapEditor("synapEditor", {
"editor.license":"/resource/license.json",
"editor.toolbar": ["new","|", "ruler" , "|", "bulletList", "numberedList", "multiLevelList"],
"editor.menu.show": false,
"editor.import.maxSize": 10485760,
"editor.import.api": "/importDoc",
"editor.upload.maxSize": 3145728,
"editor.upload.image.api": "/uploadFile",
"editor.upload.video.api": "/uploadFile",
"editor.upload.file.api": "/uploadFile"
}, document.getElementById('synapEditor').innerHTML);
</script> |
...