esaでCopyボタン付きのサンプル文章を書くためのHTMLスニペット。

readme.md

前提

• esaを使っている。

問題

• esaの記事の中に「コピペできるサンプル文書を置きたい。

方法

• 以下のHTMLスニペットを貼り込むと、Copyボタンでクリップボードにサンプル文書がコピーされる。
• ただし設定でscriptタグを有効にする必要がある。

HTMLスニペット

<textarea id="CONTENT" cols="60" rows="5">
ここがクリップボードにコピーされる文章になります。
以上、よろしくお願いいたします。
</textarea>

<button class="btn btn-primary" id="COPY-BUTTON">Copy</button>

<script>
$(function(){
  $("#COPY-BUTTON").on('click', function() {
    const s = $("#CONTENT").val();
    navigator.clipboard.writeText(s).then(function() {
      alert(`----\n${s}\n----\nをクリップボードにコピーしました。`);
    }, function() {
      window.prompt('手動でクリップボードにコピーしてください。', s);
    });
  });
});
</script>

スクリーンショット

Tips

• このテンプレートをTemplates/カテゴリに入れておくと、同種の記事を書くときに便利です。
• textareaを編集してからCopyボタンを押すと、ちゃんと編集後の文字列がコピーされます。

https://twitter.com/hyuki/status/1682539208219693056