[Kakao] Kakao 계정으로 Login 하기[Kakao] Kakao 계정으로 Login 하기

Posted at 2020. 1. 31. 11:16 | Posted in API/Kakao




■ 카카오 계정으로 로그인 하기




# 소스코드

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=ege"/>

<meta nmae="viewport" content="user-scalable=no,inital-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,width=device-width">

<title>:: Custom Login Demo - Kakao JavaScript SDK ::</title>

<script type="text/javascript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @details 카카오톡 Developer API 사이트에서 발급받은 JavaScript Key

        Kakao.init( "발급받은 JavaScript Key" );


        // @breif 카카오 로그인 버튼을 생성합니다.

        Kakao.Auth.createLoginButton({

              container : "#kakao-login-btn"

            , success : function( authObj ) {


                // console.log( authObj );


                Kakao.API.request({

                      url : "/v1/user/me"

                    , success : function( res ) {


                        // console.log( res );


                        // @breif 아이디

                        document.getElementById( "kakaoIdentity" ).innerHTML = res.id;


                        // @breif 닉네임

                        document.getElementById( "kakaoNickName" ).innerHTML = res.properties.nickname;


                        // @breif 프로필 이미지

                        document.getElementById( "kakaoProfileImg" ).src = res.properties.profile_image;


                        // @breif 썸네일 이미지

                        document.getElementById( "kakaoThumbnailImg" ).src = res.properties.thumbnail_image;


                    }, fail : function( error ) {

                        alert( JSON.stringify( error ) );

                    }

                });

            }

            , fail : function( error ) {

                alert( JSON.stringify( error ));

            }

        });

    });

</script>

</head>

<body>

    <div>카카오 아이디 : <span id="kakaoIdentity"></span></div>

    <div>닉네임 : <span id="kakaoNickName"></span></div>

    <div>프로필 이미지 : <img id="kakaoProfileImg" src=""/></div>

    <div>썸네일 이미지 : <img id="kakaoThumbnailImg" src=""/></div>

    <br/>

    <a id="kakao-login-btn"></a>

</body>

</html> 




# 출력결과







저작자표시

'API > Kakao' 카테고리의 다른 글

[Kakao] Kakao 계정으로 Login 하기  (0) 2020.01.31
[Kakao] KakaoTalk으로 링크 공유하기 API  (0) 2018.08.31
댓글 (0) // 엮인글 (0)

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[API] Bittly API v4 연동, 단축 URL 생성하기 - PHP[API] Bittly API v4 연동, 단축 URL 생성하기 - PHP

Posted at 2019. 12. 23. 19:34 | Posted in API/Bitly




참고 : https://stackoverflow.com/questions/55681871/how-to-shorten-url-using-php-bitly-v4?answertab=active#tab-top





■ Bittly API v4 토큰 발급받기




① 먼저 Bittly 계정이 필요하다.

    가지고 있는 Bittly계정이 존재하지 않다면 https://bitly.com/a/sign_up 페이지에 접속하여 계정을 생성한다.






② 가입된 계정이 준비되었다면 https://app.bitly.com/ 페이지에 접근한다.(로그인 되어 있지 않은 상태로 접근 불가)

    자신의 계정정보가 노출되는 페이지에 접속 했다면 상단 우측의 메뉴 항목을 클릭한다.






③  자신의 계정을 클릭한다.






④ Generic Access Token 카테고리를 클릭한다.






⑤ 패스워드를 입력하고 클릭하면 화면 하단에 GENERATE TOKEN 버튼이 나타난다.

     GENERATE TOKEN 버튼을 클릭한다.





⑥ 토큰이 발급된 것을 확인 할 수 있다.









■ Bittly API v4 연동하여 짧은 URL 생성하기





PHP에서 Bittly API와 연동하여 짧은 URL을 생성해 보도록 하겠다.


PHP의 cURL을 사용하였다.




# 소스코드

<?php


/// @brief URI 값 생성

$getUri = "num=1&lang=ko";


/// @brief 접근할 URL 주소 생성

$longUrl = "http://도메인주소?".$getUri;


/// @brief  생성한 URL을 $data['long_url']에 담고 JSON 형태로 변환한다.

$data['long_url'] = $longUrl;

$payload = json_encode($data);


/// @brief BITLY API 접근 URL

$bitApi = "https://api-ssl.bitly.com/v4/bitlinks";


/// @brief 발급받은 BITLY API 토큰

$bitToken = "발급받은 API 토큰 값";


/// @brief CURL 사용

$cURL = curl_init();

curl_setopt($cURL, CURLOPT_URL, $bitApi);

curl_setopt($cURL, CURLOPT_CUSTOMREQUEST, "POST");

curl_setopt($cURL, CURLOPT_POSTFIELDS, $payload);

curl_setopt($cURL, CURLOPT_RETURNTRANSFER, TRUE);

curl_setopt($cURL, CURLOPT_HTTPHEADER, array(

  "Authorization:Bearer ".$bitToken         // Bearer { $token } (공백필수)

, "Content-Type:application/json"

, "Content-Length:".strlen($payload)

)

);


/// @brief 결과값 조회

$result = json_decode(curl_exec($cURL), TRUE);


echo "<pre>";

print_r($result);

