[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. 각 에디터마다 사진을 업로드하고 내용을 다 입력한뒤 '등록'버튼을 클릭하면.

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













[DaumEditor] 다음 에디터 팝업창 오픈 하여 사용하기.

DaumEditor 2016. 12. 5. 17:21





파일첨부 : 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 필드에 데이터가 정상적으로 반영된 모습을 확인 할 수 있다.







[DaumEditor] 다음 에디터 사진첨부(uploadify) 기능 추가하기.

DaumEditor 2016. 11. 17. 19:37





첨부파일 :  editor.zip




uploadify를 사용한 사진첨부 기능 추가하기.






다음 에디터는 기본적으로 사진 업로드 기능을 사용자가 직접 추가하여야 한다.

그래서 이번 포스트에서는 무료 업로드 모듈이 uplodyfy를 사용하여

한번에 여러장의 사진을 에디터를 통해 등록할 수 있게끔 해보고자 한다.






01. 다음 에디터를 세팅하고 사진 파일을 클릭하면 위와같이 아무것도 없는 화면만 나타난다.





02. 사진 업로드 기능 구현을 위해 uploadify를 사용해보자. http://www.uploadify.com/ 해당 사이트에 접속해서 uploadify를 다운받는다.

 ① 사이트에 접속하여 Flash Version을 선택한다.

 ② uploadify.zip 파일을 다운받는다.

※ HTML5 Version인 uploadyfive는 유료버전이기에 해당 포스트에서는 무료버전의 uploadyfyfmf 사용한다.






03. 다운받은 uploadify.zip 파일의 압축을 해제한다.







04. 먼저 작업해 두었던 다음 에디터 프로젝트의 경로에 moduleuploads 라는 폴더를 생성한다.

 ① check-exists.php, uploadify.php, uploadify.swf 파일을 보관할 디렉토리.

 ② 업로드한 파일을 보관할 디렉토리.






05. 가장먼저 uploadify-cancel.png 이미지 파일을 아래 와 같이 경로 이동 시킨다.

 ① daumEditor/images/icon/editor/ 경로 이동한다.

 ② uploadify-cancel.png 이미지 파일을 복사 붙여넣기 한다.







06. 다음으로 uploadify.css 파일을 다음 오픈 에디터 프로젝트로 위치시킨다.

 ① daumEditor/css/ 경로 이동한다.

 ② uploadify.css 이미지 파일을 복사 붙여넣기 한다.
 ③ uploadify.css 파이을 텍스트 편집기로 열어서 수정한다.






07. 위에서 업로드한 uploadify-cancel.png 이미지 파일의 경로를 절대경로로 수정하여 위치를 잡아준다.






08. jquery.uploadify.js, jquery.uploadify.min.js 두개의 *.js 파일들을 다음 오픈 에디터 프로젝트로 위치시킨다.

 ① daumEditor/js/ 폴더를 오픈한다.

 ② jquery.uploadify.js, jquery.uploadify.min.js 두개의 파일을 복사 붙여넣기 한다.






09. 이번엔 위에서 생성한 daumEditor/module/ 폴더로 check-exists.php, uploadify.php, uploadify.swf 3개의 파일들을 위치시키자.

 ① 위에서 생성한 module 폴더를 오픈하고.

 ② check-exists.php, uploadify.php, uploadify.swf 3개의 파일을 복사 붙여넣기 한다.

 ③ 이중 복사한 uploadify.php 파일을 텍스트 편집기로 열고 수정한다.






10. uploadify.php를 아래 코드와 같이 수정해 두자.

 uploadify.php

<?php
// 업로드될 파일의 경로를 지정한다.
$targetFolder = "/editor/uploads";

$verifyToken = md5("unique_salt".$_POST['timestamp']);

if(!empty($_FILES) && $_POST['token'] == $verifyToken) {
   
    $upName = $_POST['timestamp']."_".$_FILES['Filedata']['name'];    // 파일명 앞에 UNIX 시간을 붙여 중복되지 않게 구분한다.
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
    $targetFile = rtrim($targetPath, "/")."/".$upName;
   
    // 업로드 할 수 있는 파일의 확장자를 지정한다.
    $fileTypes = array('jpg', 'jpeg', 'gif', 'png');
    $fileParts = pathinfo($_FILES['Filedata']['name']);
   
    if(in_array($fileParts['extension'], $fileTypes)) {
        move_uploaded_file($tempFile, $targetFile);
    } else {
        echo "업로드 할 수 없는 형식의 파일입니다.";
    }
}
?>





11. 다음으로 다음 오픈 에디터의 editor.js 파일을 수정한다.







12. image.html이라고 적힌 부분을 찾고 아래 이미지와 같이 image.php로 수정한다.







13. 다음에디터 daumEditor/pages/trex/ 경로에 새로운 *.php 파일을 생성한다.

 ① 해당 경로의 image.html 파일의 사본을 제작한다.

 ② 해당 사본을 image.php로 변경혹은 생성하고, 텍스트에디터를 통해 수정한다.






14. 위에서 생성한 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">
    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;

            alert(idx + "\n/\n" + fileName + "\n/\n" + fileUpName + "\n/\n" + fileSize + "\n/\n" + fileUrl);

            var _mockdata = {
                  "imageurl" : fileUrl
                , "filename" : fileName
                , "filesize" : fileSize
                , "imagealign": "C"
                , "originalurl" : fileUrl
                , "thumburl" : fileUrl
            };


            execAttach(_mockdata);
        });

        closeWindow();
    }

    function initUploader() {

        var _opener = PopupUtil.getOpener();

        if(!_opener) {
            alert("잘못된 경로로 접근하셨습니다.");
            return;
        }

        var _attacher = getAttacher("image", _opener);
        registerAction(_attacher);
    }
