素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

投稿日:

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

YouTube

スポンサーリンク

336×280




導入が楽チンで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で読み込んでみます。

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

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

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

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

確認

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

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

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

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

  • 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: ヘルプダイアログ

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

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

本日のオススメ商品

終わりに

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

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

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , , ,

blogenist

Author: blogenist

関連記事

YouTube

お名前.comサイドバー