change webedit...

webedit/Editor.html

@@ -2,107 +2,29 @@
 // 웹에디터 필드명
 if($edit_name == "") $edit_name = "contents";
 if($edit_width == "") $edit_width="100%";
-if($edit_height == "") $edit_height="400"; 
-if($edit_skin == "") $edit_skin=""; 
-if($edit_lang == "") $edit_lang="en-US"; 
+if($edit_height == "") $edit_height="300"; 
 ?>
-<?if($edit_skin=="summernote"){?>
-<input type="hidden" id="<?=$edit_name?>" name="<?=$edit_name?>">
-<div id="summernote_<?=$edit_name?>"><?=$edit_content?></div>
-<script>
-$(document).ready(function() {
-  $('#summernote_<?=$edit_name?>').summernote({
-	placeholder: '내용을 입력해 주세요.',
-	tabsize: 2,
-	width: '<?=$edit_width?>',
-	height: '<?=$edit_height?>',
-	lang: '<?=$edit_lang?>',
-	minHeight: null,
-	maxHeight: null,
-	focus: false,
-	shortcuts: false,
-	dialogsInBody: true,
-	callbacks: {
-	  onImageUpload: function(files, editor, welEditable) {
-		for (var i = 0; i < files.length; i++) {
-		  sendFile(files[i], this);
-		}
-	  }
-	}
-  });
-});
-
-function sendFile(file, el) {
-  var form_data = new FormData();
-  form_data.append('file', file);
-  $.ajax({
-	data: form_data,
-	type: "POST",
-	url: '/common/lib/summernote/upload.php',
-	cache: false,
-	contentType: false,
-	enctype: 'multipart/form-data',
-	processData: false,
-	async: false,
-	success: function(url) {
-	  $(el).summernote('editor.insertImage', url);
-	}
-  });
-}
-</script>
-
-
-<?}else{?>
-<script type="text/javascript" src="/webedit/js/service/HuskyEZCreator.js" charset="utf-8"></script>
-
-<textarea name="<?=$edit_name?>" id="<?=$edit_name?>" rows="10" cols="100" style="width:<?=$edit_width?>; height:<?=$edit_height?>px; display:none;"><?=$edit_content?></textarea>
 
+<!--
+// ---------------------------------------------------------------------------------
+// outputBodyHTML 메서드를 호출하면 TEXTAREA 'fm_post' 폼 값에
+// 에디터에서 입력한 내용이 자동으로 입력됩니다.
+//
+// outputBodyHTML:  BODY 태그 안쪽 내용을 가져옵니다.
+// outputHTML:      HTML 문서 모두를 가져옵니다.
+// outputBodyText:  BODY 태그 안쪽의 HTML 태그를 제외한 텍스트만을 가져옵니다.
+// inputLength:     입력한 텍스트 문자 수를 리턴합니다.
+// contentsLength:  BODY 태그 안쪽의 HTML 태그를 포함한 모든 문자 수를 리턴합니다.
+// contentsLengthAll: HTML 문서의 모든 문자 수를 리턴합니다.
+-->
 
+<script type="text/javascript" src="/webedit/cheditor.js"></script>
+<textarea id="<?=$edit_name?>" name="<?=$edit_name?>"><?=$edit_content?></textarea>
+<!-- 에디터를 화면에 출력합니다. -->
 <script type="text/javascript">
-var oEditors_<?=$edit_name?> = [];
-
-var sLang = "ko_KR";	// 언어 (ko_KR/ en_US/ ja_JP/ zh_CN/ zh_TW), default = ko_KR
-
-// 추가 글꼴 목록
-var aAdditionalFontSet = [["Noto Sans KR", "Noto Sans KR"]];
-
-nhn.husky.EZCreator.createInIFrame({
-	oAppRef: oEditors_<?=$edit_name?>,
-	elPlaceHolder: "<?=$edit_name?>",
-	sSkinURI: "/webedit/SmartEditor2Skin.html",	
-	htParams : {
-		bUseToolbar : true,				// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
-		bUseVerticalResizer : true,		// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
-		bUseModeChanger : true,			// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
-		bSkipXssFilter : true,		// client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
-		aAdditionalFontList : aAdditionalFontSet,		// 추가 글꼴 목록
-		fOnBeforeUnload : function(){
-			//alert("완료!");
-		},
-		I18N_LOCALE : sLang
-	}, //boolean
-	fOnAppLoad : function(){
-		setDefaultFont_<?=$edit_name?>();
-		//예제 코드
-		//oEditors.getById["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
-	},
-	fCreator: "createSEditor2"
-});
-
-function submitContents(elClickedObj) {
-	oEditors_<?=$edit_name?>.getById["<?=$edit_name?>"].exec("UPDATE_CONTENTS_FIELD", []);	// 에디터의 내용이 textarea에 적용됩니다.
-	
-	// 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
-	
-	try {
-		elClickedObj.form.submit();
-	} catch(e) {}
-}
-
-function setDefaultFont_<?=$edit_name?>() {
-	var sDefaultFont = '나눔고딕';
-	var nFontSize = '9';
-	oEditors_<?=$edit_name?>.getById["<?=$edit_name?>"].setDefaultFont(sDefaultFont, nFontSize);
-}
-</script>
-<?}?>
+var <?=$edit_name?> = new cheditor();             							// 에디터 개체를 생성합니다.
+<?=$edit_name?>.config.editorHeight = '<?=$edit_height?>px';    // 에디터 세로폭입니다.
+<?=$edit_name?>.config.editorWidth = '<?=$edit_width?>';       	// 에디터 가로폭입니다.
+<?=$edit_name?>.inputForm = '<?=$edit_name?>';           				// textarea의 ID 이름입니다.
+<?=$edit_name?>.run();                            							// 에디터를 실행합니다.
+</script>

webedit/css/dialog.css