</script>
</head>
<body onload="initUploader();">
<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">


                    <!-- 선택한 파일을 실제 uploads 폴더에 위치시키는 버튼 -->

                    <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="closeWindow();" 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="closeWindow();" 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) {                         // 파일 하나의 업로드 작업이 완료 후 실행되는 트리거
            alert(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>





15. 이제 다시 다음 오픈 에디터를 실행하고, 사진 버튼을 클릭한다.






16. 이미지 첨부 팝업 창이 뜨면 아래 순서대로 작업을 수행한다.

 SELECT FILES 버튼을 클릭하고 업로드한 파일을 선택한다.

 ② 선택한 파일이 ③번 영역에 타이틀이 나타나면 Upload Files 버튼을 클릭하여 실제로 파일을 업로드 시킨다.

 업로드할 파일 목록이 나타나는 영역으로, Upload Files 버튼을 클릭하여 실제로 업로드가 다 되면 파란색 줄이 꽉 차서 나타난다.

 ④ 실제 업로드가 완료되면 등록 버튼을 클릭한다 그럼 다음 오픈 에디터에 선택한 이미지가 나타나는 것을 확인 할 수 있다.






17. 위 작업을 완료하면 아래와같이 에디터와 파일 첨부 영영에 이미지가 추가된 것을 확인 할 수 있다.

   등록버튼을 클릭하여 파일을 등록하자.





18. view.php 페이지에 POST 값으로 전달할 값이 잘 넘어오는것을 확인 할 수 있다.





19. 그럼 uploads 폴더로 이동해보면 UNIX시간_원본파일명 으로 이미지가 잘 등록되어 있는 것을 확인 할 수 있다.









  • 뚀정 2017.02.21 17:55 ADDR 수정/삭제 답글

    감사합니다!!!!!!은인이세요 ㅠㅠㅠㅠ

  • 뚀정 2017.02.22 16:00 ADDR 수정/삭제 답글

    ㅠㅠㅠ 그런데 크롬에서만 업로드 php 로 넘어가고 익스플로러에서는 이전 창이 뜨는데 어떻게 해야 할까요?

  • 에이미 2019.04.11 18:32 ADDR 수정/삭제 답글

    제가 따라 해서 사진 클릭시 팝업 해서 사진선택까지는 되는데 그 팝업에서 에러가 나옵니다 ㅠ
    Uncaught TypeError: jQuery(...).uploadify is not a function

    몇시간째 헤매고 있는데 어떻게 해결해야될지 답답한 마음에 리플답니다 ㅠ

    • 사악미소 2019.04.11 19:17 신고 수정/삭제

      function을 제대로 찾지 못해 나는 에러인데 jquery.uploadify.min.js 파일의 경로가 잘 맞는지 확인해 봐야 겠습니다.

  • 미어캣 2019.07.24 17:57 ADDR 수정/삭제 답글

    안녕하세요 11. 다음으로 다음 오픈 에디터의 editor.js 파일을 수정한다.
    여기 부분에서 editor.js 내용 중에 image.html 부분이 없으면 ... 어떻게 하나요?!

    • 사악미소 2019.07.25 19:06 신고 수정/삭제

      안녕하세요.
      해당 image.html은
      다음 오픈 에디터의 기본 이미지 업로드 팝업창 입니다.
      최신버전은 테스트를 해보지 않았지만
      image.html이 없다면 대체할 다른 컨트롤러 파일이 존재할 겁니다.
      그 파일을 찾아보셔야 할것 같습니다.

[DaumEditor] 다음 에디터(Daum Editor) 세팅하고 사용하기.

DaumEditor 2016. 11. 17. 11:59




첨부파일 : editor.zip



다음 에디터(Daum Editor) 세팅하고 사용하기





01. https://github.com/kakao/DaumEditor/tree/gh-pages/download에 접속해서 다음에디터를 다운받자.






02. 화면 최하단을 보면 How to download 라고 적힌 유의사항이 적힌 부분이 있는데.

    여기서는 안정적인 stable(7.4.X) 버전대를 사용하기로 한다.






03. Stable(7.4.X)버전에서 가장 높은 버전대를 찾아 선택하고 클릭한다.






04. 해당 버전의 다운로드 페이지로 이동되면 아래 순서대로 작업을 수행한다.

 Download 버튼을 클릭한다.

 ② 확인 버튼을 클릭하여 daumeditor.zip 파일을 다운받는다.






05. 이제 다음 에디터 프로젝트를 수행할 폴더를 생성하고 아래 순서대로 작업을 진행한다.

 ① 다음 에디터 프로젝트를 진행할 editor 라는 폴더를 생성한다.

 ② 위에서 다운받은 daumeditor.zip 파일의 압축을 해제한다.

 ③ 압축해제된 폴더의 이름을 daumEditor로 변경하였다.






06. 이제 다음에디터를 불러와서 사용할 board.php 파일 생성한다.






07. 생성한 board.php 파일에 들어갈 소소는 아래와 같다.

 board.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>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function saveContent() {
    if(jQuery("#title").val() == "") {
        alert("제목을 입력해 주세요.");
        jQuery("#title").focus();
        return;
    }

    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;"/>
<div style="height:10px;"></div>
<div style="width:750px;">
<?php
    include_once ("./daumEditor/editor.html");      // 다음 에디터를 include 한다.
?>
<div align="right"><input type="button" value="등록" onClick="saveContent();"/></div>
</div>
</form>
</body>
</html>






08. 다음으로 작성된 값을 출력할 view.php를 생성한다.






09. view.php에 들어갈 소스는 아래와 같다.

 view.php

<?php
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";
?>





10. 이제 위에서 압축을 해제하 명칭을 변경한 daumEditor 폴더의 editor.html 파일을 수정한다.





12. editor.hml 파일을 수정한다. 아래 코드는 원래 적혀있던 주석들은 다 삭제해 두었다.

 ① 상대경로로 잡혀 있는 부분은 전부 절대경로로 변경하고 파란색 글씨로 표기하였다.

 ② 샘플로 들어가 있거나 board.php에서 미리 지정한기능 혹은 필요없어 삭제해야 하는 부분은 빨간색으로 표기하였다.

 editor.html

<!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">

<!-- form 태그 삭제 -->
<!-- <form name="tx_editor_form" id="tx_editor_form" action="http://posttestserver.com/post.php" method="post" accept-charset="utf-8"> -->

    <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>
        <div id="tx_toolbar_basic" 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" 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>
    <div id="tx_toolbar_advanced" 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">
                    <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 class="tx-side-bi" id="tx_side_bi">
        <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" 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>
   
<!-- form 태그 삭제 -->
<!-- </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 : true,
                confirmForDeleteAll : true
            }
        }
        , size: {
            contentWidth : 700
        }
    };
    EditorJSLoader.ready(function(Editor) {
        var editor = new Editor(config);
    });
