業務でsummernoteを触ったので備忘録としてsummernoteについて書きます。

summernoteとは

リッチエディタ
WYSIWYGエディタ（ウィジウィグエディタ）

WYSIWYG（アクロニム: ウィジウィグ）とは、コンピュータのユーザインタフェースに関する用語で、ディスプレイに現れるものと処理内容（特に印刷結果）が一致するように表現する技術。What You See Is What You Get（見たままが得られる）の頭文字をとったものであり、「is」を外したWYSWYG（ウィズウィグ）と呼ばれることもある。

（wikipediaから引用）

と呼ばれるもので、HTMLで書いたテキストがそのままHTMLが描画された見た目で編集できるものです。
例えば、WordPressの記事作成ページのようなものですね。（WordPressはさらにリッチですが）

Features

ブートストラップ 3.xx ～ 5.xx をサポート
軽量 (js+css: 100Kb)
スマートなユーザーインタラクション
すべての主要なブラウザで動作します:
Safari、Chrome、Firefox、Opera、Edge、Internet Explorer 9 以降
すべての主要なオペレーティングシステムで動作します。
Windows、MacOS、Linux

公式ドキュメントにあったものの引用です。
公式ドキュメント：https://summernote.org/

内部的にはjQueryで動いており、Bootstlap3~5系に対応しているので既存のサービス（特にレガシーシステム）に導入しやすいと思います。

インストール・始め方

https://summernote.org/getting-started/
公式サイトのインストールガイドをなぞり、ブラウザでsummernoteを動かすところまでやってみました。

できるようにしたこと

フォームでsummernoteを使えるようにした
高さを調整した
ページ読み込み後フォーカスが当たるようにした
日本語化した

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- include libraries(jQuery, bootstrap) -->
    <link
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <!-- include summernote css/js -->
    <link
      href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    <!-- 日本語対応するため読み込む -->
    <script src="lang/summernote-ja-JP.js"></script>
  </head>
  <body>
    <form method="post">
      <!-- idを指定する -->
      <textarea id="summernote" name="editordata"></textarea>
      <input type="submit" value="送信" />
    </form>

    <script>
      $(document).ready(function () {
        $("#summernote").summernote({
          height: 300, // エディタの高さ
          minHeight: null, // エディタの最小高さ
          maxHeight: null, // エディタの最大高さ
          focus: true, // ページ読み込み後最初にフォーカスするか
          lang: "ja-JP", // 言語 default: 'en-US'
        });
      });
    </script>
  </body>
</html>

HTMLファイルを作成してコピペすれば動くと思います。
ページによりますが個人的にフォーカスを当てるのはfalseで良い気もしました。

必要なライブラリを読み込む
HTMLで<textarea id="summernote"></textarea>を記述
JSで$("#summernote").summernote()を記述

最低限必要なのはこれだけです。
簡単にリッチエディタを用意できるので良いですね。

あとはサービスによって、動画は使わせたくないとか、使えるフォントを増やしたいとか、UIを変えたいなどなど要望があるかと思うので、そういったカスタマイズについては後追いで更新していければと思います。

summernote使ってみたッ

summernoteとは

Features

インストール・始め方