プラグインを使わずコピーボタンをつける（１）失敗

2020年10月10日

記事内にコードを表示する場合[code]や[pre]で囲いますが、
使いたいコードをコピペする時に左クリックの長押しで選択してコピー

あれを一発でコピーしちゃう「コピーボタン」ってものを付けたい

そのきっかけは使わせていただいた「引用符（blockquote）」Copypetさんのサイトです

「コピペでできる！CSSとhtmlだけのわかりやすい引用符デザイン13選」

オリジナルの「Copy」ボタンがあって便利！見た目もとってもおしゃれ☆(*＾▽＾*)☆
でも、これはハードルが高すぎる！！！・・の前に残念ながら公開されてないです

出来ればプラグインを使わずに実装できちゃうやつがお望み！！
最初に挑戦してみたのはDEVECATさんの「ブログにコピーボタンを置く」です

コピーボタンがついてて上から「コピー完了」がピコン！と出てくるもの

「ブロックエディタ」の「カスタムHTML」を使ってscriptで動かす方法みたいです

「ブロックエディタ」？？あったなああ程度の記憶でした

こんな感じの投稿欄です

見るからに便利に使えそうなんですが、勝手にpだのdivだのが入ってたり
段落とかが自由にならなくて使いにくいので使ってなかったです

ブロックエディタで作ってテキストエディタで見るとこうなっちゃうんです↓↓

全部がエスケープされた<p></p>で括られてて横一列、修正を加えたい時とっても見にくい!

案の定、失敗しました！
途中までは順調だったけど肝心のコピーボタンが効かない
何処をどう間違えたのか何回も見直したけど解決できず残念、諦めました。

とりあえず再挑戦の時のために記録しておこうと思います

1.スクリプトをコピー

スクリプトはボタンが押された際の動きを定義する項目なので、プレビュー画面では見えない要素になっています。スクリプトはカスタムHTMLに貼った後は、記事の下の方に置いておけばOKです。次の項目の「ボタン」の近くにある必要はありません。

<script>
$(function() {
  $('.copybtn-1').on('click', function(){
    let mytxt = $('.copytxt-1').text();
    let $myarea = $('<textarea></textarea>');
    $myarea.text(mytxt);
    $(this).append($myarea);
    $myarea.select();
    document.execCommand('copy');
    $myarea.remove();
    alert("コピー完了");
  });
});
</script>

2.ボタンをつくる

下のサンプルをそのまま「カスタムHTML」のブロックに貼り付けるだけでOKです。
ボタンの見た目ですが、本来ならCSSで表示を整えるところですが、今回はサンプル内の「style」の項目で直接やってます。
それぞれ文字の大きさや色を変更したい場合は、下のサンプルの「font-size」や「color」の項目で設定できます。

<button style="font-size:20px; color:#ffffff; background-color: #505050;
 padding:10px 45px; margin-top:0px; border-radius:10px;" type="button"
 class="copybtn-1">Copy</button>

wordpressのボタンを使うことも出来るようです