파일첨부 : 
editor.zip
■ 다음 에디터 팝업창 오픈하여 사용하기.
01. 가장먼저 다음 에디터 프로제트 폴더에서 board_dialog.php 파일을 생성한다.
02. board_dialog.php 파일에 대한 코드는 아래와 같다.
board_dialog.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Daum 에디터</title>
<style>
#main {
z-index:1;
}
#layer {
z-index:2;
position:absolute;
top:0px;
left:0px;
width:100%;
background-color:rgba(0, 0, 0, 0.8);
}
#popup {
z-index:3;
position:fixed;
text-align:center;
left:20%;
top:20%;
width:750px;
height:555px;
background-color:#FFFFFF;
border:3px solid #87CB42;
}
#close {
z-index:4;
float:right;
}
#view {
height:450px;
width:600px;
border:1px solid #000000;
}
#content {
height:450px;
width:600px;
}
#field {
height:25px;
display:table-cell;
vertical-align:middle;
width:750px;
background-color:#C0C0C0;
}
#title {
text-align:left;
margin-top:3px;
margin-left:5px;
color:#FFFFFF;
font-weight:bold;
}
#bottom {
margin-right:5px;
}
</style>
<script type="text/javascript" src="http://www.wickedground.net:8082/editor/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function imagePopup(type, title) {
if(type == "open") {
// 팝업창을 오픈한다.
jQuery("#layer").attr("style", "display:inline");
// 페이지를 가리기 위한 레이어 영역의 높이를 페이지 전체의 높이와 같게 한다.
jQuery("#layer").height(jQuery(document).height());
// 팝업창의 타이틀을 지정
jQuery("#title").html(title);
}
else if(type == "close") {
// 팝업창을 닫는다.
jQuery("#layer").attr("style", "display:none");
}
}
function saveContent() {
// 팝업창의 입력사항을 보여준다.
var content = Editor.getContent();
jQuery("#view").html(content);
jQuery("textarea[name='content']").html(content);
// 입력이 완료된 팝업창을 닫는다.
jQuery("#layer").attr("style", "display:none");
}
</script>
</head>
<body>
<form name="tx_editor_form" id="tx_editor_form" method="post" enctype="multipart/form-data" accept-charset="utf-8">
<!-- 팝업창 열기 버튼 -->
<input type="button" href="javascript:;" onClick="imagePopup('open', 'Daum Editor - 팝업')" value="팝업 오픈"/>
<div style="height:10px;"></div>
<div id="view"></div> <!-- div 내용 보기 창 -->
<textarea id="content" name="content"></textarea> <!-- textarea 내용 보기 창 -->
<!-- 팝업창 -->
<div id="layer" style="display:none;">
<div id="popup">
<div id="field">
<div style="float:left;" id="title"></div>
<div style="float:rigth;">
<a href="javascript:;" onClick="imagePopup('close', '')";>
<img src="http://www.wickedground.net:8082/editor/daumEditor/images/icon/editor/close-window.png" id="close"/>
</a>
</div>
</div>
<div style="width:750px;">
<?php
include_once("./daumEditor/editor_dialog.php");
?>
</div>
<div style="height:5px;"></div>
<div align="right" id="bottom">
<input type="button" value="등록" onClick="saveContent();"/>
</div>
<div>
</div>
</form>
</body>
</html>
|
03. 다음으로 팝업된 다음 오픈에디터의 뼈대를 구성할 editor_dialog.php 파일을 생성한다.
04. editor_dialog.php 파일에 대한 코드는 아래와 같다.
editor_dialog.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Daum 에디터 - 등록화면 예제</title>
<link rel="stylesheet" href="http://localhost/editor/daumEditor/css/editor.css" type="text/css" charset="utf-8"/>
<script src="http://localhost/editor/daumEditor/js/editor_loader.js?environment=development" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 지난 예제와 달리 form 태그를 지우지 않고 남겨두었다. -->
<!-- 이유는 여러 부분에서 창을 띄우고 사용하기 위해서이다. -->
<form name="tx_editor_form" id="tx_editor_form" method="post" enctype="multipart/form-data" accept-charset="utf-8">
<div class="body">
<div id="tx_trex_container" class="tx-editor-container">
<div id="tx_sidebar" class="tx-sidebar">
<div class="tx-sidebar-boundary">
<ul class="tx-bar tx-bar-left tx-nav-attach">
<li class="tx-list">
<div unselectable="on" id="tx_image" class="tx-image tx-btn-trans">
<a href="javascript:;" title="사진" class="tx-text">사진</a>
</div>
</li>
<li class="tx-list">
<div unselectable="on" id="tx_file" class="tx-file tx-btn-trans">
<a href="javascript:;" title="파일" class="tx-text">파일</a>
</div>
</li>
<li class="tx-list">
<div unselectable="on" id="tx_media" class="tx-media tx-btn-trans">
<a href="javascript:;" title="외부컨텐츠" class="tx-text">외부컨텐츠</a>
</div>
</li>
<li class="tx-list tx-list-extra">
<div unselectable="on" class="tx-btn-nlrbg tx-extra">
<a href="javascript:;" class="tx-icon" title="버튼 더보기">버튼 더보기</a>
</div>
<ul class="tx-extra-menu tx-menu" style="left:-48px;" unselectable="on"></ul>
</li>
</ul>
<!-- 넓게보기는 팝업창의 크기가 커지는 걸 방지하는 차원에서 주석처리 -->
<!--
<ul class="tx-bar tx-bar-right">
<li class="tx-list">
<div unselectable="on" class="tx-btn-lrbg tx-fullscreen" id="tx_fullscreen">
<a href="javascript:;" class="tx-icon" title="넓게쓰기 (Ctrl+M)">넓게쓰기</a>
</div>
</li>
</ul>
-->
<ul class="tx-bar tx-bar-right tx-nav-opt">
<li class="tx-list">
<div unselectable="on" class="tx-switchtoggle" id="tx_switchertoggle">
<a href="javascript:;" title="에디터 타입">에디터</a>
</div>
</li>
</ul>
</div>
</div>
<!-- 툴바 더보기 기능을 오픈해두기 위하여 tx-toolbar-basic-open 클래스를 추가하였다. -->
<div id="tx_toolbar_basic" class="tx-toolbar tx-toolbar-basic tx-toolbar-basic-open"><div class="tx-toolbar-boundary">
<ul class="tx-bar tx-bar-left">
<li class="tx-list">
<div id="tx_fontfamily" unselectable="on" class="tx-slt-70bg tx-fontfamily">
<a href="javascript:;" title="글꼴">굴림</a>
</div>
<div id="tx_fontfamily_menu" class="tx-fontfamily-menu tx-menu" unselectable="on"></div>
</li>
</ul>
<ul class="tx-bar tx-bar-left">
<li class="tx-list">
<div unselectable="on" class="tx-slt-42bg tx-fontsize" id="tx_fontsize">
<a href="javascript:;" title="글자크기">9pt</a>
</div>
<div id="tx_fontsize_menu" class="tx-fontsize-menu tx-menu" unselectable="on"></div>
</li>
</ul>
<ul class="tx-bar tx-bar-left tx-group-font">
<li class="tx-list">
<div unselectable="on" class="tx-btn-lbg tx-bold" id="tx_bold">
<a href="javascript:;" class="tx-icon" title="굵게 (Ctrl+B)">굵게</a>
</div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-underline" id="tx_underline">
<a href="javascript:;" class="tx-icon" title="밑줄 (Ctrl+U)">밑줄</a>
</div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-italic" id="tx_italic">
<a href="javascript:;" class="tx-icon" title="기울임 (Ctrl+I)">기울임</a>
</div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-strike" id="tx_strike">
<a href="javascript:;" class="tx-icon" title="취소선 (Ctrl+D)">취소선</a>
</div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-slt-tbg tx-forecolor" id="tx_forecolor">
<a href="javascript:;" class="tx-icon" title="글자색">글자색</a>
<a href="javascript:;" class="tx-arrow" title="글자색 선택">글자색 선택</a>
</div>
<div id="tx_forecolor_menu" class="tx-menu tx-forecolor-menu tx-colorpallete" unselectable="on"></div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-slt-brbg tx-backcolor" id="tx_backcolor">
<a href="javascript:;" class="tx-icon" title="글자 배경색">글자 배경색</a>
<a href="javascript:;" class="tx-arrow" title="글자 배경색 선택">글자 배경색 선택</a>
</div>
<div id="tx_backcolor_menu" class="tx-menu tx-backcolor-menu tx-colorpallete" unselectable="on"></div>
</li>
</ul>
<ul class="tx-bar tx-bar-left tx-group-align">
<li class="tx-list">
<div unselectable="on" class="tx-btn-lbg tx-alignleft" id="tx_alignleft">
<a href="javascript:;" class="tx-icon" title="왼쪽정렬 (Ctrl+,)">왼쪽정렬</a>
</div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-aligncenter" id="tx_aligncenter">
<a href="javascript:;" class="tx-icon" title="가운데정렬 (Ctrl+.)">가운데정렬</a>
</div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-alignright" id="tx_alignright">
<a href="javascript:;" class="tx-icon" title="오른쪽정렬 (Ctrl+/)">오른쪽정렬</a>
</div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-rbg tx-alignfull" id="tx_alignfull">
<a href="javascript:;" class="tx-icon" title="양쪽정렬">양쪽정렬</a>
</div>
</li>
</ul>
<ul class="tx-bar tx-bar-left tx-group-tab">
<li class="tx-list">
<div unselectable="on" class="tx-btn-lbg tx-indent" id="tx_indent">
<a href="javascript:;" title="들여쓰기 (Tab)" class="tx-icon">들여쓰기</a>
</div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-rbg tx-outdent" id="tx_outdent">
<a href="javascript:;" title="내어쓰기 (Shift+Tab)" class="tx-icon">내어쓰기</a>
</div>
</li>
</ul>
<ul class="tx-bar tx-bar-left tx-group-list">
<li class="tx-list">
<div unselectable="on" class="tx-slt-31lbg tx-lineheight" id="tx_lineheight">
<a href="javascript:;" class="tx-icon" title="줄간격">줄간격</a>
<a href="javascript:;" class="tx-arrow" title="줄간격">줄간격 선택</a>
</div>
<div id="tx_lineheight_menu" class="tx-lineheight-menu tx-menu" unselectable="on"></div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-slt-31rbg tx-styledlist" id="tx_styledlist">
<a href="javascript:;" class="tx-icon" title="리스트">리스트</a>
<a href="javascript:;" class="tx-arrow" title="리스트">리스트 선택</a>
</div>
<div id="tx_styledlist_menu" class="tx-styledlist-menu tx-menu" unselectable="on"></div>
</li>
</ul>
<ul class="tx-bar tx-bar-left tx-group-etc">
<li class="tx-list">
<div unselectable="on" class="tx-btn-lbg tx-emoticon" id="tx_emoticon">
<a href="javascript:;" class="tx-icon" title="이모티콘">이모티콘</a>
</div>
<div id="tx_emoticon_menu" class="tx-emoticon-menu tx-menu" unselectable="on"></div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-link" id="tx_link">
<a href="javascript:;" class="tx-icon" title="링크 (Ctrl+K)">링크</a>
</div>
<div id="tx_link_menu" class="tx-link-menu tx-menu"></div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-specialchar" id="tx_specialchar">
<a href="javascript:;" class="tx-icon" title="특수문자">특수문자</a>
</div>
<div id="tx_specialchar_menu" class="tx-specialchar-menu tx-menu"></div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-table" id="tx_table">
<a href="javascript:;" class="tx-icon" title="표만들기">표만들기</a>
</div>
<div id="tx_table_menu" class="tx-table-menu tx-menu" unselectable="on">
<div class="tx-menu-inner">
<div class="tx-menu-preview"></div>
<div class="tx-menu-rowcol"></div>
<div class="tx-menu-deco"></div>
<div class="tx-menu-enter"></div>
</div>
</div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-rbg tx-horizontalrule" id="tx_horizontalrule">
<a href="javascript:;" class="tx-icon" title="구분선">구분선</a>
</div>
<div id="tx_horizontalrule_menu" class="tx-horizontalrule-menu tx-menu" unselectable="on"></div>
</li>
</ul>
<ul class="tx-bar tx-bar-left">
<li class="tx-list">
<div unselectable="on" class="tx-btn-lbg tx-richtextbox" id="tx_richtextbox">
<a href="javascript:;" class="tx-icon" title="글상자">글상자</a>
</div>
<div id="tx_richtextbox_menu" class="tx-richtextbox-menu tx-menu">
<div class="tx-menu-header">
<div class="tx-menu-preview-area">
<div class="tx-menu-preview"></div>
</div>
<div class="tx-menu-switch">
<div class="tx-menu-simple tx-selected"><a><span>간단 선택</span></a></div>
<div class="tx-menu-advanced"><a><span>직접 선택</span></a></div>
</div>
</div>
<div class="tx-menu-inner"></div>
<div class="tx-menu-footer">
<img class="tx-menu-confirm" src="http://localhost/editor/daumEditor/images/icon/editor/btn_confirm.gif?rv=1.0.1" alt=""/>
<img class="tx-menu-cancel" hspace="3" src="http://localhost/editor/daumEditor/images/icon/editor/btn_cancel.gif?rv=1.0.1" alt=""/>
</div>
</div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-quote" id="tx_quote">
<a href="javascript:;" class="tx-icon" title="인용구 (Ctrl+Q)">인용구</a>
</div>
<div id="tx_quote_menu" class="tx-quote-menu tx-menu" unselectable="on"></div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-background" id="tx_background">
<a href="javascript:;" class="tx-icon" title="배경색">배경색</a>
</div>
<div id="tx_background_menu" class="tx-menu tx-background-menu tx-colorpallete" unselectable="on"></div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-rbg tx-dictionary" id="tx_dictionary">
<a href="javascript:;" class="tx-icon" title="사전">사전</a>
</div>
</li>
</ul>
<ul class="tx-bar tx-bar-left tx-group-undo">
<li class="tx-list">
<div unselectable="on" class="tx-btn-lbg tx-undo" id="tx_undo">
<a href="javascript:;" class="tx-icon" title="실행취소 (Ctrl+Z)">실행취소</a>
</div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-rbg tx-redo" id="tx_redo">
<a href="javascript:;" class="tx-icon" title="다시실행 (Ctrl+Y)">다시실행</a>
</div>
</li>
</ul>
<!-- 창에 맞추기위해 표를 그리기 위한 툴바 더보기 기능은 처음부터 공개로 변경하기 위해 주석 처리 -->
<!--
<ul class="tx-bar tx-bar-right">
<li class="tx-list">
<div unselectable="on" class="tx-btn-nlrbg tx-advanced" id="tx_advanced">
<a href="javascript:;" class="tx-icon" title="툴바 더보기">툴바 더보기</a>
</div>
</li>
</ul>
-->
</div>
</div>
<!-- 더보기 기능을 위해 style에 display:block 을 주어서 강제로 오픈 시켜둠 -->
<div id="tx_toolbar_advanced" class="tx-toolbar tx-toolbar-advanced" style="display:block;">
<div class="tx-toolbar-boundary">
<ul class="tx-bar tx-bar-left">
<li class="tx-list">
<div class="tx-tableedit-title"></div>
</li>
</ul>
<ul class="tx-bar tx-bar-left tx-group-align">
<li class="tx-list">
<div unselectable="on" class="tx-btn-lbg tx-mergecells" id="tx_mergecells">
<a href="javascript:;" class="tx-icon2" title="병합">병합</a>
</div>
<div id="tx_mergecells_menu" class="tx-mergecells-menu tx-menu" unselectable="on"></div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-insertcells" id="tx_insertcells">
<a href="javascript:;" class="tx-icon2" title="삽입">삽입</a>
</div>
<div id="tx_insertcells_menu" class="tx-insertcells-menu tx-menu" unselectable="on"></div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-rbg tx-deletecells" id="tx_deletecells">
<a href="javascript:;" class="tx-icon2" title="삭제">삭제</a>
</div>
<div id="tx_deletecells_menu" class="tx-deletecells-menu tx-menu" unselectable="on"></div>
</li>
</ul>
<ul class="tx-bar tx-bar-left tx-group-align">
<li class="tx-list">
<div id="tx_cellslinepreview" unselectable="on" class="tx-slt-70lbg tx-cellslinepreview">
<a href="javascript:;" title="선 미리보기"></a>
</div>
<div id="tx_cellslinepreview_menu" class="tx-cellslinepreview-menu tx-menu" unselectable="on"></div>
</li>
<li class="tx-list">
<div id="tx_cellslinecolor" unselectable="on" class="tx-slt-tbg tx-cellslinecolor">
<a href="javascript:;" class="tx-icon2" title="선색">선색</a>
<div class="tx-colorpallete" unselectable="on"></div>
</div>
<div id="tx_cellslinecolor_menu" class="tx-cellslinecolor-menu tx-menu tx-colorpallete" unselectable="on"></div>
</li>
<li class="tx-list">
<div id="tx_cellslineheight" unselectable="on" class="tx-btn-bg tx-cellslineheight">
<a href="javascript:;" class="tx-icon2" title="두께">두께</a>
</div>
<div id="tx_cellslineheight_menu" class="tx-cellslineheight-menu tx-menu" unselectable="on"></div>
</li>
<li class="tx-list">
<div id="tx_cellslinestyle" unselectable="on" class="tx-btn-bg tx-cellslinestyle">
<a href="javascript:;" class="tx-icon2" title="스타일">스타일</a>
</div>
<div id="tx_cellslinestyle_menu" class="tx-cellslinestyle-menu tx-menu" unselectable="on"></div>
</li>
<li class="tx-list">
<div id="tx_cellsoutline" unselectable="on" class="tx-btn-rbg tx-cellsoutline">
<a href="javascript:;" class="tx-icon2" title="테두리">테두리</a>
</div>
<div id="tx_cellsoutline_menu" class="tx-cellsoutline-menu tx-menu" unselectable="on"></div>
</li>
</ul>
<ul class="tx-bar tx-bar-left">
<li class="tx-list">
<div id="tx_tablebackcolor" unselectable="on" class="tx-btn-lrbg tx-tablebackcolor" style="background-color:#9aa5ea;">
<a href="javascript:;" class="tx-icon2" title="테이블 배경색">테이블 배경색</a>
</div>
<div id="tx_tablebackcolor_menu" class="tx-tablebackcolor-menu tx-menu tx-colorpallete" unselectable="on"></div>
</li>
</ul>
<ul class="tx-bar tx-bar-left">
<li class="tx-list">
<div id="tx_tabletemplate" unselectable="on" class="tx-btn-lrbg tx-tabletemplate">
<a href="javascript:;" class="tx-icon2" title="테이블 서식">테이블 서식</a>
</div>
<div id="tx_tabletemplate_menu" class="tx-tabletemplate-menu tx-menu tx-colorpallete" unselectable="on"></div>
</li>
</ul>
</div>
</div>
<div id="tx_canvas" class="tx-canvas">
<div id="tx_loading" class="tx-loading">
<div>
<img src="http://localhost/editor/daumEditor/images/icon/editor/loading2.png" width="113" height="21" align="absmiddle"/>
</div>
</div>
<div id="tx_canvas_wysiwyg_holder" class="tx-holder" style="display:block;">
<iframe id="tx_canvas_wysiwyg" name="tx_canvas_wysiwyg" allowtransparency="true" frameborder="0"></iframe>
</div>
<div class="tx-source-deco">
<div id="tx_canvas_source_holder" class="tx-holder">
<textarea id="tx_canvas_source" rows="30" cols="30"></textarea>
</div>
</div>
<div id="tx_canvas_text_holder" class="tx-holder">
<textarea id="tx_canvas_text" rows="30" cols="30"></textarea>
</div>
</div>
<!-- 마찬가지로 팝업된 창의 영역에 맞추기 위하여 높이 조절 기능을 주석 처리 하였다. -->
<!--
<div id="tx_resizer" class="tx-resize-bar">
<div class="tx-resize-bar-bg"></div>
<img id="tx_resize_holder" src="http://localhost/editor/daumEditor/images/icon/editor/skin/01/btn_drag01.gif" width="58" height="12" unselectable="on" alt=""/>
</div>
-->
<div id="tx_attach_div" class="tx-attach-div">
<div id="tx_attach_txt" class="tx-attach-txt">파일 첨부</div>
<div id="tx_attach_box" class="tx-attach-box">
<div class="tx-attach-box-inner">
<div id="tx_attach_preview" class="tx-attach-preview">
<p></p>
<img src="http://localhost/editor/daumEditor/images/icon/editor/pn_preview.gif" width="147" height="108" unselectable="on"/>
</div>
<div class="tx-attach-main">
<div id="tx_upload_progress" class="tx-upload-progress">
<div>0%</div>
<p>파일을 업로드하는 중입니다.</p>
</div>
<ul class="tx-attach-top">
<li id="tx_attach_delete" class="tx-attach-delete">
<a>전체삭제</a>
</li>
<li id="tx_attach_size" class="tx-attach-size">
파일: <span id="tx_attach_up_size" class="tx-attach-size-up"></span>/<span id="tx_attach_max_size"></span>
</li>
<li id="tx_attach_tools" class="tx-attach-tools"></li>
</ul>
<ul id="tx_attach_list" class="tx-attach-list"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
var config = {
txHost : ""
, txPath : ""
, txService : "sample"
, txProject : "sample"
, initializedId : ""
, wrapper : "tx_trex_container"
, form : "tx_editor_form" + ""
, txIconPath : "http://localhost/editor/daumEditor/images/icon/editor/"
, txDecoPath : "http://localhost/editor/daumEditor/images/deco/contents/"
, canvas: {
exitEditor:{ }
, styles: {
color : "#123456"
, fontFamily : "굴림"
, fontSize : "10pt"
, backgroundColor : "#FFFFFF"
, lineHeight : "1.5"
, padding : "8px"
}
, showGuideArea : false
}
, events : {
preventUnload: false
}
, sidebar : {
attachbox : {
show : false /* 파일 첨부 창이 보이지 않게 false 처리 */
, confirmForDeleteAll : true
}
}
, size: {
contentWidth : 700
}
};
EditorJSLoader.ready(function(Editor) {
var editor = new Editor(config);
});
/* 툴바 더보기 오픈 */
/* 아래 코드를 사용해서 툴바 더보기를 오픈 된 상태로 둘 수 있지만 해당 예제는 그냥 강제 개행 시켜 두었다. */
// Editor.getTool("advanced").forceOpen();
</script>
<script type="text/javascript">
function validForm(editor) {
var validator = new Trex.Validator();
var content = editor.getContent();
if (!validator.exists(content)) {
alert("내용을 입력하세요");
return false;
}
return true;
}
function setForm(editor) {
var i = "";
var input = "";
var form = editor.getForm();
var content = editor.getContent();
var textarea = document.createElement('textarea');
textarea.name = "content";
textarea.value = content;
form.createField(textarea);
var images = editor.getAttachments('image');
for(i = 0; i < images.length; i++) {
if(images[i].existStage) {
alert("attachment information - image[" + i + "] \r\n" + JSON.stringify(images[i].data));
input = document.createElement('input');
input.type = "hidden";
input.name = "attach_image";
input.value = images[i].data.imageurl;
form.createField(input);
}
}
var files = editor.getAttachments('file');
for(i = 0; i < files.length; i++) {
input = document.createElement('input');
input.type = "hidden";
input.name = "attach_file";
input.value = files[i].data.attachurl;
form.createField(input);
}
return true;
}
</script>
</body>
</html>
|
05. 아래 순서대로 작업을 진행하면 정상적으로 팝업된 창에서다음 오픈에디터를 작업 할 수 있음을 확인 할 수 있다.
① '팝업 오픈' 버튼을 클릭한다.
② Daum Editor - 팝업 창이 나타나면 해당 에디터에 글을 작성하고 사진을 올려본다.
③ 위 작업이 다 마무리 되면 '등록' 버튼을 눌러준다.
06. 위 모든 작업이 끝나면 아래와 같이 div와 textarea 필드에 데이터가 정상적으로 반영된 모습을 확인 할 수 있다.
