【JQuery】 オンラインWYSIWYGエディターを実装するなら「summernote(サマーノート)」がベストかも!

2019年9月28日CSS, Javascript, 開発

おはようございます。

今日はまた便利なライブラリを発見したので紹介。

オンライン上でWYSIWYG(リッチテキスト)エディタを簡単に使えるようにするものです。

スポンサーリンク

summernote(サマーノート)

Bootstrapの超シンプルなWYSIWYGエディターSummernoteは、オンラインでWYSIWYGエディターを作成するのに役立つJavaScriptライブラリです。

スマホでも使えるし、文字の装飾やテーブルの挿入、画像、動画のアップロードなどが簡単におこなえます。

また、高機能なのに商用無料で使えるオープンソースなので、個人開発なんかでもガンガン使えそうです。

必要(依存)なライブラリも、JQueryとBootstrapで、summernoteを含むすべてのライブラリが CDNで提供されているので、すぐに使うことができます。

公式サイトはこちら

プログラム

早速試してみました。

css

css/style.css

HTML

index.html

Javascript

js/script.js

「summernote-ja-JP.js」を読み込み、オプション(lang)に「ja-JP」を指定することで日本語化することができます。

起動してみる

色々書いてみた
色々書いてみた

試しに色々書いてみました。

右側にある「?」ボタンで、ショートカットのヘルプを確認することができます。

ショートカットを覚えれば、コンテンツをサクサク作ることができそうですね。

また、ツールバーに表示するボタンもオプションで色々していできるので、必要なものだけ表示したりといったことも可能です。

まとめ

こんなに高機能なのに無料で使えるなんてすごいですね。

他にもいくつか試してみたものの、使うんだったら summernote 一択かな。

公式サイトのAPIドキュメントなんかも充実しているので、色々弄ってみようと思います。

何かのお役に立てれば。

ではでは。

 

スポンサーリンク


関連するコンテンツ

2019年9月28日CSS, Javascript, 開発Bootstrap, JQuery, サンプルプログラム

Posted by doradora