</script>
<script type="text/javascript">
    /* saveContent( )함수 삭제 ( board.php 파일에서 호출 하게 끔 변경 함 ) */
    /*
    function saveContent() {
        Editor.save(); // 이 함수를 호출하여 글을 등록하면 된다.
    }
    */


    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>

<!-- 저장 버튼 삭제 ( saveContent( ) 함수는 board.php에서 호출하게 변경 ) -->
<!-- <div><button onclick="saveContent()">SAMPLE - submit contents</button></div> -->

<!-- 샘플 컨텐츠 추가 내용 삭제 -->
<!--
<textarea id="sample_contents_source" style="display:none;">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p style="text-align: center;">
        <img src="https://t1.daumcdn.net/cfile/cafe/2064CD374EE1ACCB0F" class="tx-daum-image" style="clear:none;float:none;"/>
    </p>
    <p>
        <a href="https://t1.daumcdn.net/cfile/cafe/207C8C1B4AA4F5DC01?download"><img src="snapshot/images/icon/p_gif_s.gif"/> editor_bi.gif</a>
    </p>
</textarea>
-->


<!-- 샘플 스크립트 삭제 -->
<!--
<script type="text/javascript">
    function loadContent() {
        var attachments = {};
        attachments['image'] = [];
        attachments['image'].push({
              "attacher": "image"
            , "data": {
                "imageurl" : "https://t1.daumcdn.net/cfile/cafe/2064CD374EE1ACCB0F"
                , "filename" : "github.gif"
                , "filesize" : 59501
                , "originalurl" : "https://t1.daumcdn.net/cfile/cafe/2064CD374EE1ACCB0F?original"
                , "thumburl" : "https://t1.daumcdn.net/cfile/cafe/2064CD374EE1ACCB0F?original"
            }
        });
        attachments['file'] = [];
        attachments['file'].push({
              "attacher" : "file"
            , "data" : {
                  "attachurl" : "https://t1.daumcdn.net/cfile/cafe/207C8C1B4AA4F5DC01?download"
                , "filemime" : "image/gif"
                , "filename" : "editor_bi.gif"
                , "filesize" : 640
            }
        });
        Editor.modify({
            "attachments": function() {
                var allattachments = [];
                for (var i in attachments) {
                    allattachments = allattachments.concat(attachments[i]);
                }
                return allattachments;
            }(),
            "content" : document.getElementById("sample_contents_source")
        });
    }
</script>
-->


<!-- 샘플 버튼 삭제 -->
<!-- <div><button onclick='loadContent()'>SAMPLE - load contents to editor</button></div> -->

</body>
</html>






13. 이제 board.php를 실행하고 다음에디터가 잘 실행되는 지 확인해 보자.

    정상적으로 출력이 된다면 제목과 내용을 작성한뒤 등록버튼을 클릭해보자.






14. 아래와같이 결과가 잘 전송되는 것을 확인 할 수 있다.









  • 뚀정 2017.02.22 13:29 ADDR 수정/삭제 답글

    다음 웹 에디터 다 따라해봤는데 안됐는데

    됍니다 ㅠㅠㅠ 정말 감사합니다 ㅠㅠㅠ 복받으실꺼예요 2017년도 복 다가져 가세요 !!!!!!!!!!!!!!!!