@@ -0,0 +1,193 @@
+body {
+    background-color: #f0f0f0;
+    margin: 0px;
+    border: 0px;
+    padding: 0px;
+    font-size: 9pt;
+    font-family: Malgun Gothic,gulim,tahoma,helvetica;
+    line-height: 1em;
+}
+td, input {
+    font-size: 9pt;
+    vertical-align: middle;
+    margin:0px;
+    line-height: 15px;
+    height: 15px;
+}
+select {
+    font-size: 9pt;
+    vertical-align: middle;
+    margin:0px;    
+}
+
+.handCursor {
+    cursor: pointer;
+}
+
+td.hover
+{
+    background-color : Fuchsia;
+}
+
+table.dlg {
+    border: 0px;
+}
+
+fieldset {
+    border: 1px solid #a0a0a0;
+    padding: 2px;
+    margin: 0px;
+}
+
+.content-outline {
+    border: 1px solid #a0a0a0;
+    padding: 5px;
+    margin: 0px;
+}
+
+.dlg td {
+    text-align: left;
+    height: 20px;
+}
+
+form {
+    display: inline;
+}
+
+.dlg input {
+    border: 2px;
+}
+
+.img {
+    border: 0px;
+    vertical-align: middle;
+}
+
+.font-normal {
+    font-size: 9pt;
+}
+
+legend {
+    font-size: 9pt;
+    font-weight: bold;
+}
+
+.button {
+    width: 64px;
+    height: 22px;
+    margin: 1px 2px 1px 2px;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+.button8em {
+    font-size: 9pt;
+    padding-top:2px !important; padding-top:2px;
+    height: 21px;
+    width: 8em;
+}
+
+.button10em {
+    font-size: 9pt;
+    padding-top:1px !important;padding-top:2px;
+    height: 21px;
+    width: 10em;
+}
+
+.emIcon {
+    width: 19px;
+    height: 19px;
+    cursor: pointer;
+}
+
+.schar {
+    border:1px solid #ccc;
+    background-color:#fff;
+    width: 18px;
+    height: 17px;
+    text-align:center;
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 1.2em;
+}
+
+.spacer {
+    margin: 10px 0px 0px 0px;
+}
+.spacer5 {
+    margin: 5px 0px 0px 0px;
+    clear: both;
+}
+.wrapper {
+    text-align: center;
+}
+
+.clear { clear: both }
+.flash-movie-source {
+    margin: 0 auto;
+}
+.flash-player-wrapper {
+    width: 560px;
+    height:315px;
+    margin-top:10px;
+    border:1px #a0a0a0 solid;
+    text-align:center;
+    overflow:auto;
+    margin: 0 auto;
+    background-color: #fff;
+    display: block;
+}
+.media-player-wrapper {
+    height:200px;
+    margin-top:5px;
+    text-align:center;
+    overflow-x:auto;
+    overflow-y:hidden;
+}
+.hr {
+    border: 0px;
+    background:#ccc;
+    height:1px;
+}
+
+.colorCellMouseOver {
+    line-height: 0px;
+    font-size: 0px;
+    height: 8px;
+    width: 8px;    
+    border: 1px solid #fff;
+}
+.colorCellMouseOut {
+    line-height: 8px;
+    font-size: 0px;
+    height: 8px;
+    width: 8px;    
+    border: 1px solid #000;
+}
+.colorInputBox {
+    background-color:#000;
+    text-align:center;
+    border:1px solid #000;
+    height:16px;
+}
+.colorWrapper {
+    border:1px solid #000;
+    background-color:#fff;
+    position:absolute;
+    padding:2px;
+    display: none;
+}
+.colorPickerButton {
+    background: url("../icons/button/color_picker.png") no-repeat center center;
+    width: 24px;
+    height: 20px;
+    cursor:pointer;
+    float: left;
+}
+.colorPickerButtonGray {
+    background: url("../icons/button/color_picker_disable.png") no-repeat center center;
+    width: 24px;
+    height: 20px;
+    cursor:pointer;
+    float: left;
+}

webedit/css/editarea.css

@@ -0,0 +1,48 @@
+/*html {
+    cursor: text; *cursor: auto;
+}*/
+p { 
+    margin: 0px;
+}
+table, td, th { border:1px dotted #ccc; }
+table { border-collapse: collapse }
+
+/*-------------------------------------------------------------------------------*/
+.ch_bogus_spacer {}
+.cheditor-zero-width { font-family: "Courier New"; }
+.htmlSourceMode {
+    font-family:  "Malgun Gothic", "Apple SD Gothic Neo", gulim;
+}
+.source-comment {
+    font-size: inherit;
+    font-family: inherit;
+    color: #666;
+    font-style: italic;
+}
+.cheditor-prettify-tabspace {
+	tab-size:5;
+	-moz-tab-size: 5;
+	-o-tab-size:  5;
+}
+code {
+    font-family:  "Malgun Gothic", "Apple SD Gothic Neo", gulim;
+    font-size: 12px;
+}
+.comment { color: #999; font-style: italic; }
+.keyword { color: #0033cc; font-weight: bold; }
+.function .keyword, .sub .keyword, .method { color: #080; }
+.string, .cdata, .filter .argument { color: #cf6a4c; }
+.attribute { color: #080; }
+.value { color: #cf6a4c; }
+.subst { color: #daefa3; }
+.regexp { color: #cf6a4c; }
+.function .title, .sub .identifier, .pi, .tag .keyword, .decorator { color: #0033cc; }
+.tag { color: #0033cc; }
+.symbol, .number { color: red; }
+.params, .variable { color: #6666ff; }
+.css .keyword { color: #cda869; }
+.rules .keyword { color: #cc33ff; font-weight: normal; }
+.rules .value { color: #cf6a4c; }
+.css .id { color: #8b98ab; }
+.hexcolor, .css .number { color: #dd7b3b; }
+.css .function { color: #dad085; }

webedit/css/imageupload.css

@@ -0,0 +1,135 @@
+#uploadWindow {
+    display: none;
+}
+
+.clear { clear: both; }
+
+#container {
+	padding: 0px;
+}
+
+.imageListWrapperHtml5, .imageListWrapper, .dragOver {
+	background-color: #fff;
+	position: absolute;
+    height: 295px;
+    width: 522px;
+    overflow-y: scroll;
+    border-radius: 4px;
+}
+.imageListWrapperHtml5 {
+    border:2px #66b2ff dashed;
+}
+.imageListWrapper {
+    border:1px #aaa solid;
+    box-shadow: 0 0 3px #aaa;
+}
+.dragOver {
+    border:2px #ff3399 dashed;
+}
+#imageInfoBox {
+    position:absolute;
+	left:548px;
+}
+.imageInfoTitle {
+    text-align: center;
+    background-color: #c0c0c0;
+    width: 130px;
+    font-family: "Malgun Gothic",gulim;
+    font-weight: bold;
+    font-size: 12px;
+}
+.imageInfoTitle span {
+    display: inline-block;
+    margin-top: -1px;
+    line-height: 22px;
+}
+.remove-button {
+	width: 93px;
+	height: 22px;
+	cursor: pointer;
+	vertical-align: middle;
+}
+.imageBox, .imageBoxHighlighted {
+	width: 120px;
+	height: 90px;
+	margin: 3px 3px;
+	float:left;
+}
+.imageBox_theImage,.imageBox_theImage_over {
+	width:100%;
+	height:100%;
+    position:relative;
+    display: block;
+    background-color: #fff;
+}
+.imageBox .imageBox_theImage{
+	border: 1px solid #e0e0e0;
+	background-image: url('../icons/dot.gif');
+	background-position: center center;
+	background-repeat: no-repeat;
+}
+.imageBox .imageBox_theImage_over {
+	border: 1px solid #a0a0a0;
+	background-image: url('../icons/dot.gif');
+	background-position: center center;
+	background-repeat: no-repeat;
+    cursor: pointer;
+}
+.imageBoxHighlighted .imageBox_theImage {
+	border: 1px solid #ff6600;
+}
+.imageBoxHighlighted .imageBox_theImage_over {
+	border: 1px solid #ff6600;
+	background-image: url('../icons/dot.gif');
+	background-position: center center;
+	background-repeat: no-repeat;
+}
+
+.removeButton, .removeButton_over {
+	display: none;
+	position:absolute;
+	cursor: pointer;
+    background-image: url(../icons/imageUpload/cross-small.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+.removeButton {
+    border: 1px solid #a0a0a0;
+}
+.removeButton_over {
+    border: 1px solid #808080;
+}
+#insertionMarker {
+	height:102px;
+	width:6px;
+	position:absolute;
+	display:none;
+}
+
+#insertionMarker img {
+	float:left;
+}
+	
+#dragDropContent{
+	position:absolute;
+	z-index:10;
+	display:none;
+}
+
+.button {
+    width: 64px;
+    height: 22px;
+    margin: 0px 2px 0px 2px;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+body {
+	margin: 0px;
+	padding: 0px;
+	overflow: hidden;
+    background-color: #f0f0f0;
+    line-height: 1em;
+    font-family: "Malgun Gothic",gulim,tahoma,helvetica;    
+    font-size: 12px;
+}

webedit/css/imageurl.css

@@ -0,0 +1,5 @@
+/* CSS file */
+
+Application
+{
+}

webedit/css/lightbox.css

@@ -0,0 +1,95 @@
+/************************************************
+
+          CHEditor Image Caption Util
+
+************************************************/
+img.chimg_photo
+{
+  border: 1px darkgray solid;
+  padding:10px;
+}
+div.imgblock
+{
+}
+div.leftjust
+{
+}
+div.rightjust
+{
+}
+div.caption
+{
+  margin-top: 5px;
+  margin-left: 0.2em;
+  color: darkgray;
+  font-size: 9pt;
+}
+div.caption-marker
+{
+  float: left;
+  margin-right: 0.2em;
+}
+div.caption-text
+{
+  float: left;
+  clear: right;
+  text-align: left;
+}
+.imageUtil {
+	cursor: url(icons/imageutil/zoomin.cur), pointer;
+    outline: none;
+}
+.imageUtil img {
+	border: 2px solid gray;
+}
+.imageUtil:hover img {
+	border: 2px solid silver;
+}
+
+.imageUtil-image {
+    border-bottom: 1px solid white;
+}
+.imageUtil-image-blur {
+}
+.imageUtil-caption {
+    display: none;
+    border-bottom: 1px solid white;
+    font-family: gulim, Verdana, Helvetica;
+    font-size: 9pt;
+    padding: 5px;
+    background-color: #fff;
+}
+.imageUtil-loading {
+    display: block;
+	color: white;
+	font-size: 9px;
+	font-weight: normal;
+    text-decoration: none;
+	padding: 3px;
+	border-top: 1px solid white;
+	border-bottom: 1px solid white;
+    background-color: black;
+    padding-left: 22px;
+    background-image: url(icons/imageutil/loader.gif);
+    background-repeat: no-repeat;
+    background-position: 3px 1px;
+}
+
+a.imageUtil-credits,
+a.imageUtil-credits i {
+    padding: 2px;
+    color: silver;
+    text-decoration: none;
+	font-size: 10px;
+}
+a.imageUtil-credits:hover,
+a.imageUtil-credits:hover i {
+    color: white;
+    background-color: gray;
+}
+.imageUtil-display-block {
+    display: block;
+}
+.imageUtil-display-none {
+    display: none;
+}

webedit/css/ui.css

@@ -0,0 +1,631 @@
+a.cheditor-tag-path-elem {
+    text-decoration:none;
+    color:#0033cc;
+    font-size: 8pt;
+    font-family: Malgun Gothic,dotum,tahoma,helvetica;
+    cursor:pointer;
+}
+a.cheditor-tag-path-elem:hover {
+    color:#0033cc;
+    text-decoration:underline;
+    cursor:pointer;
+}
+.cheditor-container {
+    border-top: 1px #ccc solid;
+    position: relative;
+    text-align: left;
+}
+.cheditor-tb-wrapper {
+    border-right:1px #ccc solid;
+    border-left:1px #ccc solid;
+    border-bottom:1px #ccc solid;
+    position: relative;
+    display: block;
+    background-color: #f0f0f0;
+}
+.cheditor-tb-wrapper div {
+    display: "";
+}
+.cheditor-tb-wrapper-readonly {
+    border-right:1px #ccc solid;
+    border-left:1px #ccc solid;
+    border-bottom:1px #ccc solid;
+    position: relative;
+    display: block;
+    background: #f0f0f0 url(../icons/readonlymode.png) no-repeat 10px center;
+}
+.cheditor-tb-wrapper-code {
+    border-right:1px #ccc solid;
+    border-left:1px #ccc solid;
+    border-bottom:1px #ccc solid;
+    position: relative;
+    display: block;
+    background: #f0f0f0 url(../icons/viewmode_code.png) no-repeat 10px center;
+}
+.cheditor-tb-wrapper-preview {
+    border-right:1px #ccc solid;
+    border-left:1px #ccc solid;
+    border-bottom:1px #ccc solid;
+    position: relative;
+    display: block;
+    background: #f0f0f0 url(../icons/viewmode_preview.png) no-repeat 10px center;
+}
+.cheditor-tb-wrapper-readonly div, .cheditor-tb-wrapper-code div, .cheditor-tb-wrapper-preview div {
+    display: none;
+}
+.cheditor-tb-fullscreen {
+    width: 16px;
+    height: 16px;
+    float: right;
+    margin-top: 3px;
+    cursor: pointer;
+    background: transparent url(../icons/fullscreen.png) no-repeat center center;
+}
+.cheditor-tb-fullscreen-disable {
+    display: none;
+}
+.cheditor-tb-fullscreen-actual {
+    width: 16px;
+    height: 16px;
+    float: right;
+    margin-top: 3px;
+    cursor: pointer;
+    background: transparent url(../icons/fullscreen_actual.png) no-repeat center center;
+}
+.cheditor-editarea-wrapper {
+    border-right: 1px #ccc solid;
+    border-bottom: 1px #ccc solid;
+    border-left: 1px #ccc solid;
+    vertical-align: top;
+}
+.cheditor-editarea {
+    width:100%;
+    overflow:auto;
+    background-color: #fff;
+    margin: 0px;
+    padding: 0px;
+}
+.cheditor-modify-block .cheditor-ico {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    margin-right: 5px;
+}
+.cheditor-modify-block select {
+    font-size: 9pt;
+    color: #000;
+}
+.cheditor-modify-block div {
+    padding: 5px 10px 5px 10px;
+    color: #000;
+    display: block;
+}
+.cheditor-modify-block div .wrap-text-desc {
+    line-height: 1em;
+    color: #000;
+}
+.cheditor-modify-block div .user-input-alt {
+    width: 120px;
+    margin: 3px 10px 0px 5px;
+    font-size: 9pt;
+    color: #000;
+}
+.cheditor-modify-block div .user-input-caption {
+    width: 250px;
+    margin: 3px 0px 0px 5px;
+    font-size: 9pt;
+    color: #000;
+}
+.cheditor-modify-block div .wrap-checked {
+    vertical-align: middle;
+    padding: 0px;
+    margin-right: 2px;
+}
+.cheditor-modify-block div .input-submit {
+    cursor: pointer;
+    vertical-align: middle;
+    margin-top: -2px;
+    margin-left: 10px;
+    height:20px;
+    width:64px;
+}
+.cheditor-modify-block div .color-picker {
+    cursor: pointer;
+    vertical-align: middle;
+    height:20px;
+    width:20px;
+}
+.cheditor-modify-block div .delete-submit {
+    cursor: pointer;
+    vertical-align: middle;
+    margin-top: -2px;
+    margin-left: 3px;
+    height:20px;
+    width:64px;
+}
+.cheditor-modify-block div .edit-table-ico {
+    cursor: pointer;
+    vertical-align: middle;
+    width: 16px;
+    height: 16px;
+    margin: 0px 3px;
+}
+.cheditor-modify-block {
+    display:none;
+    border-right: 1px #ccc solid;
+    border-bottom: 1px #ccc solid;
+    border-left: 1px #ccc solid;
+    padding:2px;
+    background-color:#eee;
+    font-size:9pt;
+    font-family: Malgun Gothic,gulim,tahoma,helvetica;
+    text-align:center;
+}
+.cheditor-status-bar {
+    font-size:8pt;
+    font-family: Malgun Gothic,dotum,tahoma,helvetica;
+    color:#333;
+}
+.cheditor-tag-path {
+    border-right: 1px #ccc solid;
+    border-bottom: 1px #ccc solid;
+    border-left: 1px #ccc solid;
+    padding: 0px 2px 0px 2px;
+    display: none;
+    height: 18px;
+    line-height:18px;
+    overflow: hidden;
+}
+.cheditor-viewmode {
+    padding: 0px 4px 0px 4px;
+    height: 16px;
+    background: transparent url(../icons/statusbar_bgline.gif) repeat-x 0 0;
+}
+.cheditor-viewmode div {
+    width: 24px;
+    height: 16px;
+    cursor: pointer;
+}
+.cheditor-tab-rich {
+    background: transparent url(../icons/edit_mode_rich_a.png) no-repeat 0 0;
+    float: left;
+}
+.cheditor-tab-rich-off {
+    background: transparent url(../icons/edit_mode_rich_b.png) no-repeat 0 0;
+    float: left;
+}
+.cheditor-tab-code {
+    background: transparent url(../icons/edit_mode_code_a.png) no-repeat 0 0;
+    float: left;
+}
+.cheditor-tab-code-off {
+    background: transparent url(../icons/edit_mode_code_b.png) no-repeat 0 0;
+    float: left;
+}
+.cheditor-tab-preview {
+    background: transparent url(../icons/edit_mode_view_a.png) no-repeat 0 0;
+    float: left;
+}
+.cheditor-tab-preview-off {
+    background: transparent url(../icons/edit_mode_view_b.png) no-repeat 0 0;
+    float: left;
+}
+.cheditor-resizebar {
+    height: 11px;
+    overflow:hidden;
+    border-left: 1px #ccc solid;
+    border-right: 1px #ccc solid;
+    cursor:s-resize;
+    background: #eee url(../icons/splitter.gif) no-repeat center top;
+}
+.cheditor-resizebar-off {
+    height: 11px;
+    overflow:hidden;
+    border-left: 1px #ccc solid;
+    border-right: 1px #ccc solid;
+    cursor: default;
+    background-color: #eee;
+}
+.cheditor_mode_icon { width: 24px; height: 16px; cursor: pointer; vertical-align:top }
+.cheditor-popup-title { font-size: 9pt; font-family:Malgun Gothic,gulim; font-weight:bold; color:#fff; }
+.cheditor-popup-cframe {
+    margin: 11px 10px;
+    padding: 0px;
+    border: none;
+    text-align: center;
+}
+.cheditor-popup-cframe iframe {
+    margin: 0px;
+    padding: 0px;
+    overflow: hidden;
+}
+.cheditor-pulldown-container {
+    border:#aaa 1px solid;
+    background-color:#fff;
+    padding:1px;
+    position: relative;
+    -moz-box-shadow: 0 0 5px #aaa;
+    -webkit-box-shadow: 0 0 5px #aaa;
+    box-shadow: 1px 1px 10px #bbb;
+}
+.cheditor-pulldown-container div {
+    padding: 2px 2px 2px 15px;
+    font-size: 9pt;
+    font-family: "Malgun Gothic",gulim,tahoma,helvetica;
+    color: #222;
+    position: relative;
+    display: block;
+    line-height: 1.2;
+    margin: 2px 2px;
+}
+.cheditor-pulldown-color-container {
+    border:#aaa 1px solid;
+    -moz-box-shadow: 0 0 5px #aaa;
+    -webkit-box-shadow: 0 0 5px #aaa;
+    box-shadow: 1px 1px 10px #bbb;
+    background-color:#fff;
+    padding:2px;
+}
+.cheditor-pulldown-container div label, .cheditor-pulldown-textblock-container div label {
+    display: block;
+}
+/*
+.cheditor-pulldown-container div:after,.cheditor-pulldown-container div:before {
+    content: '';
+    clear: both;
+}
+*/
+.cheditor-pulldown-textblock-container div div {
+    text-align: center;
+    padding: 2px;
+    font-size: 9pt;
+    color: #000;
+    line-height: 1.2;
+}
+.cheditor-pulldown-textblock-container div {
+    padding: 1px;
+}
+.cheditor-pulldown-textblock-out {
+    border: #fff 1px solid;
+}
+.cheditor-pulldown-textblock-over {
+    border: #ccc 1px solid;
+}
+.cheditor-pulldown-textblock-container {
+    border:#aaa 1px solid;
+    -moz-box-shadow: 0 0 5px #aaa;
+    -webkit-box-shadow: 0 0 5px #aaa;
+    box-shadow: 1px 1px 10px #bbb;
+    background-color:#fff;
+    padding:2px;
+}
+.cheditor-pulldown-mouseout {
+    border: #fff 1px solid;
+}
+.cheditor-pulldown-mouseover {
+    background-color: #f0f0f0;
+    border: #e0e0e0 1px solid;
+}
+.cheditor-pulldown-frame {
+    position:absolute;
+    visibility:hidden;
+    z-index: -1;
+    width:1px;
+    height:1px;
+    line-height:12px;
+}
+.cheditor-pulldown-color-cell-over, .cheditor-pulldown-color-cell {
+    float: left;
+    width: 14px;
+    height: 14px;
+    margin: 1px;
+    cursor: pointer;
+}
+.cheditor-pulldown-color-cell-over {
+    border: 1px #000 solid;
+}
+.cheditor-pulldown-color-cell-over span {
+    width: 12px;
+    height: 12px;
+    border: 1px #fff solid;
+    display: block;
+}
+.cheditor-pulldown-color-cell {
+    border: 1px #999 solid;
+}
+.cheditor-pulldown-color-cell span {
+    width: 14px;
+    height: 14px;
+    display: block;
+    border: none;
+}
+
+.cheditor-pulldown-color-selected {
+    border: 1px solid #999;
+    text-align: left;
+    margin: 4px 0px 0px 1px;
+    padding-left: 5px;
+    height: 14.5px;
+    line-height: 13px;
+    font-size: 11px;
+    font-family: verdana;
+    width: 55px;
+}
+.cheditor-pulldown-color-reset, .cheditor-pulldown-color-show-picker {
+    height: 19px;
+    width: 16px;
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0px 0px 0px 3px;
+}
+.cheditor-pulldown-color-reset {
+    background: #fff url(../icons/color_picker_reset.png) no-repeat center center;
+}
+.cheditor-pulldown-color-show-picker {
+    background: #fff url(../icons/color_picker.png) no-repeat center center;
+}
+.cheditor-pulldown-color-submit {
+    vertical-align: middle;
+    margin: 4px 1px 0px 0px;
+    height: 19px;
+    width: 40px;
+    cursor: pointer;
+    right: 0px;
+    position: absolute;
+}
+.cheditor-container-fullscreen {
+    position: fixed;
+    left: 0;
+	top: 0;
+	_position: absolute;
+    z-index: 1000;
+    text-align: left;
+    background-color: #fff;
+}
+.cheditor-popupModalBackground {
+	background-color: #efefef;
+    position: fixed;
+    _position: absolute;
+	display: none;
+	top: 0;
+	left: 0;
+	width: 100%;
+    height: 100%;
+}
+.cheditor-popup-window {
+    border:1px solid #6c6f70;
+    border-radius:4px;
+    display:none;
+    position: absolute;
+    background-color:#f0f0f0;
+    top: 0;
+    left: 0;
+    -moz-box-shadow: 0 0 5px #aaa;
+    -webkit-box-shadow: 0 0 5px #aaa;
+    box-shadow: 0 0 10px #aaa;
+    padding: 0;
+    overflow: hidden;
+}
+.cheditor-popup-drag-handle {
+    height:27px;
+    background-color:#6c6f70;
+}
+.cheditor-popup-titlebar {
+    padding: 0px 0px 0px 7px !important;
+    line-height: 1.4;
+}
+.cheditor-dragWindowTransparent { background-color: #fff; position: absolute; display: block; left:0px; top: 27px; }
+.cheditor-pulldown-wrapper {line-height: 1; }
+.cheditor-toolbar-icon-wrapper {
+    margin: 0px 2px 0px 0px;
+    float: left;
+    height: 24px;
+    overflow: hidden;
+}
+.cheditor-tb-icon {
+    height: 22px;
+    width: 16px;
+    overflow: hidden;
+}
+.cheditor-tb-icon-disable {
+    height: 22px;
+    width: 16px;
+    overflow: hidden;
+    filter: grayscale(100%);
+    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
+    filter: alpha(opacity=40) gray;
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    opacity: 0.4;
+}
+.cheditor-tb-text {
+    padding: 0px;
+    margin: 0px;
+    color: #333;
+    height: 20px;
+    line-height: 20px;
+}
+.cheditor-tb-text-disable {
+    padding: 0px;
+    margin: 0px;
+    height: 20px;
+    line-height: 20px;
+    color: #333;
+    overflow: hidden;
+    filter: grayscale(100%);
+    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
+    filter: alpha(opacity=40) gray;
+    -webkit-filter: grayscale(1);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    opacity: 0.4;
+}
+.cheditor-tb-text span, .cheditor-tb-text-disable span {
+    font-family: "Malgun Gothic", "Apple SD Gothic Neo", gulim, tahoma, helvetica;
+    margin: 0px 0px 0px 1px;
+    padding: 0px;
+    width: 41px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: block;
+    font-size: 12px;
+}
+.cheditor-tb-icon23 {
+    height: 22px;
+    width: 23px;
+    margin-left: 3px;
+    overflow: hidden;
+}
+.cheditor-tb-icon23-disable {
+    height: 22px;
+    width: 23px;
+    margin-left: 3px;
+    overflow: hidden;
+    filter: grayscale(100%);
+    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
+    filter: alpha(opacity=40) gray;
+    -webkit-filter: grayscale(1);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    opacity: 0.4;
+}
+.cheditor-tb-icon36 {
+    height: 22px;
+    width: 36px;
+    overflow: hidden;
+}
+.cheditor-tb-icon36-disable {
+    height: 22px;
+    width: 36px;
+    overflow: hidden;
+    filter: grayscale(100%);
+    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
+    filter: alpha(opacity=40) gray;
+    -webkit-filter: grayscale(1);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    opacity: 0.4;
+}
+.cheditor-tb-combo {
+    height: 22px;
+    width: 10px;
+    overflow: hidden;
+}
+.cheditor-tb-combo-disable {
+    height: 22px;
+    width: 10px;
+    overflow: hidden;
+    filter: grayscale(100%);
+    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
+    filter: alpha(opacity=40) gray;
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    opacity: 0.4;
+}
+.cheditor-tb-bg55 {
+    float: left;
+    overflow: hidden;
+    background: transparent url(../icons/toolbar-background.png) no-repeat left -483px;
+    position: relative;
+}
+.cheditor-tb-bg40 {
+    float: left;
+    overflow: hidden;
+    background: transparent url(../icons/toolbar-background.png) no-repeat left -552px;
+    position: relative;
+}
+.cheditor-tb-bg44 {
+    float: left;
+    overflow: hidden;
+    background: transparent url(../icons/toolbar-background.png) no-repeat left -621px;
+    position: relative;
+}
+.cheditor-tb-bg30-first {
+    float: left;
+    overflow: hidden;
+    background: transparent url(../icons/toolbar-background.png) no-repeat left -276px;
+    position: relative;
+}
+.cheditor-tb-bg30 {
+    float: left;
+    overflow: hidden;
+    background: transparent url(../icons/toolbar-background.png) no-repeat left -345px;
+    position: relative;
+}
+.cheditor-tb-bg30-last {
+    float: left;
+    overflow: hidden;
+    background: transparent url(../icons/toolbar-background.png) no-repeat left -414px;
+    position: relative;
+}
+.cheditor-tb-bgcombo {
+    float: left;
+    overflow: hidden;
+    background: transparent url(../icons/toolbar-background.png) no-repeat left -690px;
+    position: relative;
+}
+.cheditor-tb-bgcombo-first {
+    float: left;
+    overflow: hidden;
+    background: transparent url(../icons/toolbar-background.png) no-repeat left top;
+    position: relative;
+}
+.cheditor-tb-bgcombo-last {
+    float: left;
+    overflow: hidden;
+    background: url(../icons/toolbar-background.png) no-repeat left -759px;
+    position: relative;
+}
+.cheditor-tb-bg {
+    float: left;
+    overflow: hidden;
+    background: transparent url(../icons/toolbar-background.png) no-repeat left -69px;
+    position: relative;
+}
+.cheditor-tb-bg-first {
+    float: left;
+    overflow: hidden;
+    background: transparent url(../icons/toolbar-background.png) no-repeat left top;
+    position: relative;
+}
+.cheditor-tb-bg-last {
+    float: left;
+    overflow: hidden;
+    background: transparent url(../icons/toolbar-background.png) no-repeat left -138px;
+    position: relative;
+}
+.cheditor-tb-bg-single {
+    float: left;
+    overflow: hidden;
+    background: transparent url(../icons/toolbar-background.png) no-repeat left -207px;
+    position: relative;
+}
+.cheditor-tb-color-btn {
+	width: 16px;
+	height: 3px;
+	overflow: hidden;
+	position: absolute;
+	top: 16px;
+	left: 3px;
+}
+.cheditor-tb-button-spacer {
+    overflow: hidden;
+    width: 4px;
+    height: 4px;
+    float: left;
+}
+.cheditor-tb-split {
+	overflow: hidden;
+    height: 2px;
+    width: 3px;
+    clear: both;
+}

webedit/editor.lib.php

@@ -0,0 +1,62 @@
+<?php
+if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
+
+function editor_html($id, $content, $is_dhtml_editor=true)
+{
+    global $config;
+    global $editor_width, $editor_height;
+    static $js = true;
+
+    $width  = isset($editor_width)  ? $editor_width  : "100%";
+    $height = isset($editor_height) ? $editor_height : "250px";
+    if (defined(G5_PUNYCODE))
+        $editor_url = G5_PUNYCODE.'/'.G5_EDITOR_DIR.'/'.$config['cf_editor'];
+    else
+        $editor_url = G5_EDITOR_URL.'/'.$config['cf_editor'];
+
+    $html = "";
+    if ($is_dhtml_editor) {
+        if ($js) {
+            $html .= "<script src=\"{$editor_url}/cheditor.js\"></script>";
+        }
+        $html .= "<script>\n";
+        $html .= "var ed_{$id} = new cheditor('ed_{$id}');\n";
+        $html .= "ed_{$id}.config.editorWidth = \"{$width}\";\n";             
+        $html .= "ed_{$id}.config.editorHeight = \"{$height}\";\n";           
+        $html .= "ed_{$id}.config.imgReSize = false;\n";                    
+        $html .= "ed_{$id}.config.fullHTMLSource = false;\n";               
+        $html .= "ed_{$id}.config.editorPath = \"{$editor_url}\";\n"; 
+        $html .= "ed_{$id}.inputForm = \"tx_{$id}\";\n";                      
+        $html .= "</script>\n";                                             
+        $html .= "<span class=\"sound_only\">웹에디터 시작</span>";
+        $html .= "<textarea name=\"{$id}\" id=\"tx_{$id}\" style=\"display:none;\">{$content}</textarea>\n";
+        $html .= "\n<span class=\"sound_only\">웹 에디터 끝</span>";
+        $html .= "<script>ed_{$id}.run();</script>\n";
+    } else {
+        $html .= "<textarea id=\"$id\" name=\"$id\" style=\"width:{$width};height:{$height};\" maxlength=\"65536\">$content</textarea>\n";
+    }
+    return $html;
+}
+
+
+// textarea 로 값을 넘긴다. javascript 반드시 필요
+function get_editor_js($id, $is_dhtml_editor=true)
+{
+    if ($is_dhtml_editor) {
+        return "document.getElementById('tx_{$id}').value = ed_{$id}.outputBodyHTML();\n";
+    } else {
+        return "var {$id}_editor = document.getElementById('{$id}');\n";
+    }
+}
+
+
+//  textarea 의 값이 비어 있는지 검사
+function chk_editor_js($id, $is_dhtml_editor=true)
+{
+    if ($is_dhtml_editor) {
+        return "if (document.getElementById('tx_{$id}') && jQuery.inArray(ed_{$id}.outputBodyHTML().toLowerCase().replace(/^\s*|\s*$/g, ''), ['&nbsp;','<p>&nbsp;</p>','<p><br></p>','<div><br></div>','<p></p>','<br>','']) != -1) { alert(\"내용을 입력해 주십시오.\"); ed_{$id}.returnFalse(); return false; }\n";
+    } else {
+        return "if (!{$id}_editor.value) { alert(\"내용을 입력해 주십시오.\"); {$id}_editor.focus(); return false; }\n";
+    }
+}
+?>

webedit/example/modify.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>CHEditor</title>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<!-- cheidtor.js 파일의 위치를 지정합니다. -->
+<script type="text/javascript" src="../cheditor.js"></script>
+</head>
+<body>
+<center>
+<h3>CHEditor Demo</h3>
+<script type="text/javascript">
+
+<!-- form 을 submit() 합니다. -->
+function doSubmit (theform)
+{
+    // ---------------------------------------------------------------------------------
+    // outputBodyHTML 메서드를 호출하면 TEXTAREA 'fm_post' 폼 값에
+    // 에디터에서 입력한 내용이 자동으로 입력됩니다.
+    //
+    // outputBodyHTML:  BODY 태그 안쪽 내용을 가져옵니다.
+    // outputHTML:      HTML 문서 모두를 가져옵니다.
+    // outputBodyText:  BODY 태그 안쪽의 HTML 태그를 제외한 텍스트만을 가져옵니다.
+    // inputLength:     입력한 텍스트 문자 수를 리턴합니다.
+    // contentsLength:  BODY 태그 안쪽의 HTML 태그를 포함한 모든 문자 수를 리턴합니다.
+    // contentsLengthAll: HTML 문서의 모든 문자 수를 리턴합니다.
+
+    alert(myeditor.outputBodyHTML());
+    return false;
+}
+
+// 업로드한 이미지 정보를 리턴 받는 예제입니다.
+function showImageInfo() {
+    var data = myeditor.getImages();
+    if (data == null) {
+        alert('올린 이미지가 없습니다.');
+        return;
+    }
+
+    for (var i=0; i<data.length; i++) {
+        var str = 'URL: ' + data[i].fileUrl + "\n";
+        str += '저장 경로: ' + data[i].filePath + "\n";
+        str += '원본 이름: ' + data[i].origName + "\n";
+        str += '저장 이름: ' + data[i].fileName + "\n";
+        str += '크기: ' + data[i].fileSize;
+
+        alert(str);
+    }
+}
+</script>
+
+<form method="post" name="theform" onsubmit="return doSubmit(this)">
+
+<textarea id="fm_post" name="fm_write">이것은 수정할 글입니다.</textarea>
+
+<!-- 에디터를 화면에 출력합니다. -->
+<script type="text/javascript">
+var myeditor = new cheditor();              // 에디터 개체를 생성합니다.
+myeditor.config.editorHeight = '300px';     // 에디터 세로폭입니다.
+myeditor.config.editorWidth = '80%';        // 에디터 가로폭입니다.
+myeditor.inputForm = 'fm_post';             // textarea의 ID 이름입니다.
+myeditor.run();                             // 에디터를 실행합니다.
+</script>
+
+<br/><br/>
+
+<input type="submit" value="글 가져오기" />
+<input type="button" value="이미지 정보" onclick="showImageInfo()" />
+</form>
+
+<p>
+    <font face="verdana" size="1" color="#666666">
+        Copyright ⓒ 1997-2014 by <b>CHCODE.</b> All right reserved.
+    </font>
+</p>
+</center>
+</body>
+</html>

webedit/example/multi.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>CHEditor</title>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<!-- cheidtor.js 파일의 위치를 지정합니다. -->
+<script type="text/javascript" src="../cheditor.js"></script>
+</head>
+<body>
+<center>
+<h3>CHEditor Demo</h3>
+<script type="text/javascript">
+
+<!-- form 을 submit() 합니다. -->
+function doSubmit (theform)
+{
+    // ---------------------------------------------------------------------------------
+    // outputBodyHTML 메서드를 호출하면 TEXTAREA 'fm_post' 폼 값에
+    // 에디터에서 입력한 내용이 자동으로 입력됩니다.
+    //
+    // outputBodyHTML:  BODY 태그 안쪽 내용을 가져옵니다.
+    // outputHTML:      HTML 문서 모두를 가져옵니다.
+    // outputBodyText:  BODY 태그 안쪽의 HTML 태그를 제외한 텍스트만을 가져옵니다.
+    // inputLength:     입력한 텍스트 문자 수를 리턴합니다.
+    // contentsLength:  BODY 태그 안쪽의 HTML 태그를 포함한 모든 문자 수를 리턴합니다.
+    // contentsLengthAll: HTML 문서의 모든 문자 수를 리턴합니다.
+
+    alert(myeditor1.outputBodyHTML());
+    alert(myeditor2.outputBodyHTML());
+    return false;
+}
+</script>
+
+<form method="post" name="theform" onsubmit="return doSubmit(this)">
+
+<textarea id="fm_post1" name="fm_write"></textarea>
+
+<!-- 에디터를 화면에 출력합니다. -->
+<script type="text/javascript">
+var myeditor1 = new cheditor();             // 에디터 개체를 생성합니다.
+myeditor1.config.editorHeight = '150px';    // 에디터 세로폭입니다.
+myeditor1.config.editorWidth = '80%';       // 에디터 가로폭입니다.
+myeditor1.inputForm = 'fm_post1';           // textarea의 ID 이름입니다.
+myeditor1.run();                            // 에디터를 실행합니다.
+</script>
+
+<br/><br/>
+
+<textarea id="fm_post2" name="fm_write2"></textarea>
+<script type="text/javascript">
+var myeditor2 = new cheditor();             // 에디터 개체를 생성합니다.
+myeditor2.config.editorHeight = '150px';    // 에디터 세로폭입니다.
+myeditor2.config.editorWidth = '80%';       // 에디터 가로폭입니다.
+myeditor2.inputForm = 'fm_post2';           // textarea의 ID 이름입니다.
+myeditor2.run();                            // 에디터를 실행합니다.
+</script>
+
+<br/><br/>
+
+<input type="submit" value="글 가져오기" />
+</form>
+
+<p>
+    <font face="verdana" size="1" color="#666666">
+        Copyright ⓒ 1997-2014 by <b>CHCODE.</b> All right reserved.
+    </font>
+</p>
+</center>
+</body>
+</html>

webedit/example/newpost.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>CHEditor 5</title>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<!-- cheidtor.js 파일의 위치를 지정합니다. -->
+<script type="text/javascript" src="../cheditor.js"></script>
+</head>
+<body>
+<center>
+<h3>CHEditor Demo</h3>
+<script type="text/javascript">
+function doSubmit (theform)
+{
+    // ---------------------------------------------------------------------------------
+    // myeditor라는 이름은 현재 데모에서 만들어진 에디터 개체 이름입니다.
+    //
+    // myeditor.outputBodyHTML() 메서드를 호출하면 에디터에서 작성한 글 내용이
+    // myeditor.inputForm 설정 옵션에 지정한 'fm_post' 폼 값에 자동으로 입력됩니다.
+    //
+    // outputBodyHTML:  BODY 태그 안쪽 내용을 가져옵니다.
+    // outputHTML:      HTML 문서 모두를 가져옵니다.
+    // outputBodyText:  BODY 태그 안쪽의 HTML 태그를 제외한 텍스트만을 가져옵니다.
+    // inputLength:     입력한 텍스트 문자 수를 리턴합니다.
+    // contentsLength:  BODY 태그 안쪽의 HTML 태그를 포함한 모든 문자 수를 리턴합니다.
+    // contentsLengthAll: HTML 문서의 모든 문자 수를 리턴합니다.
+
+    alert(myeditor.outputBodyHTML());
+    return false;
+}
+
+// 업로드한 이미지 정보를 얻는 예제입니다.
+function showImageInfo() {
+    var data = myeditor.getImages();
+    if (data == null) {
+        alert('올린 이미지가 없습니다.');
+        return;
+    }
+
+    for (var i=0; i<data.length; i++) {
+        var str = 'URL: ' + data[i].fileUrl + "\n";
+        str += '저장 경로: ' + data[i].filePath + "\n";
+        str += '원본 이름: ' + data[i].origName + "\n";
+        str += '저장 이름: ' + data[i].fileName + "\n";
+        str += '크기: ' + data[i].fileSize;
+
+        alert(str);
+    }
+}
+</script>
+
+<form method="post" name="theform" onsubmit="return doSubmit(this)">
+<textarea id="fm_post" name="fm_write"></textarea>
+
+<!-- 에디터를 화면에 출력합니다. -->
+<script type="text/javascript">
+var myeditor = new cheditor();              // 에디터 개체를 생성합니다.
+myeditor.config.editorHeight = '300px';     // 에디터 세로폭입니다.
+myeditor.config.editorWidth = '80%';        // 에디터 가로폭입니다.
+myeditor.inputForm = 'fm_post';             // textarea의 id 이름입니다. 주의: name 속성 이름이 아닙니다.
+myeditor.run();                             // 에디터를 실행합니다.
+</script>
+
+<br/><br/>
+
+<input type="submit" value="글 가져오기" />
+<input type="button" value="이미지 정보" onclick="showImageInfo()" />
+</form>
+
+<p>
+    <font face="verdana" size="1" color="#666666">
+        Copyright ⓒ 1997-2014 by <b>CHCODE.</b> All right reserved.
+    </font>
+</p>
+</center>
+</body>
+</html>