[DaumEditor] 다음 오픈 멀티 에디터 제작

DaumEditor 2017. 5. 29. 14:44






첨부 파일 : 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">
&nbsp;<b>제목&nbsp;:</b>&nbsp;<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">
                            파일&nbsp;:&nbsp;<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. 각 에디터마다 사진을 업로드하고 내용을 다 입력한뒤 '등록'버튼을 클릭하면.

     모든 에디터가 정상 작동하고 있음을 확인 할 수 있다.