첨부 파일 : 
editor_multi.zip
■ 다음 오픈 에디터 한페이지에 여러개 띄우기
※ 해당 포스팅은 이전 작업과 이어지는 부분이 많습니다.
※ 실행시 에디터 초기화와 관련하여 실행에는 문제가 없으나, 아래와 같은 스크립트 에러가 계속 발생합니다.(이점 유의)
01. 먼저 두개의 다음 에디터를 띄울 board_multi.php 프로젝트의 디렉토리에 생성한다.
02. board_multi.php의 코드는 아래와 같다.
board_multi.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 type="text/css"> /* 사진첨부등 팝업창이 뜨면 실행될 레이어 */
#barrier {
z-index:10;
position:absolute;
top:0px;
left:0px;
width:100%;
background-color:rgba(0, 0, 0, 0.2);
}
</style>
<script src="http://www.wickedground.net:8082/editor/js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function saveContent() {
// 사용될 에디터의 수만큼 for문을 돌린다.
for(textIdx = 1; textIdx <= 3; textIdx++) {
Editor.switchEditor(textIdx);
var content = Editor.getContent();
jQuery("input[name='content" + textIdx + "']").val(content);
}
Editor.save(); // 이 함수를 호출하여 글을 등록하면 된다.
}
</script>
</head>
<body>
<form name="tx_editor_form" id="tx_editor_form" action="view.php" method="post" enctype="multipart/form-data" accept-charset="utf-8">
<b>제목 :</b> <input type="text" id="title" name="title" style="width:680px;"/>
<!-- submit전 에디터의 내용을 보관한 input 태그 -->
<input type="hidden" name="content1" value=""/>
<input type="hidden" name="content2" value=""/> <input type="hidden" name="content3" value=""/>
<div style="height:10px;"></div>
<!-- 현재 선택된 에디터가 몇번째 인지 알려주는 영역 -->
<input type="text" id="currentEditorId" style="width:745px;"/>
<div style="height:10px;"></div>
<div style="width:750px;">
<div>
<?php
// 첫번째로 사용할 에디터
$num = "1";
include "./daumEditor/editor_multi.php";
?>
</div>
<br/>
<hr/>
<br/>
<div>
<?php
// 두번째로 사용할 에디터
$num = "2";
include "./daumEditor/editor_multi.php";
?>
<br/> <hr/>
<br/>
<div>
<?php
// 세번째로 사용할 에디터
$num = "3";
include "./daumEditor/editor_multi.php";
?>
<br/>
<div align="right"><input type="button" onClick="saveContent();" value="등록"/></div>
</div>
</form>
</body>
</html>
<div id="barrier" style="display:none;"></div>
|
03. 다음으로 실제 다음 오픈에디터의 뼈대를 구성할 editor_multi.php 파일을 프로젝트의 daumEditor 폴더에 생성한다.
04. editor_multi.php의 코드는 아래와 같다.
editor_multi.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>
<div class="body">
<!-- num 값을 통해 각 id의 값에 숫자를 붙여 명칭을변경 한다. -->
<!-- idx값을 지정하여 현재 몇번째 에디터인지 체크 -->
<div id="tx_trex_container<?=$num?>" class="tx-editor-container" idx="<?=$num?>">
<div id="tx_sidebar<?=$num?>" 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<?=$num?>" 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<?=$num?>" 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<?=$num?>" 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<?=$num?>">
<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<?=$num?>">
<a href="javascript:;" title="에디터 타입">에디터</a>
</div>
</li>
</ul>
</div>
</div>
<div id="tx_toolbar_basic<?=$num?>" class="tx-toolbar tx-toolbar-basic">
<div class="tx-toolbar-boundary">
<ul class="tx-bar tx-bar-left">
<li class="tx-list">
<div id="tx_fontfamily<?=$num?>" unselectable="on" class="tx-slt-70bg tx-fontfamily">
<a href="javascript:;" title="글꼴">굴림</a>
</div>
<div id="tx_fontfamily_menu<?=$num?>" 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<?=$num?>">
<a href="javascript:;" title="글자크기">9pt</a>
</div>
<div id="tx_fontsize_menu<?=$num?>" 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<?=$num?>">
<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<?=$num?>">
<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<?=$num?>">
<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<?=$num?>">
<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<?=$num?>">
<a href="javascript:;" class="tx-icon" title="글자색">글자색</a>
<a href="javascript:;" class="tx-arrow" title="글자색 선택">글자색 선택</a>
</div>
<div id="tx_forecolor_menu<?=$num?>" 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<?=$num?>">
<a href="javascript:;" class="tx-icon" title="글자 배경색">글자 배경색</a>
<a href="javascript:;" class="tx-arrow" title="글자 배경색 선택">글자 배경색 선택</a>
</div>
<div id="tx_backcolor_menu<?=$num?>" 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<?=$num?>">
<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<?=$num?>">
<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<?=$num?>">
<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<?=$num?>">
<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<?=$num?>">
<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<?=$num?>">
<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<?=$num?>">
<a href="javascript:;" class="tx-icon" title="줄간격">줄간격</a>
<a href="javascript:;" class="tx-arrow" title="줄간격">줄간격 선택</a>
</div>
<div id="tx_lineheight_menu<?=$num?>" 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<?=$num?>">
<a href="javascript:;" class="tx-icon" title="리스트">리스트</a>
<a href="javascript:;" class="tx-arrow" title="리스트">리스트 선택</a>
</div>
<div id="tx_styledlist_menu<?=$num?>" 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<?=$num?>">
<a href="javascript:;" class="tx-icon" title="이모티콘">이모티콘</a>
</div>
<div id="tx_emoticon_menu<?=$num?>" 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_link2">
<a href="javascript:;" class="tx-icon" title="링크 (Ctrl+K)">링크</a>
</div>
<div id="tx_link_menu<?=$num?>" class="tx-link-menu tx-menu"></div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-specialchar" id="tx_specialchar<?=$num?>">
<a href="javascript:;" class="tx-icon" title="특수문자">특수문자</a>
</div>
<div id="tx_specialchar_menu<?=$num?>" class="tx-specialchar-menu tx-menu"></div>
</li>
<li class="tx-list">
<div unselectable="on" class="tx-btn-bg tx-table" id="tx_table<?=$num?>">
<a href="javascript:;" class="tx-icon" title="표만들기">표만들기</a>
</div>
<div id="tx_table_menu<?=$num?>" 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<?=$num?>">
<a href="javascript:;" class="tx-icon" title="구분선">구분선</a>
</div>
<div id="tx_horizontalrule_menu<?=$num?>" 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<?=$num?>">
<a href="javascript:;" class="tx-icon" title="글상자">글상자</a>
</div>
<div id="tx_richtextbox_menu<?=$num?>" 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<?=$num?>">
<a href="javascript:;" class="tx-icon" title="인용구 (Ctrl+Q)">인용구</a>
</div>
<div id="tx_quote_menu<?=$num?>" 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<?=$num?>">
<a href="javascript:;" class="tx-icon" title="배경색">배경색</a>
</div>
<div id="tx_background_menu<?=$num?>" 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_dictionary2">
<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<?=$num?>">
<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<?=$num?>">
<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<?=$num?>">
<a href="javascript:;" class="tx-icon" title="툴바 더보기">툴바 더보기</a>
</div>
</li>
</ul>
</div>
</div>
<div id="tx_toolbar_advanced2" class="tx-toolbar tx-toolbar-advanced">
<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<?=$num?>">
<a href="javascript:;" class="tx-icon2" title="병합">병합</a>
</div>
<div id="tx_mergecells_menu<?=$num?>" 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<?=$num?>">
<a href="javascript:;" class="tx-icon2" title="삽입">삽입</a>
</div>
<div id="tx_insertcells_menu<?=$num?>" 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<?=$num?>">
<a href="javascript:;" class="tx-icon2" title="삭제">삭제</a>
</div>
<div id="tx_deletecells_menu<?=$num?>" 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<?=$num?>" unselectable="on" class="tx-slt-70lbg tx-cellslinepreview">
<a href="javascript:;" title="선 미리보기"></a>
</div>
<div id="tx_cellslinepreview_menu<?=$num?>" class="tx-cellslinepreview-menu tx-menu" unselectable="on"></div>
</li>
<li class="tx-list">
<div id="tx_cellslinecolor<?=$num?>" 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<?=$num?>" class="tx-cellslinecolor-menu tx-menu tx-colorpallete" unselectable="on"></div>
</li>
<li class="tx-list">
<div id="tx_cellslineheight<?=$num?>" unselectable="on" class="tx-btn-bg tx-cellslineheight">
<a href="javascript:;" class="tx-icon2" title="두께">두께</a>
</div>
<div id="tx_cellslineheight_menu<?=$num?>" class="tx-cellslineheight-menu tx-menu" unselectable="on"></div>
</li>
<li class="tx-list">
<div id="tx_cellslinestyle<?=$num?>" unselectable="on" class="tx-btn-bg tx-cellslinestyle">
<a href="javascript:;" class="tx-icon2" title="스타일">스타일</a>
</div>
<div id="tx_cellslinestyle_menu<?=$num?>" class="tx-cellslinestyle-menu tx-menu" unselectable="on"></div>
</li>
<li class="tx-list">
<div id="tx_cellsoutline<?=$num?>" unselectable="on" class="tx-btn-rbg tx-cellsoutline">
<a href="javascript:;" class="tx-icon2" title="테두리">테두리</a>
</div>
<div id="tx_cellsoutline_menu<?=$num?>" 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<?=$num?>" 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<?=$num?>" 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<?=$num?>" unselectable="on" class="tx-btn-lrbg tx-tabletemplate">
<a href="javascript:;" class="tx-icon2" title="테이블 서식">테이블 서식</a>
</div>
<div id="tx_tabletemplate_menu<?=$num?>" class="tx-tabletemplate-menu tx-menu tx-colorpallete" unselectable="on"></div>
</li>
</ul>
</div>
</div>
<div id="tx_canvas<?=$num?>" class="tx-canvas">
<div id="tx_loading<?=$num?>" 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<?=$num?>" class="tx-holder" style="display:block;">
<iframe id="tx_canvas_wysiwyg<?=$num?>" name="tx_canvas_wysiwyg2" allowtransparency="true" frameborder="0"></iframe>
</div>
<div class="tx-source-deco">
<div id="tx_canvas_source_holder<?=$num?>" class="tx-holder">
<textarea id="tx_canvas_source<?=$num?>" rows="30" cols="30"></textarea>
</div>
</div>
<div id="tx_canvas_text_holder<?=$num?>" class="tx-holder">
<textarea id="tx_canvas_text<?=$num?>" rows="30" cols="30"></textarea>
</div>
</div>
<div id="tx_resizer<?=$num?>" class="tx-resize-bar">
<div class="tx-resize-bar-bg"></div>
<img id="tx_resize_holder<?=$num?>" src="http://localhost/editor/daumEditor/images/icon/editor/skin/01/btn_drag01.gif" width="58" height="12" unselectable="on" alt="" />
</div>
<div class="tx-side-bi" id="tx_side_bi2"><div style="text-align: right;">
<img hspace="4" height="14" width="78" align="absmiddle" src="http://localhost/editor/daumEditor/images/icon/editor/editor_bi.png" />
</div>
</div>
<div id="tx_attach_div<?=$num?>" class="tx-attach-div">
<div id="tx_attach_txt<?=$num?>" class="tx-attach-txt">파일 첨부</div>
<div id="tx_attach_box<?=$num?>" class="tx-attach-box">
<div class="tx-attach-box-inner">
<div id="tx_attach_preview<?=$num?>" 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<?=$num?>" class="tx-upload-progress">
<div>0%</div>
<p>파일을 업로드하는 중입니다.</p>
</div>
<ul class="tx-attach-top">
<li id="tx_attach_delete<?=$num?>" class="tx-attach-delete">
<a>전체삭제</a>
</li>
<li id="tx_attach_size<?=$num?>" class="tx-attach-size">
파일 : <span id="tx_attach_up_size2" class="tx-attach-size-up"></span>/<span id="tx_attach_max_size2"></span>
</li>
<li id="tx_attach_tools<?=$num?>" class="tx-attach-tools"></li>
</ul>
<ul id="tx_attach_list<?=$num?>" class="tx-attach-list"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"> jQuery(document).ready(function() {
// 현재 작업중인 editr를 확인 할 스크립트. // 마우스가 에디터 외부에서 내부로 들어서면 실행된다. (mouseenter)
// 이미지 및 파일 업로드를 위해 현재 작업중인 에디터가 무엇인지 정의되어 있어야 한다.
jQuery(".tx-editor-container").mouseenter(function() {
var currentEditorId = jQuery(this).attr("idx");
Editor.switchEditor(currentEditorId);
// board_multi.php 페이지의 텍스트 영역에 현재 선택된 에디터가 무엇인지 알려준다.
jQuery("#currentEditorId").val("현재 선택된 에디터는 " + currentEditorId + "번째 에디터 입니다.");
// 마우스가 선택될 때마다 선택된 에디터를 제외한 다른 에디터를 초기화 진행
EditorJSLoader.ready(function(Editor) {
Editor.onPanelLoadComplete(function() {
for(var init = 1; init <= 9; init++) {
if(currentEditorId != <?=$num?>) {
new Editor(config + currentEditorId); }
}
});
new Editor(config + currentEditorId);
});
});
});
var config<?=$num?> = {
txHost : ""
, txPath : ""
, txService : "sample"
, txProject : "sample"
, initializedId : "<?=$num?>"
, wrapper : "tx_trex_container" + "<?=$num?>"
, form : "tx_editor_form" + ""
, txIconPath : "images/icon/editor/"
, txDecoPath : "images/deco/contents/"
, canvas : {
styles : {
color : "#123456"
, fontFamily : "굴림"
, fontSize : "10pt"
, backgroundColor : "#FFFFFF"
, lineHeight : "1.5"
, padding : "8px"
}
, showGuideArea: false
}
, events : {
preventUnload : false
}
, sidebar : {
attachbox : {
show : true
}
}
, size: {
contentWidth : 700
}
};
// 에디터를 호출할 때마다 초기화 한다.
new Editor(config<?=$num?>); </script>
</body>
</html>
|
05. 이제 이미지 팝업 창이 오픈되었을때 다른 에디터 영역이 선택되지 않게.
오픈 되었을때 전체 화면에 레이어가 뿌려지도록 파일을 image.php 생성하고 수정해 보자.
06. image.php의 코드는 아래와 같다.
image.php |
<?php $timestamp = time(); ?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Daum에디터 - 이미지 첨부</title>
<link rel="stylesheet" href="http://localhost/editor/daumEditor/css/popup.css" type="text/css" charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="http://localhost/editor/daumEditor/css/uploadify.css">
<style type="text/css">
body {
font:13px Arial, Helvetica, Sans-serif;
}
#queue {
border:1px solid #E5E5E5;
overflow:auto;
margin-bottom:10px;
padding:0 3px 3px;
float:left;
width:370px;
height:490px;
}
#uploadButton {
float:left;
margin-left:10px;
}
</style>
<script src="http://localhost/editor/daumEditor/js/popup.js" type="text/javascript" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://localhost/editor/daumEditor/js/jquery.uploadify.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
// 이미지 등록중 부모창의 다른 에디터가 선택되는 것을 방지하기 위해 // 백그라운드 레이어를 실행시킨다. jQuery(opener.document).find("#barrier").css("display", "inline");
jQuery(opener.document).find("#barrier").height(jQuery(opener.document).height());
});
function done() {
if(typeof(execAttach) == "undefined") {
return;
}
// 업로드한 파일의 수만큼 게시판에 나타내기 위해 each 문을 통해 반복시킨다.
jQuery(".fileInfo").each(function(idx) {
var fileName = jQuery("input[name='fileName']").eq(idx).val();
var fileUpName = jQuery("input[name='fileUpName']").eq(idx).val();
var fileSize = jQuery("input[name='fileSize']").eq(idx).val();
var fileUrl = "http://localhost/editor/uploads/" + fileUpName;
var _mockdata = {
"imageurl" : fileUrl
, "filename" : fileName
, "filesize" : fileSize
, "imagealign": "C"
, "originalurl" : fileUrl
, "thumburl" : fileUrl
};
execAttach(_mockdata);
});
// 등록이 완료되면 팝업창을 닫기 전에 백그라운드를 제거한다.
jQuery(opener.document).find("#barrier").css("display", "none");
closeWindow();
}
function initUploader() {
var _opener = PopupUtil.getOpener();
if(!_opener) {
alert("잘못된 경로로 접근하셨습니다.");
return;
}
var _attacher = getAttacher("image", _opener);
registerAction(_attacher);
}
function popColseWindow() {
// 팝업한 이미지 업로드 윈도우 창이 닫힐때 백그라운드 레이어를 제거한다.
jQuery(opener.document).find("#barrier").css("display", "none");
closeWindow();
}
</script>
</head> <!-- onbeforeunload 로 팝업창 종료시 함수를 실행한다. -->
<body onload="initUploader();" onbeforeunload="popColseWindow();">
<div class="wrapper">
<div class="header">
<h1>사진 첨부</h1>
</div>
<div class="body">
<dl class="alert">
<dt>사진 첨부 확인</dt>
<div style="height:10px;"></div>
<div>
<div id="queue" style="float:left;"></div>
<div id="uploadButton">
<input id="file_upload" name="file_upload" type="file" multiple="true">
<a style="position:relative;top:8px;" href="javascript:;" onClick="jQuery('#file_upload').uploadify('upload')">Upload Files</a>
</div>
</div>
</dl>
</div>
<div class="footer" style="width:100%;position:absolute;right:0px;bottom:0px;">
<p><a href="javascript:;" onClick="popColseWindow();" title="닫기" class="close">닫기</a></p>
<ul>
<li class="submit"><a href="javascript:;" onClick="done();" class="btnlink">등록</a></li>
<li class="cancel"><a href="javascript:;" onClick="popColseWindow();" title="취소" class="btnlink">취소</a></li>
</ul>
</div>
</div>
<div id="hiddenFile"></div>
</body>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#file_upload").uploadify({
auto : false // 파일 선택 후 여부 자동 업로드 (기본값 : true)
, removeCompleted : false // 파일 업로드 성공 후 업로드 창의 자동 삭제 여부 (기본값 : true)
, formData : { // formData 설정으로 사용자가 직접 업로드할 파일의 데이터를 지정할 수있다.
timestamp : "<?= $timestamp; ?>"
, token : "<?= md5('unique_salt'.$timestamp); ?>"
, nation : "kr"
}
, queueID : "queue" // 파일 업로드 상황을 나타내는 창의 위치를 강제적으로 지정한다.
, swf : "http://localhost/editor/module/uploadify.swf" // 파일 업로드 이벤트에 사용될 플래쉬 파일
, uploader : "http://localhost/editor/module/uploadify.php" // 파일 업로드를 수행할 php 파일
, onUploadComplete : function(file, data) { // 파일 하나의 업로드 작업이 완료 후 실행되는 트리거
var fileData = "<div class='fileInfo'>"
+ "<input type='hidden' name='fileName' value='" + file.name + "'/>"
+ "<input type='hidden' name='fileUpName' value='<?= $timestamp; ?>_" + file.name + "'/>"
+ "<input type='hidden' name='fileSize' value='" + file.size +"'/>"
+ "</div>";
jQuery("#hiddenFile").append(fileData);
}
});
});
</script>
</html>
|
07. 이제 board_multi.php 브라우저로 출력해보면 보면 다음과 같은 모습으로 오픈에디터가 나타나는 것을 볼 수 있다.
먼저 를 브라우저로 실행하면 3개의 다음 오픈 에디터 창이 실행되고.
각 에디터마다 마우스 커서를 옮겨보면 어느 에디터가 선택되어 있는지 확인 할 수 있다.
08. 이제 사진 버튼을 누르면 사진 첨부 창이 팝업되고.
다른 다음 오픈 에디터 영역이 선택되지 않는 모습을 확인 할 수 있다.
09. 각 에디터마다 사진을 업로드하고 내용을 다 입력한뒤 '등록'버튼을 클릭하면.
모든 에디터가 정상 작동하고 있음을 확인 할 수 있다.
