【おすすめWYSIWYGエディター】Bootstrapベースの「Summernote」でフォームパーツをツールバー付きのリッチなUIにしてみた【無料で爆速】

導入が楽チンでFormをWYSIWYG化

先日、フォームのテキストボックスやインプットボックスをリッチなUIにして欲しいというお話を受けました。

おそらくエクセルやワードのようなツールバーが付いているWYSIWYGエディターの事を指しているようだったので、ライブラリ選定をしていたところ、無料で使いやすそうなやつを見つけたので今回はそちらの導入方法を備忘録として記事にしてみようと思います。

Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. Summernote - Super Simple WYSIWYG editor

手順

導入

まずはライブラリを用意しましょう。

ソースセットをGithubからダウンロードしてプロジェクトに取り込んでも良いし、CDNで読み込んでも良いです。

今回はサクッとCDNで読み込んでみます。

index.html

<!DOCTYPE html>
<html lang="ja">
   <head>
      <!-- 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>
   </head>
    略...
</html>

Summernoteと合わせてBootstrap３のライブラリもCDN経由で読み込んでいます。

次にSummernoteによってWYSIWYG化するパーツを用意しましょう。

今回はinput[type='text']とtextareaに加え、divもWYSIWYG化出来るようなのでそちらを試してみましょう。

                             index.html

略... <body> <div class="panel panel-default"> <div class="panel-heading">

class=cl># サンプル </div> <div class="panel-body"> <form method="post"> <p>inputボックス</p> <input type="text" /> <input type="text" class="summernote" /> <p>テキストエリア</p> <textarea ></textarea> <textarea class="summernote"></textarea> <p>div</p> <div></div> <div class="summernote"></div> </form> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('.summernote').summernote(); }); </script> </body> class=cl></html>

最後にsummernoteを実行する事を忘れずに。

確認

ブラウザでアクセスするとこのような形になります。

無事にそれぞれがWYSIWYG化出来ていますね♪

ボタンの種類と有効無効の設定方法

SummernoteのWYSIWYGエディターに用意されているツールは以下の通りです。

[adsense-responsive]

Insert
- picture: 画像ダイアログ
- link: リンクダイアログ
- video: ビデオダイアログ
- table: テーブル挿入
- hr: 平行線
Font Style
- fontname: フォントファミリー
- fontsize: フォントサイズ
- fontsizeunit: フォントサイズユニット
- color: 文字色&背景色r
- forecolor: 文字色
- backcolor: 背景色
- bold: 太文字
- italic: 斜体
- underline: 下線/li>
- strikethrough: 取り消し線
- superscript: 上付き文字
- subscript: 添字
- clear: スタイルリセット
Paragraph style
- style: スタイルフォーマット
- ol: ol追加
- ul: ul追加/li>
- paragraph: 段落はいち
- height: 行高さ
Misc
- fullscreen: 全画面
- codeview: コード,HMLトグル
- undo: 戻す
- redo: 進む
- help: ヘルプダイアログ

かなり多くの設定が用意されています。

ツールの有効化・無効化については以下のように起動時に指定する事で変える事が出来ます。

index.html

var option = {
  toolbar: [
    ['style', ['style']],
    ['font', ['bold', 'underline', 'clear']],
    ['color', ['color']],
    ['view', ['fullscreen', 'codeview', 'help']],
  ]
};
$(document).ready(function() {
  $('.summernote').summernote(option);
});

終わりに

以上のとても簡単にWYSIWYGエディターを導入する事が出来ました。

他にも細かいカスタマイズが用意されているので、気になる方は公式ドキュメントを見ていただければなと思います♪