웹마스터 팁

  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)
목록
제목 글쓴이 날짜
댓글 수정/ 대댓글 달시에 댓글 공지 넣는법 [8] file 불금 2015.06.17
위젯 복사 팁 - 이걸 왜 이제야 알았을까.. socialskyo 2015.06.17
댓글에 대댓글 달리면 수정 불가능하게 하기 [8] 불금 2015.06.17
원하는 그룹에게 아이피를 전부다 표시해주기 [1] 불금 2015.06.16
SSL의 정석 (아파치 & nginx) [13] 기진곰 2015.06.16
확장변수 검색시 범위 설정해서 검색하는 팁. [2] 키다리아저씨2 2015.06.16
네이버 날씨 위젯 입니다 file codlllle 2015.06.15
페이스북 공유할 때 모바일에서는 이미지 안뜨는 증상 file silhwang 2015.06.14
XE 에 무료 채팅방 설치하기 [6] file 김동재4af45 2015.06.14
자동 저장되었습니다에 초단위 추가 file 불금 2015.06.13
무료 오픈 api가 많은 사이트 [유용] [3] file 김동재4af45 2015.06.13
Font Awesome 메뉴바에 적용하기 file 불금 2015.06.13
상단바 (navbar) 고정 레이아웃 알림센터 close시 밀려나는 현상 해결법 [2] file 불금 2015.06.13
Uchat 에서 XE 프로필 이미지 불러오게 수정하는법 file 불금 2015.06.10
MARIADB or MYSQL 의 INNODB로 엔진 변경 PHP스크립트 간장게장같은남자 2015.06.10
포인트 복권 모듈 관리자 페이지 1.7이상에 맞게 [10] file 착한악마 2015.06.10
간단한(?) 해시태그 소스.. [18] Ikoo 2015.06.10
트래픽 차단된 이미지들 보는 방식 만들었네요. SeungXE 2015.06.10
해당 그룹 or 관리자는 애드온 실행 안되게 하기 [3] 불금 2015.06.10
1.8.3 통합 검색시 제목+내용 으로 하기 불금 2015.06.09
태그 쓰기