「emoji-mart」ライブラリを利用してsummernoteに絵文字機能を追加する方法

summernoteに絵文字機能を追加したい。具体的にはツールバーに新たにボタンを設置し、ボタンをクリックすると絵文字のピッカーが表示され、絵文字を選択するとエディタ内に当該の絵文字が挿入されるというもの。「emoji-mart」ライブラリと組み合わせることで実装できたのでサンプルとソースコードをメモ。

サンプル

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

ツールバーにある左から5つ目のスマイルマークのボタンをクリックすると絵文字ピッカーが表示され、絵文字を選択するとエディタ内に挿入された上、絵文字ピッカーが閉じる筈。

summernoteについて

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

emoji-mart

Github

https://github.com/missive/emoji-mart

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/emoji-mart@5.6.0/dist/browser.min.js"></script>

実装方法

ソースコード

<style>
#emoji_picker{
    display: none;
    position: absolute;
    z-index: 2;
    margin-top: 50px;
    left: 20px;
}
#emoji_picker .show{
    display: block;
}
.emoji_btn{
    height: 18px;
}
</style>

<form action="./" method="post">
    <div id="emoji_picker"></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 src="https://cdn.jsdelivr.net/npm/emoji-mart@5.6.0/dist/browser.min.js"></script>

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

    //summernoteの開始
    startSummernote(selector);

    const emoji_picker_option = {

        //絵文字データの取得
        data: async () => {
            const response = await fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data');
            return response.json();
        },

        //日本語化
        locale: 'ja',

        //絵文字選択時
        onEmojiSelect: (emoji) => {

            //summernoteエディタ内に絵文字を追記
            $(selector).summernote('pasteHTML', emoji.native);

            //絵文字ピッカーを非表示
            $(`#emoji_picker`).fadeOut();
        }
    };

    //絵文字ピッカーのインスタンス化とDOMへ追加
    const picker = new EmojiMart.Picker(emoji_picker_option);
    $(`#emoji_picker`).append(picker);

    //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', 'emoji']], //emojiを追加
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']],
            ],
            buttons:{
                emoji: function(context) {
                    var ui = $.summernote.ui;
                    var button = ui.button({
                        contents: '<i class="fa-regular fa-face-smile emoji_btn"></i>',
                        tooltip: '絵文字',
                        container: $('.note-editor.note-frame'),

                        //ボタンクリック時は表示非表示切り替え
                        click: function(){
                            $(`#emoji_picker`).toggle();
                        }
                    });
                    return button.render();
                }
            }
        }

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

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

});
</script>

所感

画像挿入時等のモーダルウィンドウとデザインが異なる点や、絵文字ピッカー表示時でも他のボタンをクリックできる点は少々気になるが、私の場合summernoteを実装するのは一般ユーザーは使用しないダッシュボード側になると思われるのでまあ問題なさそう。