웹마스터 팁

  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)
목록
태그 쓰기