echo "</pre>";


/// @brief 출력결과

if(isset($result['link']) == 1) {

echo $result['link'];

}

?> 




# 출력결과







저작자표시

'API > Bitly' 카테고리의 다른 글

[API] Bittly API v4 연동, 단축 URL 생성하기 - PHP  (0) 2019.12.23
모듈
댓글 (0) // 엮인글 (0)

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[API] 주소 검색 - 행정안전부 API 사용하기[API] 주소 검색 - 행정안전부 API 사용하기

Posted at 2019. 11. 20. 10:34 | Posted in API/우편번호




참고 : https://www.juso.go.kr/addrlink/devAddrLinkRequestGuide.do?menu=roadApi





■ 주소 검색 API(한국지역정보개발원) 발급받기

 



API를 발급받기 위해서는 https://www.juso.go.kr/addrlink/devAddrLinkRequestWrite.do?returnFn=write&cntcMenu=URL 페이지에 접속한다.






오픈 API 신청 페이지에 접속하면


위와같이 사용할 항목을 선택하고.


신청하기 버튼을 클릭한다.







API를 사용하기 위해서는 본인인증 과정이 필요하다.

(개발용 7일 - 본인 미인증도 가능)







본인 인증 절차가 마무리 되면 위와 같이 API 키가 생성된 것을 확인 할 수 있다.












■ 주소 검색 API(JavaScript, jQuery) - 샘플코드




한국지역정보개발원에서 제공하는 도로명주소 API는 JSON 형태로 데이터를 제공해 준다.


제공하는 예제소스에서는 PHP, JSP, ASP등의 샘플과 팝업창에 띄워서 사용할 수 있는 방법을 제공하지만.


필요한 JSON으로 데이터를 받을 수 있도록,


JavaScript와, jQuery Ajax를 통해 구현 할 수 있게끔 변경을 해 보았다.



# 소스코드

<!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>:: JUSO GO API ::</title>

<style type="text/css">

