はじめに
前回設置して日本語化まで済ませた「Summernote」ですが、自分のみで使うにはこのままでも良いのですが、お客様等に簡易なシステム構築して納品するような場合にはユーザービリティーの観点からもツールバーのカスタマイズは必須になってきます。
その為にはまず使える機能を理解しておこうということで、今回は標準機能で使えるボタンの説明というか備忘録。
前回記事の内容はこちら。
デフォルト状態で表示されるボタンやその他使えるボタンを、機能を含めて説明していきます。
バージョン情報
summernote lite var 0.8.18（2024年4月現在）
1. 標準表示のボタン（ツールバー内）
インストール直後にツールバー内に表示される各種ボタンです。
| ボタン | システム名 | 機能 |
|---|---|---|
 |
style | 選択したブロックのスタイルを切り替え 内容：標準、引用、コード、見出し1～6 ソース：p、blockquote、pre、h1～h6 |
 |
bold | フォントの太さを切り替え ソース：b |
 |
underline | 下線を切り替え ソース：u |
 |
clear | 適用されたスタイルのクリア |
 |
fontname | フォントの切り替え ソース：style="font-family: " |
 |
color | テキストの背景色とフォントカラーの切り替え ソース：style="background-color: "、style="color: " |
 |
ul | 通常リストの切り替え ソース：ul、li |
 |
ol | 番号付きリストの切り替え ソース：ol、li |
 |
paragraph | 段落のスタイルを切り替え 内容1：左寄せ、中央寄せ、右寄せ、均等割付 内容2：インデントの追加、インデントの削除 ソース：p、blockquote、pre、h1、h2 ･･･ |
 |
table | テーブルの挿入 ソース：table他 |
 |
link | リンクの挿入 ソース：a |
 |
picture | 画像の挿入 内容：base64エンコードもしくはURLでの挿入 ソース：img |
 |
video | Youtube等の動画の挿入 ソース：iframe |
 |
fullscreen | フルスクリーン表示の切り替え |
 |
codeview | wysiwygとhtml編集モードの切り替え |
 |
help | ヘルプダイアログの表示 内容：各機能のショートカットキー |
画像の挿入ボタンについて
base64エンコードもしくはURLでの挿入に対応していて、サーバーへの画像アップロード機能は標準搭載されていません。
ただし、サーバーに画像をアップロードする仕組み（ajax+phpなど）を別途自作して、そのプログラムをSummernoteに組み込んだりなど、色々できそうです。そこら辺はSummernote公式ドキュメントも確認してみると良いです。
2. 標準表示以外で設置できるボタン（ツールバー内）
設定することでツールバー内に表示できるボタンです。
| ボタン | システム名 | 機能 |
|---|---|---|
 |
forecolor | テキストのフォントカラーの切り替え ソース：style="color: " |
 |
backcolor | テキストの背景色の切り替え ソース：style="background-color: " |
 |
strikethrough | 取り消し線の切り替え ソース：strike |
 |
italic | 斜体の切り替え ソース：i |
 |
hr | 横罫線を挿入 ソース：hr |
 |
fontsize | フォントサイズの切り替え ソース：style="font-size: " |
 |
fontsizeunit | フォントサイズの単位の切り替え 内容：px、pt |
 |
height | 行の高さの切り替え ソース：style="line-height: " |
 |
superscript | 上付き文字の切り替え ソース：sup |
 |
subscript | 下付き文字の切り替え ソース：sub |
 |
undo | 操作を元に戻す |
 |
redo | 操作をやり直す |
3. ポップオーバーされるボタン（リンク編集用）
編集領域でリンクを設定した時、リンクにマウスポインタを乗せると表示される編集用ボタンです。
| ボタン | システム名 | 機能 |
|---|---|---|
 |
linkDialogShow | リンク内容の編集 |
 |
unlink | リンクの削除 |
4. ポップオーバーされるボタン（画像編集用）
編集領域で画像を設定した時、画像にマウスポインタを乗せると表示される編集用ボタンです。
| ボタン | システム名 | 機能 |
|---|---|---|
 |
resizeFull | 表示領域の100％の幅に設定 |
 |
resizeHalf | 表示領域の50％の幅に設定 |
 |
resizeQuarter | 表示領域の25％の幅に設定 |
 |
resizeNone | 画像のオリジナルサイズに戻す |
 |
floatLeft | 画像を左寄せにしてテキストが右に回り込むように設定 |
 |
floatRight | 画像を右寄せにしてテキストが左に回り込むように設定 |
 |
floatNone | 右寄せや左寄せの設定を削除 |
 |
removeMedia | 画像を削除 |
 |
無し | 画像の右下に表示されるサイズ変更用ポインタ ポインタを利用すると画像幅をピクセル固定できる |
5. ポップオーバーされるボタン（テーブル編集用）
編集領域でテーブルを設定した時、テーブルにマウスポインタを乗せると表示される編集用ボタンです。
| ボタン | システム名 | 機能 |
|---|---|---|
 |
addRowDown | 選択したセルの下に1行追加 |
 |
addRowUp | 選択したセルの上に1行追加 |
 |
addColLeft | 選択したセルの左に1列追加 |
 |
addColRight | 選択したセルの右に1列追加 |
 |
deleteRow | 選択したセルが含まれる行を削除 |
 |
deleteCol | 選択したセルが含まれる列を削除 |
 |
deleteTable | テーブルを削除 |
6. その他ポップオーバーされるボタン（カスタム設定）
その他にもツールバーにあるボタンの一部を自由にポップオーバーさせることが可能です。
この機能は私は使うことが無いので割愛します。
Summernoteの公式ドキュメントに書かれていますので確認してみてください。
最後に
今回はSummernoteをカスタマイズする前に、そもそもどのようなボタンと機能があって、どこまでツールバーをカスタマイズするかを考えるためにも、標準設定されている機能ボタンを一覧にしました。
ツールバーをカスタマイズする際の参考になると幸いです。
私的には画像をサーバーにアップロードする際には、サムネイルを自動作成させたりデータベースと連動させてファイル管理したりという機能を持たせたい派なので、無秩序にサーバーにアップロードしてそのまま放置されるようなのは好きじゃありません。
なので、CKEditor等の他WYSIWYGエディタのようにボタンだけ設置されているようなものだと、逆にいじる必要があったりお金がかかったりで面倒な印象が強いです。（本当に個人的な意見ですwwwプロのSEさんからは怒られそう…）
その点、Summernoteは標準でBase64エンコードでの挿入機能とURLによる挿入機能のみがあるので、カスタマイズやプログラムの手間が省けてすごく助かります。
次回は実際にツールバーのカスタマイズをしていく方法をメモって行こうと思います。
↓↓↓次の記事はこちら