[Editor] Daum Open Editor 커스텀 메뉴 버튼 제작[Editor] Daum Open Editor 커스텀 메뉴 버튼 제작

Posted at 2018. 4. 20. 12:43 | Posted in API/DAUM 오픈 에디터
반응형




■ 다음 오픈 에디터 YouTube 영상 삽입 커스텀 버튼 제작




01. 먼저 다음 오픈 에디터 라이브러리중 editor.html 파일을 열고 수정한다.





02. editor.html 소스코드에 YouTube 영상 삽입 메뉴를 추가한다.

 editor.html


      ~ 기타 코드 생략 ~


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


<!-- YouTube 영상 삽입 커스텀 버튼 시작 -->

<li class="tx-list">
    <div style="height:25px;font-size:11px;margin-top:3px;">
        <a href="javascript:;" onClick="youTubeImplant();" title="YouTube">
            <div style="float:left;display:flex;align-items:center;">
                <img src="./daumEditor/images/icon/editor/youtube-logo.png"/>    <!-- 버튼 이미지 -->
            </div>
            <div style="float:left;display:flex;align-items:center;margin-top:2px;">&nbsp;YouTube</div>
        </a>
    </div>
</li>

<!-- YouTube 영상 삽입 커스텀 버튼 종료 -->


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


      ~ 기타 코드 생략 ~


※ 사용된 CSS Style들은 삽입한 이미지에 맞추기위해 사용된것이다. 각자 주어진 환경에 맞게 수정해야 할것이다.




03. 그럼 상단 메뉴에 아래와 같이 YouTube 버튼이 추가된 모습을 확인 할 수 있다.





04. 다음으로 다음에디터를 불러올 board.php 파일을 수정한다.






05. board.php 파일에 YouTube 업로드 기능을 수행할 팝업 기능을 가진 자바스크립트 함수를 추가한다.

 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>
