Demo
SeedEditor는 자유롭고 편리하게 웹 문서를 작성 하실 수 있습니다. 웹 사이트 제작시 SeedEditor를 사용해 보세요.
Support Browser
SeedEditor는 다양한 브라우저를 지원 합니다. 아래의 지원 브라우저를 확인 하세요.
Download
SeedEditor 라이브러리를 다운로드 하세요.
Manual
SeedEditor 메뉴얼을 다운로드 하세요.
라이브러리 추가
Header 영역에 내려받은 SeedEditor와 Jquery를 포함 시키세요.
Jquery는 이미지를 업로드하는 경우에만 사용 됩니다.
<!-- css -->
<link rel="stylesheet" type="text/css" href="/resources/library/seededitor/seededitor.min.css" />
<!-- script -->
<script type="text/javascript" src="/resources/library/seededitor/seededitor.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
에디터 영역 추가
Body 영역에 Div 태그를 추가 하세요.
<div id="editor"></div>
에디터 생성
Javascript 영역에 SeedEditor 객체를 생성하고, 에디터를 로드하는 소스 코드를 작성 하세요.
// 객체 생성
var editor = new SeedEditor();
// 객체 정의 함수
function defineEditor() {
editor.seArea = "editor";
editor.seWidth = "898";
editor.seHeight = "300";
editor.seBackColor = "#fafafa";
editor.seBorderColor = "#bdbdbd";
editor.seFontFamily = "dotumche";
editor.seFontSize = "10pt";
editor.seLineHeight = "1.5";
editor.seFontColor = "#000000";
editor.seFontBackColor = "#ffffff";
editor.seUploadUrl = "/File/UploadImage";
editor.seTableBoxRowCnt = 10;
editor.seTableBoxCellCnt = 10;
}
// 페이지 로드
$(document).ready(function (e) {
// 객체 정의 함수 호출
defineEditor();
// 에디터 생성
editor.makeEditor(editor);
});
// 코드보기 버튼 클릭 이벤트
$(document).on("click", "#btn_get_html", function (e) {
// Html 코드보기 함수 호출
alert(editor.getEditorHtml(editor));
});
// 코드삽입 버튼 클릭 이벤트
$(document).on("click", "#btn_set_html", function (e) {
var data = '<p style="margin:0px;padding:0px;line-height:1.5;text-align:left;"><table cellspacing="0" cellpadding="0" style="border-collapse: collapse;"><tbody style="font-family: dotumche; font-size: 10pt; color: rgb(0, 0, 0);"><tr><td rowspan="1" colspan="1" style="border: 1px solid rgb(0, 0, 0); width: 296px; height: 25px; background-color: rgb(156, 198, 239); vertical-align: middle;"><p style="margin: 0px; padding: 0px; text-align: center;">구분</p></td><td rowspan="1" colspan="1" style="border: 1px solid rgb(0, 0, 0); width: 296px; height: 25px; background-color: rgb(156, 198, 239); vertical-align: middle;"><p style="margin: 0px; padding: 0px; text-align: center;">설명</p></td><td rowspan="1" colspan="1" style="border: 1px solid rgb(0, 0, 0); width: 296px; height: 25px; background-color: rgb(156, 198, 239); vertical-align: middle;"><p style="margin: 0px; padding: 0px; text-align: center;">비고</p></td></tr><tr><td rowspan="1" colspan="1" style="border: 1px solid rgb(0, 0, 0); width: 296px; height: 25px; background-color: rgb(255, 255, 255); vertical-align: middle;"><p style="margin: 0px; padding: 0px; text-align: center;">1</p></td><td rowspan="1" colspan="1" style="border: 1px solid rgb(0, 0, 0); width: 296px; height: 25px; background-color: rgb(255, 255, 255); vertical-align: middle;"><p style="margin: 0px; padding: 0px; text-align: center;">2</p></td><td rowspan="1" colspan="1" style="border: 1px solid rgb(0, 0, 0); width: 296px; height: 25px; background-color: rgb(255, 255, 255); vertical-align: middle;"><p style="margin: 0px; padding: 0px; text-align: center;">3</p></td></tr></tbody></table></p>';
editor.setEditorHtml(editor, data);
});
