작업실

그누보드5 주소복사 버튼 설치하기

우성군 20 2740 2

1. JS 파일 다운받기

 

https://github.com/zenorocha/clipboard.js/tree/master/dist

 

위 링크 또는 (https://github.com/zenorocha/clipboard.js/archive/master.zip)  이 파일에서

 

clipboard.min.js 파일을 다운받습니다.

 

그리고 적절한 폴더에 올립니다. 예를들어 /js 폴더에 올립니다.

 

 

2. 게시판 뷰스킨에 해당내용 추가하기

 

저는 Basic-Board를 사용 중이라서 해당 스킨에 적용하는 방법을 적어보겠습니다.

 

/skin/board/Basic-Board/view/basic/view.skin.php 

 

에 들어가서 최상단에 밑의 내용을 넣습니다.

 

 

<!--클립보드 JS 및 스타일 설정 시작-->

<script src="../js/clipboard.min.js"></script>

    <script> 

    var clipboard = new Clipboard('.btn-clipboard', {

        text: function() {

            return 'http://<?php echo $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>';

        }

    });

 

    clipboard.on('success', function(e) {

        console.log(e);

    });

 

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

 

<style>

button.btn-clipboard {display:inline-block;margin:0;padding:7px;line-height:12px;border:1px solid #ccc;background:#FFFFFF;color:#000;text-decoration:none}

button.btn-clipboard:focus, button.btn-clipboard:hover {color:#FF0000;}

</style>

<!--클립보드 JS 및 스타일 설정 끝-->

스타일은 원하시는대로 넣으시면 됩니다. 그냥 예시로 넣었으니 참고하시구요.

 

js 파일 위치 확인하시고요.

 

 

참고로 짧은 주소 사용하시는 분은 주소 부분에

 

return '<?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?>'; 

 

위와 같이 넣으면 됩니다.

 

 

3. 주소복사 버튼 설치하기

 

이제 주소복사 버튼을 넣는 방법입니다. 실제로 원하는 위치에 넣으면 됩니다.

 

저는 스크랩 신고 버튼 왼쪽에 넣어줬습니다. 부트스트랩 코드가 들어가서 부트스트랩 쓰시는 분들은 편하게 쓰실 수 있을겁니다.

 

<?php if(G5_IS_MOBILE) {?>
<button class="btn-clipboard cursor at-tip" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-original-title="주소가 복사되었습니다.">주소복사</button>
<?php } ?>
<?php if(!G5_IS_MOBILE) {?>
<button class="btn-clipboard cursor at-tip" data-toggle="tooltip" data-trigger="click focus" data-placement="top" data-original-title="주소가 복사되었습니다.">주소복사</button>
<?php } ?>

 

위 내용만 넣으면 끝입니다. 이미지를 넣어도 되고요. 전 글자가 제일 무난한 것 같아서 글자를 넣었습니다.

 

내용을 살펴보면 모바일과 PC의 툴팁관련 코드가 다릅니다. 이건 한번 테스트 해보시면 될 듯 하네요.

 

 

 

4. 현재 홈페이지 적용 사항

 

뷰스킨 파일에서

 

최상단에

 

<!--클립보드 JS 및 스타일 설정 시작-->
<script src="../js/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btn-clipboard-subject', {
        text: function() {
            return '<?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?>';
        }
    });
 
    clipboard.on('success', function(e) {
        console.log(e);
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
<style>
button.btn-clipboard-subject {display:inline-block;margin:0;padding:5px 7px;line-height:12px;border:0px solid #ccc;background:#FFFFFF;color:#555;text-decoration:none}
button.btn-clipboard-subject:focus, button.btn-clipboard-subject:hover {color:#000}
</style>
<!--클립보드 JS 및 스타일 설정 끝-->

 

위 코드를 넣어서 자바스크립트와 스타일을 잡아줬구요.

 

<?php
if($attach_list) {
echo '<div class="list-group'.$view_font.'">'.$attach_list.'</div>'.PHP_EOL;
}
?>

 

위 내용 바로 위에

 

<?php if(G5_IS_MOBILE) {?>
<div class="list-group-item break-word" style="padding:5px 8px; border-width:0px 0px 1px 0px;">
<button class="btn-clipboard-subject cursor at-tip" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-original-title="주소가 복사되었습니다."><i class="fa fa-share-alt"></i> 주소복사 : <?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?></button></div>
<?php } ?>
<?php if(!G5_IS_MOBILE) {?>
<div class="list-group-item break-word" style="padding:5px 8px; border-width:0px 0px 1px 0px;">
<button class="btn-clipboard-subject cursor at-tip" data-toggle="tooltip" data-trigger="click focus" data-placement="right" data-original-title="주소가 복사되었습니다."><i class="fa fa-share-alt"></i> 주소복사 : <?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?></button></div>
<?php } ?>

 

위 내용을 넣어서 클립보드 위치를 상단에 위치시켰습니다.

 

 

모바일에서도 잘 되고 PC에서도 당연히 잘 되고요.

 

이상 소스를 제공해주신 사과님과 Tail 님에게 감사의 인사 드립니다.

, , , , , ,

20 Comments
아브딜론 2016.10.09 21:39  
[@우성군] 뭐가 잘못되었는지 잘안되네요.
다음에 다시 한번 해봐야겠네요.
답변 감사드립니다.^^
우성군 2016.10.09 21:44  
[@아브딜론] 넵 실제위치에 실제표시될 URL 부분만 교체해주면 됩니다.
아브딜론 2016.10.11 21:05  
성공했습니다. 짧은 주소는 그누사이트에 있는 방법에 우성군님의 주소복사 글을 설치하니 되네요.^^
우성군 2016.10.11 22:02  
[@아브딜론] 와우 다행이네요! 축하합니다.
가온누리 2016.11.15 21:36  
짧은주소는 어떤거 받아야지 되나요??
우성군 2016.11.15 22:02  
[@가온누리] 짧은 주소는 그냥

return 'http://<?php echo $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>';

위에 있는 내용 넣어주시면 될거예요.

저는 짧은 주소 형태가 /게시판이름/번호

이렇기 때문에

return '<?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?>';

위와 같이 해준거거든요.
해적 04.02 20:54  
다하긴햇는데....클릭시 복사가 안되는 문제때문에 현시점 해매고있습니다..ㅎㅎ;;; 크흑...
해적 04.02 21:05  
흐음....<script src="../js/clipboard.min.js"></script> 경로가 잘못되었을까요..
으음..주소가 복사가 안되네욤...크흑..
우성군 04.05 23:14  
[@해적] 흑.. 왜그럴까요 ㅠㅠ
해적 04.05 23:54  
[@우성군] 여..연구중입니다..흑흑...^^