【WYSIWYGエディタ】Summernoteのボタンの種類

## はじめに
前回設置して日本語化まで済ませた「Summernote」ですが、自分のみで使うにはこのままでも良いのですが、お客様等に簡易なシステム構築して納品するような場合にはユーザービリティーの観点からもツールバーのカスタマイズは必須になってきます。
その為にはまず使える機能を理解しておこうということで、今回は標準機能で使えるボタンの説明というか備忘録。
前回記事の内容はこちら。

https://qiita.com/chika_pon/items/2f46411ba383fe345759

デフォルト状態で表示されるボタンやその他使えるボタンを、機能を含めて説明していきます。
## バージョン情報
summernote lite var 0.8.18（2024年4月現在）
## 1. 標準表示のボタン（ツールバー内）
インストール直後にツールバー内に表示される各種ボタンです。
|ボタン|システム名|機能|
|:---|:---|:---|
|![素材_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/375b7e18-579d-0092-9319-8d9a2f2bef5e.png)|style|選択したブロックのスタイルを切り替え<br>内容：標準、引用、コード、見出し1～6<br>ソース：p、blockquote、pre、h1～h6|
|![素材_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/f385abd6-5aa5-7154-c17a-5e9c311c6fce.png)|bold|フォントの太さを切り替え<br>ソース：b|
|![素材_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/4bcacf06-bb4b-68aa-5be0-c2903ca7590d.png)|underline|下線を切り替え<br>ソース：u|
|![素材_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/2eee20f8-6003-fde7-43e7-c58b5d0a1fbe.png)|clear|適用されたスタイルのクリア|
|![素材_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/42839147-b0f9-c0bb-8e10-31f8c022285c.png)|fontname|フォントの切り替え<br>ソース：style="font-family: "|
|![素材_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/501156d4-3ebe-5ae8-f7f8-cc3931fbfc31.png)|color|テキストの背景色とフォントカラーの切り替え<br>ソース：style="background-color: "、style="color: "|
|![素材_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/2ecadb2c-4477-2804-19b0-61566ca39754.png)|ul|通常リストの切り替え<br>ソース：ul、li|
|![素材_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/bcfd1b9a-759f-000d-766a-71cc2d8c0043.png)|ol|番号付きリストの切り替え<br>ソース：ol、li|
|![素材_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/09a071ef-4a1e-5bff-6d4a-e678861939a3.png)|paragraph|段落のスタイルを切り替え<br>内容1：左寄せ、中央寄せ、右寄せ、均等割付<br>内容2：インデントの追加、インデントの削除<br>ソース：p、blockquote、pre、h1、h2 ･･･|
|![素材_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/4877e77a-d5ac-f030-8413-8bb97640290e.png)|table|テーブルの挿入<br>ソース：table他|
|![素材_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/2778c804-1f59-7a4d-984f-7f866d21c1b4.png)|link|リンクの挿入<br>ソース：a|
|![素材_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/c83d86f1-fb6b-5ae3-392d-79bb78d3c02e.png)|picture|画像の挿入<br>内容：base64エンコードもしくはURLでの挿入<br>ソース：img|
|![素材_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/75a745a2-aa84-86d8-20cc-3b29f249a6a6.png)|video|Youtube等の動画の挿入<br>ソース：iframe|
|![素材_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/41a4dcee-68b2-c404-867a-6f97f6289cf2.png)|fullscreen|フルスクリーン表示の切り替え|
|![素材_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/a6e6c9ef-984b-9f2d-f9ce-b68ae251d818.png)|codeview|wysiwygとhtml編集モードの切り替え|
|![素材_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/b54fd88e-3fa0-fa34-091e-bdbb44b5ea7a.png)|help|ヘルプダイアログの表示<br>内容：各機能のショートカットキー|

