summernoteにクリップボードにコピー機能を追加する方法

summernoteのツールバーに新たにボタンを設置し、そのボタンをクリックするとエディタ(textarea内)に入力された内容をクリップボードにコピーする、という機能を追加したい。以下にサンプルと実装方法をメモ。

summernoteについて

summernote自体の使用方法については過去記事参照。

サンプル

https://taitan916.info/sample/summernote/clipboard/

実装方法

ソースコード

<form action="./" method="post">
    <div>
        <label>
            <input type="radio" value="on" name="switching" checked>On
        </label>
        <label>
            <input type="radio" value="off" name="switching">Off
        </label>
    </div>
    <textarea name="editor" id="editor"></textarea><br>
    <input type="submit" value="送信">
</form>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/lang/summernote-ja-JP.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.0/css/all.min.css">

<script>
$(function(){
    const selector = '#editor';

    //summernoteの開始
    startSummernote(selector);

    //summernoteのOn / Off切り替え
    $('input[name="switching"]').on('change', function(){
        if( $(this).val() == 'on' ){

            //summernoteの開始
            startSummernote(selector);
        }else{

            //空の場合はsummernote側で<p><br></p>が挿入されるので削除
            if( $(selector).summernote('code') == '<p><br></p>' ){
                $(selector).val('');
            }

            //summernoteの破棄
            $(selector).summernote('destroy');
        }
    });

    //summernoteの開始用関数
    function startSummernote( selector ){
        if( !selector ) return false;


        //オプション設定
        const summernote_option = {
            lang: 'ja-JP',
            height: 300,
            focus: true,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video', 'copy']],
                ['view', ['fullscreen', 'codeview', 'help']],
            ],
            buttons: {
                copy: function(context) {
                    const ui = $.summernote.ui;
                    const button = ui.button({
                        contents: '<i class="fa-solid fa-copy" style="height: 18px"></i> クリップボードにコピー', 
                        tooltip: 'クリップボードにコピー', 
                        container: $('.note-editor.note-frame'),
                        click: function() {
                            if( navigator.clipboard.writeText($(selector).summernote('code')) ){
                                alert('クリップボードにコピーしました');
                            }else{
                                alert('クリップボードにコピーできませんでした');
                            }
                        }
                    });
                    return button.render();
                }
            }

        }

        $(selector)
            //オプションを指定して初期化
            .summernote(summernote_option)

            //エンタークリック時に<br>タグを挿入
            .on('summernote.enter',
                function(we, e){
                    $(this).summernote('pasteHTML', '<br>&ZeroWidthSpace;');
                    e.preventDefault();
                }
            );
    }

});
</script>