[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 소셜 미디어에 공유하기
이제는 웹페이지에서 텍스트를 복사하여 소셜 미디어에 공유하는 기능을 구현할 수 있습니다. 이를 위해 Clipboard.js라는 라이브러리를 사용하여 클립보드 기능을 활용할 수 있습니다.
Clipboard.js란?
Clipboard.js는 클립보드 작업을 쉽게 처리할 수 있는 자바스크립트 라이브러리입니다. 텍스트, 링크, 이미지 등 다양한 형태의 데이터를 클립보드에 복사할 수 있으며, 이를 통해 웹페이지에서 사용자가 선택한 내용을 소셜 미디어에 공유할 수 있습니다.
사용방법
먼저, clipboard.js를 다운로드하거나 CDN을 통해 가져와야 합니다. head 태그 내에서 스크립트를 로드합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
다음으로, 복사 버튼을 만들고 클릭 이벤트를 추가합니다.
<button class="copy-button" data-clipboard-text="공유할 내용">복사하기</button>
복사 버튼에 copy-button 클래스를 추가하고, data-clipboard-text 속성을 사용하여 복사할 내용을 지정합니다.
마지막으로, 자바스크립트로 클립보드 동작을 초기화합니다.
<script>
var clipboard = new ClipboardJS('.copy-button');
clipboard.on('success', function(e) {
console.log(e);
alert('복사가 완료되었습니다!');
e.clearSelection();
});
clipboard.on('error', function(e) {
console.log(e);
alert('복사를 실패하였습니다.');
});
</script>
복사 버튼을 클릭하면, 지정된 텍스트가 클립보드에 복사되고, 성공 또는 실패에 따라 메시지가 표시됩니다.
추가적인 기능
Clipboard.js는 텍스트 외에도 링크, 이미지 등 다양한 데이터의 클립보드 작업을 지원합니다. 데이터 유형에 따라 다른 메서드를 사용하여 클립보드에 복사할 수 있습니다. 자세한 내용은 공식 문서를 확인해주세요.