:::note info
画像の挿入ボタンについて
base64エンコードもしくはURLでの挿入に対応していて、サーバーへの画像アップロード機能は標準搭載されていません。<br>ただし、サーバーに画像をアップロードする仕組み（ajax+phpなど）を別途自作して、そのプログラムをSummernoteに組み込んだりなど、色々できそうです。そこら辺は[Summernote公式ドキュメント](https://summernote.org/deep-dive/#onimageupload)も確認してみると良いです。
:::
## 2. 標準表示以外で設置できるボタン（ツールバー内）
設定することでツールバー内に表示できるボタンです。
|ボタン|システム名|機能|
|:---|:---|:---|
|![素材_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/9c81ec7a-63e0-4c70-2691-36a2372dc819.png)|forecolor|テキストのフォントカラーの切り替え<br>ソース：style="color: "|
|![素材_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/995be08f-c020-5423-a9f5-6703f4a10237.png)|backcolor|テキストの背景色の切り替え<br>ソース：style="background-color: "|
|![素材_60.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/58d84009-6970-28a0-68bf-2c4dd55773bb.png)|strikethrough|取り消し線の切り替え<br>ソース：strike|
|![素材_70.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/c77af68d-d0ae-ef94-7a8e-f07efd0250e3.png)|italic|斜体の切り替え<br>ソース：i|
|![素材_68.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/0d6f5d5d-704d-30e9-30d7-7413cc5b6c59.png)|hr|横罫線を挿入<br>ソース：hr|
|![素材_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/39dae4be-ed0f-9034-fb99-3a553c0ce1a6.png)|fontsize|フォントサイズの切り替え<br>ソース：style="font-size: "|
|![素材_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/7402cb7e-6a47-b596-2ab2-708d05f8f028.png)|fontsizeunit|フォントサイズの単位の切り替え<br>内容：px、pt|
|![素材_66.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/487cf5b6-a4a1-7978-f169-9580aadd8187.png)|height|行の高さの切り替え<br>ソース：style="line-height: "|
|![素材_62.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/e55974af-a0f5-095f-2fee-0c0e36971725.png)|superscript|上付き文字の切り替え<br>ソース：sup|
|![素材_64.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/d9a3db4a-47fe-8ab1-ee63-33db034c6588.png)|subscript|下付き文字の切り替え<br>ソース：sub|
|![素材_72.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/2ff17a70-63e1-656d-44f0-9b831d1b9c53.png)|undo|操作を元に戻す|
|![素材_74.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/a2c1192b-4381-2202-6280-2545b19a9d6f.png)|redo|操作をやり直す|
## 3. ポップオーバーされるボタン（リンク編集用）
編集領域でリンクを設定した時、リンクにマウスポインタを乗せると表示される編集用ボタンです。
|ボタン|システム名|機能|
|:---|:---|:---|
|![素材_89.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/50fd000d-90be-ae39-ef86-5ecdd10bb60d.png)|linkDialogShow|リンク内容の編集|
|![素材_91.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/5b3833bb-853c-43ca-a7a7-a17cc0fc5f30.png)|unlink|リンクの削除|
## 4. ポップオーバーされるボタン（画像編集用）
編集領域で画像を設定した時、画像にマウスポインタを乗せると表示される編集用ボタンです。
|ボタン|システム名|機能|
|:---|:---|:---|
|![素材_118.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/7548c48e-f2f8-1d47-27d8-60e462d144a7.png)|resizeFull|表示領域の100％の幅に設定|
|![素材_121.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/68f8d404-310a-fe3c-1048-dedb6373b209.png)|resizeHalf|表示領域の50％の幅に設定|
|![素材_123.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/59914757-8dc1-22de-d53d-e865a183e628.png)|resizeQuarter|表示領域の25％の幅に設定|
|![素材_125.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/ad607b01-7f7c-091b-61a2-788f47635a0d.png)|resizeNone|画像のオリジナルサイズに戻す|
|![素材_127.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/21d8ed29-a376-d40f-cde1-8c7ab2dd4c35.png)|floatLeft|画像を左寄せにしてテキストが右に回り込むように設定|
|![素材_129.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/7c4b02b2-0140-cff2-1935-14b17ddc4a64.png)|floatRight|画像を右寄せにしてテキストが左に回り込むように設定|
|![素材_131.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/50791a31-1ec6-6966-dee1-0a2b98d4e73b.png)|floatNone|右寄せや左寄せの設定を削除|
|![素材_133.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/5150f6e5-d6b9-7690-6c67-0092e6f09e94.png)|removeMedia|画像を削除|
|![素材_136.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/18d00480-9f24-39af-0e6d-b651af64220b.png)|無し|画像の右下に表示されるサイズ変更用ポインタ<br>ポインタを利用すると画像幅をピクセル固定できる|
## 5. ポップオーバーされるボタン（テーブル編集用）
編集領域でテーブルを設定した時、テーブルにマウスポインタを乗せると表示される編集用ボタンです。
|ボタン|システム名|機能|
|:---|:---|:---|
|![素材_96.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/59a3c5af-26cc-08e2-906f-b314da6f740f.png)|addRowDown|選択したセルの下に1行追加|
|![素材_98.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/ed811a95-2730-d009-bb7f-b9247caa664d.png)|addRowUp|選択したセルの上に1行追加|
|![素材_100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/b11258a5-24db-9f4c-337e-ecbe62cd03d0.png)|addColLeft|選択したセルの左に1列追加|
|![素材_102.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/c33a3a29-65b7-9f16-92d0-76d80c49b943.png)|addColRight|選択したセルの右に1列追加|
|![素材_104.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/b481a39c-0fcd-0137-1f39-9a1fb5b42e46.png)|deleteRow|選択したセルが含まれる行を削除|
|![素材_106.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/8f5c5bbb-47e0-e8bc-9253-6408c7596ea8.png)|deleteCol|選択したセルが含まれる列を削除|
|![素材_108.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762843/5edd36fa-daec-262d-585d-726c7cb06cb9.png)|deleteTable|テーブルを削除|
## 6. その他ポップオーバーされるボタン（カスタム設定）
その他にもツールバーにあるボタンの一部を自由にポップオーバーさせることが可能です。
この機能は私は使うことが無いので割愛します。
Summernoteの公式ドキュメントに書かれていますので確認してみてください。

https://summernote.org/deep-dive/#custom-toolbar-popover

## 最後に
今回はSummernoteをカスタマイズする前に、そもそもどのようなボタンと機能があって、どこまでツールバーをカスタマイズするかを考えるためにも、標準設定されている機能ボタンを一覧にしました。
ツールバーをカスタマイズする際の参考になると幸いです。

私的には画像をサーバーにアップロードする際には、サムネイルを自動作成させたりデータベースと連動させてファイル管理したりという機能を持たせたい派なので、無秩序にサーバーにアップロードしてそのまま放置されるようなのは好きじゃありません。
なので、CKEditor等の他WYSIWYGエディタのようにボタンだけ設置されているようなものだと、逆にいじる必要があったりお金がかかったりで面倒な印象が強いです。（本当に個人的な意見ですwwwプロのSEさんからは怒られそう…）
その点、Summernoteは標準でBase64エンコードでの挿入機能とURLによる挿入機能のみがあるので、カスタマイズやプログラムの手間が省けてすごく助かります。

次回は実際にツールバーのカスタマイズをしていく方法をメモって行こうと思います。

↓↓↓次の記事はこちら

https://qiita.com/chika_pon/items/27bc6b47ccf967ce573b