Edited at

clipboardにHTML, CSSをコピーするボタンを設置

「ある範囲のHTML, CSSをクリップボードに一発でコピーできるボタンが欲しい」という件に難儀したのでメモに残す。


難儀した箇所

HTMLで囲われたテキストをコピーするにはclipboard.jsなどを使って実装できるが、HTMLやCSSのコピーは正面突破しようとするとできないので、工夫が必要だった。


どうしたか

clipboard.jsでは、value評価される部分をクリップボードにコピーする仕様になっているっぽかったので、HTML, CSSを取得した上でinput valueに一旦入れてあげvalue評価させた上で、input valueを取得するようにした。

input要素についてはstyle="display: none"で表示させないようにした。


example.html


<div id="clipboard">
<input id="clipboard-text" type="text" value="" style="display: none" />
<button class="btn copy-dom-to-clipboard-btn" data-clipboard-action="copy" data-clipboard-text="">Copy DOM</button>
</div>

<script type="text/javascript">
$(document).ready(function() {
$('.copy-dom-to-clipboard-btn').on('click', function() {
// プレビュー画面のHTML, CSSの取得
var copyTarget = document.querySelector("CSS指定").outerHTML + document.querySelector("div idなど").outerHTML;
// HTML/CSSをコピーするにはDOM内でvalue評価しないといけないので対応する。
var clipBoardVal = $('#clipboard-text').val(copyTarget);
$('.copy-dom-to-clipboard-btn').attr('data-clipboard-text', clipBoardVal.val());
});
var clipboard = new Clipboard('.copy-dom-to-clipboard-btn');
// コピーした時にアラートを表示する (成功時)
clipboard.on( "success", function(e) {
e.clearSelection();
alert( "Copied on Clipboard" );
});
});
</script>


その他 clipboard.js については下記参照

clipboard.js