前回導入したsummernoteの使い方を紹介します。
summernote導入方法について→https://qiita.com/Shou_/items/a096924d7b0a387862ab
目次
1. 文字を変更
2. 文字の色を変更
3. 箇条書き
4. 段落
5. table挿入
6. url挿入
7. 画像挿入
8. 動画挿入
9. エディターに変換
10. その他の機能
1. 文字を変更
見出し
summernoteの右上にあるボタンをクリックすると見出しの文字になります。HTMLだとh1、h2にあたります。Normalを押すと元に戻ります。
太字・下線
太字にするにはボタン、下線を引くなら、先程の太文字や下線を解除するなら解除したい文字を選択してをクリックします。
フォントの種類（font-family）
フォントの種類を変えたいときHelvetica Neueボタンで変更できます。font-familyにあたる部分です。
※フォントの種類を変更できるのは英数字のみで仮名文字は変更できないのでご注意です！
2. 文字の色を変更
こちらの下矢印ボタンを押すと文字の背景色と文字の色を変更できます。
左が背景色で右が文字色です。
3. 箇条書き
順不同型は左、番号型は右のボタンをクリックします
4. 段落
左から 文字を左揃え、中央揃え、右揃え、 変更を戻すボタンとなります。
その右のボタンはインデントをつけるボタンとインデントを消すボタンです。
5. table挿入
表を入れます。
10✕10マスまで選択できます。
6. url挿入
そのページへのリンクを挿入できます。
7. 画像挿入
URLやご自身のファイルから画像を選択でき、選択した画像を挿入できます。
8. 動画挿入
動画のURLを入れると、その動画を入力フォームに挿入できます。
9. エディターに変換
ブラウザからエディターに変更でき、コードとして書いたものがそのまま入力フォームに表示される
### 注意！
大きな画像を入れている状態でエディターを開くと 動作が重くなる可能性がございます！！
10. その他の機能
入力フォームを拡大させる
よく使うショートカットキーを見ることができる
今回はsummernoteの使用方法について説明して致しました。自分はまだまだ使い慣れていませんが、非常に便利な機能なので是非試してみてください。
間違った箇所がございましたらご指摘よろしくお願い致します。