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