summernote(WYSIWYGエディタ)の設置方法と日本語化対応

あるシステムにWYSIWYGエディタを実装したかった。以前にメモしたCKEditor5が候補に挙がったが久しぶりに見てみるとユーザー登録やライセンスキーが必要になっていたりと色々面倒くさそう。似たようなUIで代わりがないか探したところsummernoteがよさそう。以下に設置方法等をメモ。

やりたいこと

• summernoteの設置
• 日本語化対応
• 改行時にpタグで囲まずbrタグを出力
• ラジオボタンと連携し、ページ遷移なしでtextareaとの切り替え

サンプル

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

前述のやりたいことはおおむね実装できている筈。

summernote

公式サイト

https://summernote.org/

Github

https://github.com/summernote/summernote/

CDN

CDNで使う場合は以下を記述する。jQuery必須な点に注意。

<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>

利用方法

ソースコード

<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>

<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,
        }

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

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

});
</script>

所感

ユーザー登録やライセンスキー不要、MITライセンスということで非常に使いやすいように思う。

尚、画像選択時にBase64エンコードされるようなので、この部分を画像アップロード形式に変える方法も知りたいところ。