<style type="text/css">
    a { text-decoration:none;color:#000000; }
</style>
<script type="text/javascript">
function saveContent() {
    if(jQuery("#title").val() == "") {
        alert("제목을 입력해 주세요.");
        jQuery("#title").focus();
        return;
    }

    Editor.save();
}

// YouTube 영상 업로드 창 팝업
function youTubeImplant() {


    var popUrl = "./daumEditor/pages/trex/youtube.html";
    var popOption = "./daumEditor/pages/trex/youtube.html";
    window.open(popUrl, "", popOption);
}
</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");
?>
<div align="right"><input type="button" value="등록" onClick="saveContent();"/></div>
</div>
</form>
</body>
</html> 





06. 마지막으로 YouTube 동영상 업로드 기능을 수행할 youtube.html 파일을 제작한다.

※ 이 포스팅은  multimedia.html 파일을 복사한 youtube.html파일 안의 코드를 수정하는 식을 작업을 진행하였다.




07. youtube.html 파일의 수정결과는 아래와 같다.

 youtube.html

<!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 에디터 - YouTube 영상첨부</title>
<script src="../../js/popup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../css/popup.css" type="text/css"  charset="utf-8"/>
<style type="text/css">
    input,textarea { border:1px solid #000000;vertical-align:middle;font-size:12px;}
    
    /* swf wrapper, set width/height */
    .wrapper { width:458px; }
    .code { width:458px; }
    
    .hidden { display:none;}
    .show { display:auto;}
    .desc{ margin: 15px 27px 5px 25px;padding:10px 8px;text-align:left;font-weight:bold;}
    .desc span{ color:#496ce5; }
    .field { margin:0 auto 10px;background:#ffffff url(../../images/icon/editor/tvpot/body_bg.gif?rev=1.0.1);width:420px;height:239px;}
    .field li{ list-style-type:none;}
    .field .codesubmenu { padding-top:20px;width:350px; margin:0 auto; }
    .codeMenu { margin:0px auto;}
    .codeMenu li { display:inline;margin-right:20px; }
    .inputmenu { margin-top:20px;padding-left:30px; color:#333;font-size:11px;font-family:"돋움",dotum}
    .inputmenu input, .inputmenu textarea{ width:308px; }
    #codeUrl { margin-top:10px;}
    
    .inputmenu .unselected{color:#bbbbbb}
    .inputmenu .unselected input, .inputmenu .unselected textarea{border:1px solid #bbbbbb;}
    
    .point {
        font-weight:normal;
        color:#a7b9ec;
    }
</style>
<script type="text/javascript">
// <![CDATA[
    function initEmbeder() {
        var _opener = PopupUtil.getOpener();
        if(!_opener) {
            alert('잘못된 경로로 접근하셨습니다.');
            return;
        }

        var _embeder = getEmbeder('media');
        window.execEmbed = _embeder.embedHandler;
        
        autoResizeHeight($tx("wrapper"));
    }
    
    // 코드 삽입 완료 후
    function done() {

        var _data = {};
        var str = document.getElementsByName("url")[0].value.trim();

       

        // YouTube URL 주소에서 뒤에서 11자리의 문자열을 잘라낸다.

        youtubeCode = str.substring(str.length - 11);
        _data.url = "https://youtu.be/" + youtubeCode;

        if(typeof(execEmbed) == 'undefined') { // Virtual Function
            return;
        }
        executeAfterDataCheck(_data, function(){
            execEmbed(_data);
            closeWindow();
        });
    }

    function executeAfterDataCheck(data, successHandler) {
        if (data.url || data.code) {
            successHandler();
        } else {
            alert("첨부할 멀티미디어 주소를 바르게 입력해주세요.");
        }
    }


    <!-- 삭제

    function selectType(id){
        var textArea = document.getElementsByName("source")[0];
        var input = document.getElementsByName("url")[0];   
        if ( id == 'codeUrl' ){
            $tx.addClassName($tx('codeSource'), "unselected")
            $tx.removeClassName($tx('codeUrl'), "unselected")
            textArea.value = "";
            textArea.disabled = true;
            input.disabled=false;
            input.focus();
        }else{
            $tx.addClassName($tx('codeUrl'), "unselected")
            $tx.removeClassName($tx('codeSource'), "unselected")
            textArea.disabled = false;
            input.value = "";       
            input.disabled=true;
            textArea.focus();
        }
        autoResizeHeight($tx("wrapper"));
    }

    -->

// ]]>
</script>
</head>

<!-- HTML 폼은 필요없는 부분들을 대부분 잘라내었다. -->

<body onload="initEmbeder()">
<div id="wrapper" class="wrapper">
<div class="header">
    <h1>YouTube 동영상 삽입</h1>
</div>    
<div class="body">
    <div id="code" class="code">
        <p class="desc">링크입력 상자에 삽입할 <span>YouTube</span> 영상의 주소를 입력하세요.</p>
        <p class="desc">
            <label>링크입력 </label>
            <input type="text" name="url" style="width:320px;"/>
        </p>
    </div>
</div>
<div class="footer">
    <p><a href="#" onclick="closeWindow();" title="닫기" class="close">닫기</a></p>
    <ul>
        <li class="submit"><a href="#" onclick="done();" title="등록" class="btnlink">등록</a> </li>
    </ul>
</div>
</div>
</body>
</html>




08. 이제 다시 브라우저에서 에디터를 오픈하고 YouTube 동영상을 Daum Open Editor에 삽입해보자.







반응형

'API > DAUM 오픈 에디터' 카테고리의 다른 글

[Editor] Daum Open Editor 세팅하고 사용하기  (0) 2018.03.26
//

[Editor] Daum Open Editor 세팅하고 사용하기[Editor] Daum Open Editor 세팅하고 사용하기

Posted at 2018. 3. 26. 13:07 | Posted in API/DAUM 오픈 에디터
반응형




첨부파일 : editor.zip




■ 다음 오픈 에디터 세팅하고 사용하기




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 파일을 수정한다.




11. 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/blog/2064CD374EE1ACCB0F" class="tx-daum-image" style="clear:none;float:none;"/>

    </p>

    <p>

        <a href="https://t1.daumcdn.net/cfile/blog/207C8C1B4AA4F5DC01"><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/blog/2064CD374EE1ACCB0F"

                , "filename" : "github.gif"

                , "filesize" : 59501

                , "originalurl" : "https://t1.daumcdn.net/cfile/blog/2064CD374EE1ACCB0F"

                , "thumburl" : "https://t1.daumcdn.net/cfile/blog/2064CD374EE1ACCB0F"

            }

        });

        attachments['file'] = [];

        attachments['file'].push({

              "attacher" : "file"

            , "data" : {

                  "attachurl" : "https://t1.daumcdn.net/cfile/blog/207C8C1B4AA4F5DC01"

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




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

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




13. 아래와같이 결과가 잘 전송되어 출려되는 모습을 확인 할 수 있다.





반응형
//