table { width:100%;border:1px solid #444444;border-collapse:collapse; }

th, td { border: 1px solid #444444; }

tr > td:first-child { text-align:center; }

div#wrap { display:none;border:1px solid #DDDDDD;width:500px;margin-top:5px;padding:5px; }

div#wrap > div { margin-top:10px;margin-left::5px;margin-right:5px;margin-bottom::5px; }

div#wrap a:link { color:#000000;text-decoration:none; }

div#wrap a:hover { color:#0000FF;text-decoration:underline; }

div#totoalOutcome { display:none; }

#closeBtn { float:right;margin-top:-5px;margin-right:-5px; }

#searchAddr { width:380px; }

#zipCode { text-align:center; }

#address, #detail { width:500px; }

</style>

<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script language="javascript">


/// @brief 주소검색창 - 키보드 Enter키 입력

function enterSearch() {

var evt_code = (window.netscape) ? event.which : event.keyCode;

if (evt_code == 13) {

event.keyCode = 0;

getAddr();

}

}


/// @brief 주소검색창 - 데이터 조회

function getAddr() {


// 적용예 (api 호출 전에 검색어 체크)

let keyword = document.getElementById("searchAddr");

if(!checkSearchedWord(keyword)) {

return;

}


jQuery.ajax({

  url : "http://www.juso.go.kr/addrlink/addrLinkApiJsonp.do"

, type : "POST"

, data : {

  confmKey : "발급받은 도로명 주소 API KEY"

, currentPage : document.getElementById("currentPage").value

, countPerPage : document.getElementById("countPerPage").value

, keyword : keyword.value

, resultType : "json"

}

, dataType : "jsonp"

, crossDomain : true

, success : function(jsonStr) {


jQuery("#list").html("");

let errCode = jsonStr.results.common.errorCode;

let errDesc = jsonStr.results.common.errorMessage;


if(errCode == "0") {

if(jsonStr != null) {

makeListJson(jsonStr);

}

} else {

alert(errDesc);

}

}

, error : function(xhr, status, error) {

alert("에러발생");

}

});

}


/// @brief 주소검색창 - 주소지 선택

function makeListJson(jsonStr) {


let htmlStr = "<thead><tr><th style='width:70px;'>우편번호</th><th>주소</th></tr></thead><tbody>";


if(jsonStr.results.common.totalCount > 0) {


jQuery("#totoalOutcome").css("display", "block");

jQuery("#totalCnt").html(jsonStr.results.common.totalCount);


jQuery(jsonStr.results.juso).each(function() {


let zipNo = this.zipNo;                  // 우편번호

let roadAddr = this.roadAddr;        // 도로명 주소

let jibunAddr = this.jibunAddr;       // 지번 주소


htmlStr += "<tr>";

htmlStr += "<td>";

htmlStr += "<a href='javascript:;' onClick='inputTextAddress(\""+zipNo+"\", \""+roadAddr+"\");'>";

htmlStr += zipNo;

htmlStr += "</a>";

htmlStr += "</td>";

htmlStr += "<td>";

htmlStr += "<a href='javascript:;' onClick='inputTextAddress(\""+zipNo+"\", \""+roadAddr+"\");'>";

htmlStr += "도로명 : " + roadAddr;

htmlStr += "</a>";

htmlStr += "<br/>";

htmlStr += "<a href='javascript:;' onClick='inputTextAddress(\""+zipNo+"\", \""+jibunAddr+"\");'>";

htmlStr += "지번 : " + jibunAddr;

htmlStr += "</a>";

htmlStr += "</td>";

htmlStr += "</tr>";

});


pageMake(jsonStr);


} else {

htmlStr += "<tr><td colspan='2'>조회된 데이터가 않습니다.<br/>다시 검색하여 주시기 바랍니다.</td></tr>";

}


htmlStr += "</tbody>";

jQuery("#list").html(htmlStr);

}


/// @brief 주소검색창 - 주소지 삽입

function inputTextAddress(zipcode, address) {

document.getElementById("zipCode").value = zipCode;

document.getElementById("address").value = address;

}


/// @brief 주소검색창 - 열기

function addressWindowOpen() {

jQuery("#wrap").slideDown();

jQuery("#searchAddr").focus();

}


/// @brief 주소검색창 - 닫기

function addressWindowClose() {

jQuery("#wrap").slideUp();

jQuery("#searchAddr").val("");

jQuery("#totoalOutcome").css("display", "none");

jQuery("#list").empty();

jQuery("#pagingList").empty();

jQuery("#currentPage").val("1");

}


/// @brief 주소검색창 - 특수문자 제거

function checkSearchedWord(obj) {


if(obj.value.length > 0) {


// 특수문자 제거

var expText = /[%=><]/;


if(expText.test(obj.value) == true) {

alert("특수문자를 입력 할수 없습니다.") ;

obj.value = obj.value.split(expText).join("");

return false;

}


// 특정문자열(sql예약어의 앞뒤공백포함) 제거

var sqlArray = new Array(

  "OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE"

  , "DROP", "EXEC", "UNION",  "FETCH", "DECLARE", "TRUNCATE"

);

// sql 예약어


var regex = "";

for(var num = 0; num < sqlArray.length; num++) {


regex = new RegExp(sqlArray[num], "gi") ;


if(regex.test(obj.value)) {

alert("\"" + sqlArray[num]+"\"와(과) 같은 특정문자로 검색할 수 없습니다.");

obj.value = obj.value.replace(regex, "");

return false;

}

}

}

return true ;

}


/// @brief 주소검색창 - 페이징 생성

function pageMake(jsonStr) {


var total = jsonStr.results.common.totalCount; // 총건수

var pageNum = document.getElementById("currentPage").value; // 현재페이지

                var pageBlock = Number(document.getElementById("countPerPage").value); // 페이지당 출력 개수

var paggingStr = "";


// 검색 갯수가 페이지당 출력갯수보다 작으면 페이징을 나타내지 않는다.

if(total > pageBlock) {


var totalPages = Math.floor((total - 1) / pageNum) + 1;

var firstPage = Math.floor((pageNum - 1) / pageBlock) * pageBlock + 1;


if(firstPage <= 0) { firstPage = 1; };


var lastPage = (firstPage - 1) + pageBlock;


if(lastPage > totalPages) { lastPage = totalPages; };

var nextPage = lastPage + 1;

var prePage = firstPage - pageBlock;


if(firstPage > pageBlock) {

paggingStr += "<a href='javascript:;' onClick='goPage(" + prePage + ");'>◀</a>";

paggingStr += "&nbsp;";

}


for(let num = firstPage; lastPage >= num; num++) {

if(pageNum == num) {

paggingStr += "<a style='font-weight:bold;color:#0000FF;' href='javascript:;'>" + num + "</a>";

paggingStr += "&nbsp;";

} else {

paggingStr += "<a href='javascript:;' onClick='goPage(" + num + ");'>" + num + "</a>";

paggingStr += "&nbsp;";

}

}


if(lastPage < totalPages) {

paggingStr += "<a href='javascript:;' onClick='goPage(" + nextPage + ");'>▶</a>";

}

}


                jQuery("#pagingList").html(paggingStr);

}


/// @brief 페이징 이동

function goPage(pageNum) {

document.getElementById("currentPage").value = pageNum;

getAddr();

}

</script>

</head>

<body>

<h1>■ 행정안정부 - 주소 검색 API</h1>

<hr/>

현재 페이지 : <input type="number" id="currentPage" value="1" style="text-align:center;"/>

<div style="height:5px;"></div>

페이지당 출력 개수 : <input type="number" id="countPerPage" value="5" style="text-align:center;"/>

<hr/><br/>

<input type="text" id="zipCode" value="" onClick="addressWindowOpen();" placeholder="00000" readonly/>

<input type="button" onClick="addressWindowOpen();" value="우편번호 찾기"/>

<div id="wrap">

<img id="closeBtn" src="./close_box_red.png" onClick="addressWindowClose();"/>

<div>

<input type="text" id="searchAddr" value="" onkeydown="enterSearch();" placeholder="도로명주소, 건물명 또는 지번 입력"/>

<input type="button" onClick="getAddr();" value="주소검색"/>

</div>

<div>

<div id="totoalOutcome">

검색결과 : <span id="totalCnt">0</span>

</div>

<table id="list"></table>

</div>

<div id="pagingList" style='text-align:center;'></div>

</div>

<div style="height:5px;"></div>

<input type="text" id="address" value="" placeholder="도로명 주소, 지번 주소" readonly/>

<div style="height:5px;"></div>

<input type="text" id="detail" value="" placeholder="상세 주소지 입력"/>

</body>

</html>




# 출력결과





저작자표시

'API > 우편번호' 카테고리의 다른 글

[API] 주소 검색 - 행정안전부 API 사용하기  (0) 2019.11.20
[API] 다음 - 우편번호 API 모바일에서 사용하기  (4) 2018.04.04
[API] 다음 - 우편번호 API 사용하기  (0) 2018.03.13
우편번호
댓글 (0) // 엮인글 (0)

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Kakao] KakaoTalk으로 링크 공유하기 API[Kakao] KakaoTalk으로 링크 공유하기 API

Posted at 2018. 8. 31. 01:17 | Posted in API/Kakao



■ 카카오 디벨로퍼 애플리케이션 생성



01. 카카오 디벨로퍼(https://developers.kakao.com/) 사이트에 접속한다.
     카카오 디벨로퍼에 가입하지 않은 사람이라면 우선 여기서 가입을 하고 다음 작업을 진행한다.






02. 이제 내 애플리케이션(https://developers.kakao.com/apps) 페이지로 이동해서 앱 만들기 버튼을 클릭해 주자.





03. 제작할 앱의 아이콘과 이름을 작성하고, 앱 만들기 버튼을 클릭하면 앱이 생성된다.





04. 앱이 다 만들어지면 자바스크립트 키를 발급받게 되는데 이 키를 잘 기억해 두자.




05. 마지막으로 생성한 애플리케이션에 사이트 도메인을 입력한다.
① 위에서 생성한 애플리케이션을 선택한다.
② 좌측 카테고리의 설정 → 일반을 선택한다.
③ 사이트 도메인부분에 사용할 사이트 도메인을 입력한다.
    (해당 포스팅은 http://localhost 를 사용하였다.)
④ 저장 버튼을 눌러 설정을 저장하면 사용할 준비가 완료되었다.









■ 카카오 톡 공유 템플릿 제작하기



#01. 카카오톡 피드 템플릿 제작



# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 카카오톡 공유하기 ::</title>
<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
    function shareKakaotalk() {
        Kakao.init("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");      // 사용할 앱의 JavaScript 키를 설정
        Kakao.Link.sendDefault({
              objectType:"feed"
            , content : {
                  title:"WARCRAFT3 THE REIGN OF CHAOS"   // 콘텐츠의 타이틀
                , description:"너흰아직 준비가 안되었다!"   // 콘텐츠 상세설명
                , imageUrl:"illidan_stormrage.jpg"   // 썸네일 이미지
                , link : {
                      mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                    , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                }
            }
            , social : {
                  likeCount:0       // LIKE 개수
                , commentCount:0    // 댓글 개수
                , sharedCount:0     // 공유 회수
            }
            , buttons : [
                {
                      title:"게시글 확인"    // 버튼 제목
                    , link : {
                        mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                      , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                    }
                }
            ]
        });
    }
</script>
</head>
<body>
    <h1>카카오톡 공유하기</h1>
    <input type="button" onClick="shareKakaotalk();" value="KAKOA Talk으로 공유하기"/>
</body>
</html>



# 출력결과





#02. 카카오톡 위치 템플릿 제작


# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 카카오톡 공유하기 ::</title>
<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
    function shareKakaotalk() {
        Kakao.init("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");      // 사용할 앱의 JavaScript 키를 설정
        Kakao.Link.sendDefault({
              objectType:"location"
            , address:"노스렌드"    // 공유할 위치의 주소
            , addressTitle:"얼음왕관의 성채"   // 카카오톡 내의 지도 뷰에서 사용되는 타이틀
            , content: {
                  title:"WARCRAFT3 THE FROZEN THRONE"   // 콘텐츠의 타이틀
                , description:"왕위를 계승하는 중입니다. 아버지"  // 콘텐츠 상세설명
                , imageUrl:"arthas_menethil.jpg"    // 썸네일 이미지
                , link: {
                      mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                    , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                }
            }
            , social: {
                  likeCount:0       // LIKE 개수
                , commentCount:0    // 댓글 개수
                , sharedCount:0     // 공유 회수
            }
            , buttons: [
                {
                      title:"버튼 제목" // 버튼 제목
                    , link: {
                          mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                        , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                    }
                }
            ]
        });
    }
</script>
</head>
<body>
    <h1>카카오톡 공유하기</h1>
    <input type="button" onClick="shareKakaotalk();" value="KAKOA Talk으로 공유하기"/>
</body>
</html>




# 출력결과






저작자표시

'API > Kakao' 카테고리의 다른 글

[Kakao] Kakao 계정으로 Login 하기  (0) 2020.01.31
[Kakao] KakaoTalk으로 링크 공유하기 API  (0) 2018.08.31
모바일, 카카오
댓글 (0) // 엮인글 (0)

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Telegram] Telegram Bot을 사용하여 메세지 전송하기[Telegram] Telegram Bot을 사용하여 메세지 전송하기

Posted at 2018. 8. 29. 05:30 | Posted in API/Telegram






■ 텔레그램 봇을 사용하여 메세지 전송하기




#01. BotFather를 통한 메세지 봇 생성하기



텔레그램의 봇은 @BotFather를 통해 관리된다.


텔레그램 응용프로그램을 실행한뒤 아래 이미지와 같은 순서대로 작업을 진행한다.



01. 메시지 봇 생성하기




 ① 텔레그램 검색창에 BotFather 라고 입력한다.

 ② 검색결과에서 BotFather를 선택하고 대화를 시작한다.

 ③ /start라고 입력한다.

 ④ /newbot이라고 입력하여 새로운 봇을 생성할 준비를 한다.

 ⑤ 자신이 사용할 봇의 아이디를 입력한다.(예 : wicked_test)

 ⑥ 생성한 봇 아이디에 _bot 이라고 추가적으로 입력해 준다.(예 : wicked_test_bot)
 ⑦ 텔레그램의 답변문구의 토큰 API키 값을 확인한다.




02. 정상적으로 메시지 봇이  생성되었다면 텔레그램 API에 getUpdate 값을 웹 브라우저로 전달하여 생성이 잘 되었는지를 확인해보자.


# 예시

 https://api.telegram.org/bot + 토큰 API 키값 + /getUpdates


# 출력결과

 https://api.telegram.org/bot682811095:AAEfPFpuEOrq5uCk7KK6aP8BLlX-fpHov8k/getUpdates










#02. Chart ID 확인하기


01. 먼저 메시지를 전달받을 텔레그램 계정으로 로그인한 텔레그램 채팅창에서 위에서 제작한 봇을 검색한다.

 ① 검색창에서 제작한 텔레그램 봇의 아이디 값을 입력한다.(예 : wicked_test)

 ② 검색결과에 제작한 봇 아이디가 나온다면 선택해준다.

 ③ 대화를 시작한다.






02. 대화가 시작되면 위와같이 /start 라고 자동으로 입력되는것을 확인 할 수 있다.






03. 이제 다시 위에서 실행한 웹 브라우저를 새로고침 하여 다시 getUpdates 를 전달해보면 입력한 값이 잘 출력되는 것을 확인 할 수 있다.










#03. 사용자에게 메세지 전송하기



01. 웹 브라우저를 실행해서 아래와 같이 코드를 작성하 메시지를 보내보도록 하자.


# 예시

 https://api.telegram.org/bot + 토큰 API 키값 + /sendmessage?chat_id= + 사용자차트ID + &text= + 전송할 메세지


# 출력결과

 https://api.telegram.org/bot682811095:AAEfPFpuEOrq5uCk7KK6aP8BLlX-fpHov8k/sendmessage?chat_id=39538219&text=Message





02. 실제 텔레그램 상에서도 작성한 메세지 내용이 정상적으로 출력되는 것을 확인 할 수 있다.








저작자표시

'API > Telegram' 카테고리의 다른 글

[Telegram] Telegram Bot을 사용하여 메세지 전송하기  (0) 2018.08.29
API, 모바일
댓글 (0) // 엮인글 (0)

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Editer] NAVER 스마트 에디터 세팅[Editer] NAVER 스마트 에디터 세팅

Posted at 2018. 4. 20. 17:40 | Posted in API/NAVER 스마트 에디터




※ 참고 : 이 포스팅은 SmartEditor Basic을 기준으로 작성되었습니다.




■ 네이버 스마트 에디터 세팅하고 사용하기




01. https://github.com/naver/smarteditor2 사이트에 접속하여 smarteditor2-master.zip 파일을 다운로드 받는다.





02. 다운받은 smarteditor2-master.zip 파일의 압축을 해제한뒤 파일명을 smarteditor로 변경하였다.





03. 생성된 smarteditor 프로젝트에서 board.php 파일을 생성한다.





04. 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>Naver :: Smart Editor 2</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function submitContents(elClickedObj) {

    // 에디터의 내용이 textarea에 적용됩니다.
    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);
   
    // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
    try {

        elClickedObj.form.submit();


    } catch(e) { }
}
</script>
</head>
<body>
<form action="view.php" method="post" 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("./workspace/SmartEditor2.html");      // 스마트 에디터를 include 한다.
?>
<div style="height:20px;"></div>
<div align="center">
    <input type="button" value="등록" onClick="submitContents(this);"/>
</div>
</div>
</form>
</body>
</html>




05. 다음으로 workspace폴더로 이동하여  include를 사용하여 가져올 SmartEditor2.html 파일을 수정해야 한다.




06. SmartEditor2.html 파일의 수정사항은 아래와 같다.

 ① 파란색으로 강조되어 있는 부분은 수정한 내용이다.

 ② 빨간색으로 강조되어 있는 부분은 삭제해도 된다.

 SmartEditor2.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" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>네이버 :: Smart Editor 2 &#8482;</title>

<!-- 인클루드를 할 것이기 때문에 HuskyEZCreator.js의 연결경로를 절대경로로 변경한다. -->

<script type="text/javascript" src="http://localhost/smarteditor/workspace/js/service/HuskyEZCreator.js" charset="utf-8"></script>
</head>
<body>
<!--form action="sample/viewer/index.php" method="post"-->
    <textarea name="ir1" id="ir1" rows="10" cols="100" style="width:766px;height:412px;display:none;"></textarea>
    <!--textarea name="ir1" id="ir1" rows="10" cols="100" style="width:100%; height:412px; min-width:610px; display:none;"></textarea-->
    <!--p>
        <input type="button" onclick="pasteHTML();" value="본문에 내용 넣기" />
        <input type="button" onclick="showHTML();" value="본문 내용 가져오기" />
        <input type="button" onclick="submitContents(this);" value="서버로 내용 전송" />
        <input type="button" onclick="setDefaultFont();" value="기본 폰트 지정하기 (궁서_24)" />
    </p-->
<!--/form-->

<script type="text/javascript">
var oEditors = [];

var sLang = "ko_KR";    // 언어 (ko_KR/ en_US/ ja_JP/ zh_CN/ zh_TW), default = ko_KR

// 추가 글꼴 목록
//var aAdditionalFontSet = [["MS UI Gothic", "MS UI Gothic"], ["Comic Sans MS", "Comic Sans MS"],["TEST","TEST"]];

nhn.husky.EZCreator.createInIFrame({
      oAppRef : oEditors
    , elPlaceHolder : "ir1"

    // 인클루드를 할 것이기 때문에 SmartEditor2Skin.html의 연결경로를 절대경로로 변경한다.

    , sSkinURI : "http://localhost/smarteditor/workspace/SmartEditor2Skin.html"
    , htParams : {
          bUseToolbar : true                            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
        , bUseVerticalResizer : true                    // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
        , bUseModeChanger : true                    // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
        // , bSkipXssFilter : true                        // client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
        // , aAdditionalFontList : aAdditionalFontSet    // 추가 글꼴 목록
        , fOnBeforeUnload : function() {
            //alert("완료!");
        }

        , I18N_LOCALE : sLang
    } // boolean
    , fOnAppLoad : function(){
        //예제 코드
        //oEditors.getById["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
    }
    , fCreator : "createSEditor2"
});

/*
function pasteHTML() {
    var sHTML = "<span style='color:#FF0000;'>이미지도 같은 방식으로 삽입합니다.<\/span>";
    oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
}
*/

/*
function showHTML() {
    var sHTML = oEditors.getById["ir1"].getIR();
    alert(sHTML);
}
*/

/*
function submitContents(elClickedObj) {
    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);    // 에디터의 내용이 textarea에 적용됩니다.
   
    // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
   
    try {
        elClickedObj.form.submit();
    } catch(e) {}
}
*/

/*
function setDefaultFont() {
    var sDefaultFont = "궁서";
    var nFontSize = 24;
    oEditors.getById["ir1"].setDefaultFont(sDefaultFont, nFontSize);
}
*/
</script>

</body>
</html>




07. 다음으로 스마트 에디터의 스킨내용이 담겨있는 SmartEditor2Skin.html 파일을 수정한다.




08. SmartEditor2Skin.html 에서 수정할 내용은 화면에 띄워지는 스마트 에디터의 버전 정보를 삭제하는 것 뿐이다.

 SmartEditor2Skin.html


      ~ 기타 코드 생략 ~


<!--Remove End-->
</head>
<body>


<!-- 화면에 버전 정보가 표시되는것을 지운다. -->

<!--span id="rev">Version: 2.9.0.4a256db</span-->

<!-- SE2 Markup Start -->   
<div id="smart_editor2">
    <div id="smart_editor2_content"><a href="#se2_iframe" class="blind">글쓰기영역으로 바로가기</a>


      ~ 기타 코드 생략 ~




09. 마지막으로 smarteditor 폴더로 돌아와서 view.php 파일을 생성한다.




10. view.php 파일의 내용은 아래와 같다.

 view.php

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




11. 이제 board.php 파일을 열고 정상적으로 작동되는지 테스트 해보자.





12. 그럼 아래와 같이 view.php에 작성내용이 정상적으로 나타나면서 작업이 완료 되었다.






저작자표시

'API > NAVER 스마트 에디터' 카테고리의 다른 글

[Editer] NAVER 스마트 에디터 세팅  (0) 2018.04.20
에디터
댓글 (0) // 엮인글 (0)

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[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.04.20
[Editor] Daum Open Editor 세팅하고 사용하기  (0) 2018.03.26
라이브러리, 에디터
댓글 (0) // 엮인글 (0)

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[API] 다음 - 우편번호 API 모바일에서 사용하기[API] 다음 - 우편번호 API 모바일에서 사용하기

Posted at 2018. 4. 4. 20:11 | Posted in API/우편번호




■ 다음 우편번호 - 팝업창 띄우지 않고 사용하기



-. 이전 포스팅에서 팝업창을 띄워서 사용하는 방법에 대한 포스팅을 작성하였는데. 이 방법만으로는 사용에 한계가 있었다.

 ① 모바일 환경에서의 사용을 고려한 반응형 웹에서 사용가능하도록 UI 변경

 ② 팝업창 사용을 막아둔 브라우저 환경 대응


-. postcode.v2.js 가 나오면서 좀더 다양하고 많은 기능을 사용할 수 있게 되었다.

-. 다음 우편번호 서비스의 "iframe을 이용하여 페이지에 끼워 넣기"를 바탕으로 작성하였다.



# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 다음 주소록 API ::</title>
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/JavaScript" src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script type="text/javascript">
    function openDaumZipAddress() {

        // 우편번호 찾기 화면을 넣을 element를 지정
        var element_wrap = document.getElementById("wrap");

        // wrap 레이어가 off된 상태라면 다음 우편번호 레이어를 open 한다.
        if(jQuery("#wrap").css("display") == "none") {
            new daum.Postcode({
                oncomplete:function(data) {
                    jQuery("#zonecode").val(data.zonecode);
                    jQuery("#address").val(data.address);
                    jQuery("#address_detail").focus();
                    console.log(data);
                }

                // 사용자가 값을 주소를 선택해서 레이어를 닫을 경우
                // 다음 주소록 레이어를 완전히 종료 시킨다.
                , onclose:function(state) {
                    if(state === "COMPLETE_CLOSE") {

                        // 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다.
                        offDaumZipAddress(function() {
                            element_wrap.style.display = "none";
                        });
                    }
                }
            }).embed(element_wrap);

            // 슬라이드 다운 기능을 이용해 레이어 창을 오픈한다.
            jQuery("#wrap").slideDown();
        }
        
        // warp 레이어가 open된 상태라면 다음 우편번호 레이어를 off 상태로 변경한다.
        else {

            // 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다.
            offDaumZipAddress(function() {
                element_wrap.style.display = "none";
                return false;
            });
        }
    }

    function offDaumZipAddress() {


        // 슬라이드 업 기능을 이용해 레이어 창을 닫는다.
        jQuery("#wrap").slideUp();

    }

</script>
</head>
<body>
    <input id="zonecode" type="text" value="" style="width:50px;" readOnly/>
    &nbsp;
    <input type="button" onClick="openDaumZipAddress();" value = "주소 찾기"/>

    <!-- 다음 우편번호 찾기 리스트를 띄울 영역을 지정 -->

    <div id="wrap" style="display:none;border:1px solid #DDDDDD;width:500px;margin-top:5px"></div>
    <div style="height:10px;"></div>
    <input type="text" id="address" value="" style="width:240px;" readOnly/>
    <input type="text" id="address_detail" value="" style="width:200px;"/>
</body>
</html>



※ 계속 값을 체크해 강제로 display:none 처리한 이유


기본적으로 위에서 설명한 다음 우편번호 서비스의

"iframe을 이용하여 페이지에 끼워 넣기"를 필자의 입맛에 맞게 수정한 내용이다.

이렇게 한 이유는 좀 자연스러운 애니메이션(슬라이드) 효과를 사용하고 싶어서 였다.


그래서 위 코드에서는 if(jQuery("#wrap").css("display") == "none") 으로 한번

onclose:function(state) 기능으로 또 한번

다음 주소록 레이어를 강제로 종료시키고 있는데.

이렇게 한 이유는 아래와 같다.


처음 제작 했을때는 slideUp과 slideDown 기능이 아니라 slideToggle만을 사용하여 편하게

display 설정 만을 변경해가며 사용했었다.

그런데 다음 주소록 레이어가 제대로 종료가 되지 않아서 발생을 하는지.

실제 사용중 종종 <div id="wrap"></div>를 지정한 영역에



# slideToggle 기능만을 사용한 결과물



위와 같이 실선이 생기는경우가 발견되었다.

그래서 위와같이 callback과 slideDown기능을 사용하여 레이어를 한번 닫고.

작업이 완료된 이후 한번더 다음 주소록 레이어를 완전히 숨기는 방식으로 변경하였다.



 


# 출력결과 - Computer Web




# 출력결과 - Mobile Web



위와같이 모바일에서의 사용에 문제가 없게끔 변경해 보았다.





저작자표시

'API > 우편번호' 카테고리의 다른 글

[API] 주소 검색 - 행정안전부 API 사용하기  (0) 2019.11.20
[API] 다음 - 우편번호 API 모바일에서 사용하기  (4) 2018.04.04
[API] 다음 - 우편번호 API 사용하기  (0) 2018.03.13
API, 다음, 모듈
댓글 (4) // 엮인글 (0)
  1. 동규
    2020.03.15 20:46 [Edit/Del] [Reply]
    모바일에서 사용하려면 웹사이트를 가지고 있어야 하나요?
    • BlogIcon 사악미소
      2020.03.16 09:07 신고 [Edit/Del]
      안녕하세요.
      저는 개인 테스트 서버를 가지고 있어서 진행했습니다만

      같은 WIFI 망에서라면 IP주소를 가지고 테스트가 가능 하실 겁니다만 이건 또 이것대로 좀 복잡할거라 생각이 드네요.

      추가로 이 코드는 다음 것을 그대로 쓰는지라
      http://magic.wickedmiso.com/185
      이 코드가 더 안정적이실것 같습니다.
  2. BlogIcon 마리
    2020.03.22 21:13 [Edit/Del] [Reply]
    해당 게시물 덕분에 워드프레스에서 주소창 검색 해결봤습니다.
    노하우 공유 감사드려요! :-)

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

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




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

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




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





저작자표시

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

[Editor] Daum Open Editor 커스텀 메뉴 버튼 제작  (0) 2018.04.20
[Editor] Daum Open Editor 세팅하고 사용하기  (0) 2018.03.26
세팅, 에디터
댓글 (0) // 엮인글 (0)

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[API] 다음 - 우편번호 API 사용하기[API] 다음 - 우편번호 API 사용하기

Posted at 2018. 3. 13. 13:46 | Posted in API/우편번호




■ DAUM - 우편번호 API



 · 다음 우편번호 서비스 API(http://postcode.map.daum.net/guide)는 스크립트 한번에 손쉽게 우편번호를 받아올 수 있어서 사용이 매우 간편하다.

 · http://dmaps.daum.net/map_js_init/postcode.v2.js 스크립트를 추가만 해주면 된다.




# 다음 에디터 데이터 정리

항목

값(예시)

설명

 postcode

 463-400

 구 우편번호 6자리

 postcode1

 463

 구 우편번호 앞 3자리

 postcode2

 400

 구 우편번호 뒤 3자리

 zonecode

 13494

 국가기초구역번호

 2015년 8월 1일부터 시행될 새 우편번호

 address

 경기 성남시 분당구 판교역로 235

 기본주소(검색결과에서 첫줄에 나오는 주소)

 addressEnglish

 235 Pangyoyeok-ro,

 Bundang-gu,

 Seongnam-si, Gyeonggi-do, korea

 기본 영문 주소

 addressType

 R/J

 검색된 기본 주소 타입 : R(도로명), J(지번)

 userSelectedType

 R/J

 검색 결과에서 사용자가 선택한 주소의 타입

 roadAddress

 경기 성남시 분당구 판교역로 235

 도로명 주소
 (모든 주소에 도로명 주소가 부여되어 있지는 않다.)

 roadAddressEnglish

 235, Pangyoyeok-ro, Bundang-gu,

 Seongnam-si, Gyeonggi-do, Korea

 영문 도로명 주소

 jibunAddress

 경기 성남시 분당구 삼평동 681

 지번 주소

 jibunAddressEnglish

 681, Sampyeong-dong,

 Bundang-gu,

 Seongnam-si, Gyeonggi-do, Korea

 영문 지번 주소

 autoRoadAddress

 경기 성남시 분당구 판교역로 235

 매핑된 도로명 주소가 여러개인 경우, 사용자가 '선택안함'을

 클릭했을 때 임의로 첫번째 매핑 주소를 넣어서 반환합니다.

 (autoMapping을 false로 설정한 경우에는 값이 채워지지 않습니다.)

 autoRoadAddressEnglish

 235, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea

 autoRoadAddress의 영문 도로명 주소

 autoJibunAddress

 경기 성남시 분당구 삼평동 681

 매핑된 지번 주소가 여러개인 경우, 사용자가 '선택안함'을

 클릭했을 때 임의로 첫번째 매핑 주소를 넣어서 반환합니다.

 (autoMapping을 false로 설정한 경우에는 값이 채워지지 않습니다.)

 autoJibunAddressEnglish

 681, Sampyeong-dong,

 Bundang-gu,

 Seongnam-si, Gyeonggi-do, Korea

 autoJibunAddress의 영문 지번 주소

 buildingCode

 4113510900106810000000001

 건물코드

 buildingName

 에이치스퀘어 엔동

 건물명

 postcodeSeq

 001

 우편번호 일련번호

 sido

 경기

 도 / 시 이름

 sigungu

 성남시 분당동

 시 / 군 / 수 이름

 bcode

 4113510900

 법정동 코드

 bname

 삼평동

 법정동 이름








■ 팝업창 띄워서 사용하기




# 소스코드

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>:: 다음 주소록 API ::</title>

<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>

<script type="text/JavaScript" src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>

<script type="text/javascript">

function openDaumZipAddress() {

new daum.Postcode({

oncomplete:function(data) {

jQuery("#postcode1").val(data.postcode1);

jQuery("#postcode2").val(data.postcode2);

jQuery("#zonecode").val(data.zonecode);

jQuery("#address").val(data.address);

jQuery("#address_etc").focus();

console.log(data);

}

}).open();

}

</script>

</head>

<body>

<input id="postcode1" type="text" value="" style="width:50px;" readonly/>

&nbsp;-&nbsp;

<input id="postcode2" type="text" value="" style="width:50px;" readonly/>

&nbsp;&nbsp;

<input id="zonecode" type="text" value="" style="width:50px;" readonly/>

&nbsp;

<input type="button" onClick="openDaumZipAddress();" value = "주소 찾기" />

<br/>

<input type="text" id="address" value="" style="width:240px;" readonly/>

<input type="text" id="address_etc" value="" style="width:200px;"/>

</body>

</html>




# 출력결과





☞ 다음 우편번호 API - 모바일에서 사용하기 로 이어집니다.




저작자표시

'API > 우편번호' 카테고리의 다른 글

[API] 주소 검색 - 행정안전부 API 사용하기  (0) 2019.11.20
[API] 다음 - 우편번호 API 모바일에서 사용하기  (4) 2018.04.04
[API] 다음 - 우편번호 API 사용하기  (0) 2018.03.13
API, 다음
댓글 (0) // 엮인글 (0)

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기