summernoteのデフォルトの画像挿入時にCSSや任意の属性を指定する方法

summernoteのデフォルトの画像挿入時はBase64形式にエンコードされ、imgタグとしてエディタ内に追記される。その際、imgタグに対してCSSであったりLightbox3用の属性(data-caption="xxxx")を指定の上、追記したい。以下に対応方法をメモ。

summernoteについて

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

対応方法

ソースコード

const summernote_option = {
    lang: 'ja-JP',
    height: 300,
    focus: true,
    toolbar: [
        ['view', ['undo', 'redo']],
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture', 'video']],
        ['view', ['fullscreen', 'codeview', 'help']],
    ],
    callbacks: {
        onImageUpload: function( files ){

            //画像存在チェック
            if( !files || files.length === 0 ){
                return false;
            }

            //FileReaderオブジェクトのインスタンス化
            const reader = new FileReader();

            //読み込み失敗時
            reader.onerror = function(){
                return false;
            }

            //画像読み込み成功時のイベントを登録
            reader.onload = function(){
                const base64_data = reader.result; 
                $(selector).summernote('pasteHTML', `<img src="${base64_data}" style="max-width: 100%;" data-caption="lightbox3用のテキスト">`);
            }

            //画像の読み込み(読み込みが完了すればonloadが実行される)
            reader.readAsDataURL(files[0]);
        }
    }
}

$(selector).summernote(summernote_option)

リファレンス

onImageUpload

https://summernote.org/deep-dive/#onimageupload