코드블럭 TEXT내용 클립보드 복사하기

코드블럭 TEXT내용 클립보드 복사하기

안녕하세요 TriplexLab 입니다.
이번 시간에는 navigator를 이용한 코드블럭의 TEXT내용을 클립보드에 복사하는 방법에 관해서 살펴보도록 하겠습니다.

👉 코드설명

1. pre라는 시작 엘리먼트 바로 하단에 안에 button엘리먼트를 동적으로 삽입합니다.(렌더링 시점)

$('.article_view pre').insertAdjacentHTML(
'afterbegin',
'<button class="code_btn" data-txt="Copy" aria-label="Code Copy"><i class="ic-copy"></i></button>'
);

2. css에서 data-txt속성에 있는 텍스트를 읽옵니다.

/* data-txt속성에 있는 텍스트를 읽옵니다. */ 
.code_btn:before{ content: attr(data-txt);}

3. 버튼을 클릭하면 navigator.clipboard.writeText() 메소드들을 활용해서 텍스트를 복사합니다.
그리고 그외에 것들은 텍스트를 1초단위로 Copied !, Copy를 바꿔주고, on를 넣어주고 빼주는것 입니다.
(navigator관해서 API설명서 링크 걸어놨습니다. 보시고 지원하는 브라우저 확인해보세요~)

$('.code_btn').on('click', (e) => {
	const self = e.target
	const hljsTxt = self.next('.hljs').text();
	navigator.clipboard.writeText(hljsTxt);/* 텍스트 클립보드 복사 */
	self.attr('data-txt', 'Copied !').addClass('on');
});

위에 했던 작업은 파일로도 제공합니다.
필요한분들을 다운로드 해서 실험 해보세요 :)

클립보드 복사하기.zip

0.04MB

---

🙌 참고사항

👉 highlightjs.js

코드블럭 템플릿은 highlightjs.js를 사용하는것을 추천합니다. 👍

highlight.js demo

👉 jquery scrollbar

스크롤바를 커스텀 하고 싶으면 jquery scrollbar 사용해보세요! 사용방법은 매우 간단합니다.😃

jQuery Scrollbar Demo