작업실
그누보드 분류

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

컨텐츠 정보

본문

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개 / 2페이지

우성군님의 댓글의 댓글

짧은 주소는 그냥

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

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

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

이렇기 때문에

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

위와 같이 해준거거든요.

해적님의 댓글

흐음....<script src="../js/clipboard.min.js"></script> 경로가 잘못되었을까요..
으음..주소가 복사가 안되네욤...크흑..
Total 157 / 5 Page
RSS
우분투에서 구글 SMTP 메일서버 설치 후 에러 해결 방법입니다.

1. 구글 아이디와 비번을 제대로 넣었는데 계정 인증이 안되어 메일 발송이 안될 경우https://webdir.tistory.com/227위 링…

배경화면에 눈 내리게 만들기

위 스샷처럼 배경에 눈 내리게 만드는 방법입니다.http://amina.co.kr/bbs/board.php?bo_table=tip&wr_…

미소 베이직 4.3 main side 예제파일 공유합니다. 댓글 6

2016년 12월 2일 현재 미소 베이직 4.3 기준 제 홈페이지 예제코드입니다.메인과 사이드, PC와 모바일을 구분하였습니다.1. PC 메인2…

드래그 텍스트 선택 색상 변경하기

위 스샷과 같이 드래그 했을 때 색상을 바꾸는 방법입니다.사실 저는 기본 드래그 색상과 큰 차이는 없는데요. 아무래도 파비콘의 색상과 맞추려고 …

그누보드5에 Github 아이디로 로그인 추가하기

1. Github개발자 분들이라면 거의다 아시는 바로 깃허브입니다.그 계정으로도 소셜 로그인이 가능합니다.링크1에 있는 소셜로그인 플러그인에 추…

미소 베이직 4.0 테마 사이드바 아이콘 색깔 변경하기

1. 메인화면에 떠있는 아이콘 배경색 지정하기/thema/Miso-Basic-4/widget/miso-sidebar/widget.php대략 18…

최근글


새댓글


알림 0