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

티스토리툴바