웹마스터 팁

  2. Support
  3. 웹마스터 팁

클립보드로 텍스트 복사하기

2007.11.24 22:07

베니

블로그에 올린 글을 옮깁니다. 그런 관계로 경어체로 작성되었음을 양해해주시기 바랍니다.
아래의 글은 Cross-Browsing을 위한 Clipboard 지원에 대한 내용입니다.

원본보기

인터넷 익스플로러에서의 텍스트 복사 함수는 아주 단순하다.

window.clipboardData.setData("Text", text);

문 제는 window.clipboardData라는 객체가 인터넷 익스플로러 이외에는 사용이 불가능한 관계로 Cross-Browsing을 위해 위의 함수를 쓰기엔 아쉬움이 많다. 아울러 한가지 추가적인 문제가 있는데, 보안 문제 때문에 '억세스 확인'창이 뜬다는 것이다.

파이어폭스에도 꼼수를 사용하면 위와 같이 클립보드로 억세스가 가능하지만 이것 역시 "보안 확인"이 필요로 하기 때문에 사이트를 이용하는 유저 입장에서는 '그냥 텍스트 복사를 하는데 뭐 이렇게 복잡한가'라고 생각할 수 있겠다. 그래서 이 문제를 해결하기 위해 사이트를 뒤져보니 역시나 방법이 존재했다.

나는 이 방법으로 그냥 스킨에 '주소복사'기능을 만들고 싶었을 뿐이었기 때문에 보다 폭넓은 활용을 위해서는 원문을 참조하기 바란다.(아쉽지만 원문 역시 원리를 설명한다거나 하진 않는다.)

Jeffothy's Keyrings - Clipboard Copy

잘 모르는 분들을 위해 제로보드 XE 스킨에 위의 방법을 어떻게 적용하는가 설명한다.

1. copy.js를 작성한다.

/**
 * @file   copy.js
 * @author Venister (venister@empal.com)
 * @brief  General Text Copy Function For ZBXE. It's based on Jeffothy's implementation. (http://www.jeffothy.com/weblog/clipboard-copy/, License Condition: GPL)
 **/

function copyText( text ) {
    var strCopied = "복사되었습니다. 붙여넣기(Ctrl + V)를 해서 사용하십시오.";

    try {
        var objCopy = null;
        if(!(objCopy = xGetElementById("flashcopier"))){
            objCopy = xCreateElement('div');
            objCopy.id = "flashcopier";
            xAppendChild(document.body, objCopy);
        }
        xInnerHtml(objCopy, "");
        xInnerHtml(objCopy, '<embed src="'+request_uri+'modules/board/skins/digist_simple/_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(text)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>');
        window.alert(strCopied);
    } catch (e) {
        if (window.clipboardData) {
            window.clipboardData.setData("Text", text);
            window.alert(strCopied);
        }
    }
}

여기에서 request_uri 뒤의 하일라이트된 swf 경로를 자신에 맞게 변경해야 한다. 내 경우에는 digist_simple이라는 스킨 디렉토리아래 js라는 폴더를 만들고 그 안에 copy.js를 위치시키고, swf파일은 digist_simple이라는 스킨 디렉토리에 넣었다.

예를 들어 xe_board를 이 팁으로 개조하고 싶다면 18번째 라인을 다음의 코드로 대체하면 된다. 블로그 스킨도 동일한 요령이므로 차근차근 따라하면 큰 무리가 없을 것이다.

xInnerHtml(objCopy, '<embed src="'+request_uri+'modules/board/skins/xe_board/_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(text)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>');

2. 첨부된 파일을 다운받는다. 이 파일의 압축을 풀어 스킨 디렉토리에 넣는다.

_clipboard.zip

3. 이제 스킨을 고친다. 트랙백 주소를 클릭하면 복사하도록 만들고 싶다면,

{$oDocument->getTrackbackUrl()}

라고 쓰여져 있는 부분을 찾아서,

<a href="javascript:copyText('{$oDocument->getTrackbackUrl()}')">...</a>

위와 같이 앞뒤에 <a>태그를 넣어준다. 그 다음 윗 줄에 간단하게 한줄을 더 써주면 되겠다.

<!--%import("js/copy.js")-->

예로 공식배포본에 포함되어 있는 xe_board 스킨의 수정파일을 함께 첨부한다.

xe_board.zip
이 게시물을
좋아요(+1)
목록
제목 글쓴이 날짜
이전글, 다음글 얻기 [25] 라르게덴 2008.05.29
에디터입력창 배경색상(이미지) 변경해보기 [5] [1] 팔공산 2008.07.13
SocialXE 설치후 트위터, 페이스북 접속 안될경우??? [9] 착한부산남자 2012.09.28
bodex 추천 & 댓글 버튼 만들기. [1] file meanie 2012.10.28
게시판확장변수를 이미지로 나타내게 게시판스킨 수정법 [3] file 팔공산 2010.03.10
닉네임 변경시 기존 게시물 연동 팁 (레벨 아이콘 에드온 이용) [9] 바붕아 2012.10.23
Zbxe 서버 이전하기 [4] 팔공산 2007.08.22
약관 동의 후 가입하기 [2] file findwind 2008.11.24
로그인 안되시는분들 참고 [8] 화니478 2007.08.14
[XE 1.4] 모듈 개발 시 유의해야할 템플릿 버그 퍼니엑스이 2012.10.24
XE 1.5.3.1hotfix1에서 Content widget이 정상작동 하지 않을때 [3] file 황비 2012.08.29
메인화면에 설문조사 위젯(?) 만들기 [3] file 3D매니아 2010.12.14
팝업관리 모듈(팝업 오프너 ver. 0.0.4 )에 사용되는 addon/pop_up [25] file ForHanbi 2011.08.21
알렉사 순위 가져오는 스크립트;; [30] file zero 2001.11.06
FTP 쉬운설치 에러나시는분들 [4] 조양각 2012.01.05
스케치북 게시판 스킨 사용시 확장변수 라인 CSS수정 해피보이 2012.10.17
운영하던 사이트의 도메인 주소를 변경했을때 기존 사이트의 이미지들이 엑박이 뜰때 해결방법 [4] 졸라맨 2012.03.05
클립보드로 텍스트 복사하기 [5] file 베니 2007.11.24
Google Analytics Addon 자료 최신 XE 에서 작동시키는 방법 [4] sejin7940 2012.10.05
크롭에 웹폰트 적용하기 css 꿈틀잉 2012.10.07
태그 쓰기