【JS】オシャレで高機能なテキストエディタプラグインQuill.jsの使い方

  • このエントリーをはてなブックマークに追加

JavaScriptにはブログのような記事を書くことができるWYSIWYG(カスタマイズ可能な高機能エディタ)エディタプラグインがいくつかありますが、私のおすすめ(これしか使ったことない…)のQuill.jsというプラグインの使い方を紹介します。

ちなみに無料・商用利用OKのプラグインです。

Quill.jsとは?

Quill.jsはオシャレで高機能なテキストエディタをHTML内に追加することができるJavaScriptのプラグインです。

公式サイト:https://quilljs.com

Quill.jsのサイトトップに3パターンのデモ画面があるので興味のある方は試しに触ってみてください。

 

Quill.jsの特徴

文字の大きさや色の変更、下線のような基本的なものだけでなく、画像や動画(恐らくYouTobeのみ)の追加、難しい数式やプログラミング言語の投稿(コードブロック)も可能です。

また、文字の書式や色の種類などをカスタマイズすることができます。

エディタ自体は、大きさやデザインをCSSで細かく調整することができます。

詳しくはドキュメントをご覧ください。全部英語ですが笑

https://quilljs.com/docs/quickstart/

 

Anybookでも使っています

私が運営しているオリジナル問題集・ノート作成サービスのAnybookでもテキストエディタにQuill.jsを使用しています。

 

さっそく実装してみよう

実際に実装する方法を解説します。

今回はデフォルトの状態のものを実装してみます。

 

1.Quill.jsの導入

Quill.jsはGithubからソースをダウンロードできますが、今回はCDNで参照するようにします。

Quill.jsのドキュメントにあるように、HTML内に以下のコードを追加します。

これで、Quillのライブラリを使う準備が出来ました。

エディタを追加する準備として、id付きの「div」タグを追加しておきます。

このdivタグの中にテキストエディタが生成されます。

 

2.デフォルトのテキストエディタを生成する

準備したdivタグにテキストエディタを生成します。

JavaScriptで生成するので、JavaScriptを書く準備をします。これはHTML内でもjsファイルでもどっちでも構いません。

これだけで設定は終わりです!

コードについては後述しますので、一度ページを見てみましょう。

こんな簡単でいいのかというくらい簡単に実装出来ましたね。

さっき書いたコードですが、「new Quill(“表示させる要素のid名”,{ 設定 });」という構図になっています。

設定の中で1つだけ「theme」という設定を行っています。

Quill.jsには「snow」「bubble」というテーマがあり、それぞれツールバーの表示方法に違いがあります。

「snow」はエディタの上にツールバーが表示されるテーマ。今回はこれを採用しました。

「bubble」は編集したいテキストをドラッグで範囲指定するとツールチップのように表示されるテーマです。

テーマについてのドキュメント:https://quilljs.com/docs/themes/

また、quillという変数にnewしているので、この後で変数quillからエディタの情報を取得・操作することができます。

 

3.テキストエディタをカスタマイズする

ここまでで十分な方は必要ありませんが、このままだと文字色の設定とか画像の投稿が出来ません。

Quillの表示条件やレイアウトのカスタマイズをいちいち行うのも面倒なので、jsファイルを作り関数を作ってしまいましょう。コピペでOKです。

 

【関数の内容・目的】

・ツールバーに表示させる内容を増やす

・記事のように編集不可のページを作成する

・既に文章が入っている状態でエディタを表示させる

・スマホで表示された時bubbleテーマに変更

・MacとiPhoneで表示させるとなぜかbrタグが消えてしまうので保管する処理

 

 

【使い方】

◆ QuillEditorMake関数

通常のエディタを生成します。引数にid名を記入する。

◆ QuillUpdateEditorMake関数

通常のエディタに文章データを挿入した状態で生成します。引数にid名と文章データ(JSON形式)を記入する。

◆ QuillPageMake関数

編集出来ない表示だけのエディタを生成します。ブログ記事の表示などに使えます。引数にid名と文章データ(JSON形式)を記入する。

 

3つの関数ともにQuillオブジェクトを戻り値で指定しているので、変数で取得出来ます。

上記した文章データ(JSON形式)とは、Quillは入力された情報をJSON形式で出力・読み込みする機能が備わっています。

出力は「quill.getContents()」、読み込みは「quill.setContents(JSONデータ)」で行います。

ドキュメント:https://quilljs.com/docs/api/#getcontents

 

私感ですが、スマホだとツールバーが上にあるレイアウトのsnowタイプだと結構使いづらい印象だったので、画面サイズがスマホ相当のデバイスで表示された場合bubbleタイプに切り替えるようにしています。

Anybookでもゆくゆくはこの方法を実装しようと思います。

 

実装は以下のように行います。

 

先ほどに比べ、ツールバーのアイコンが増えたと思います。

 

まとめ

簡単に実装出来て、データのやり取りも行えるので重宝しているエディタプラグインの紹介でした。

Quill.jsには他にもたくさんの拡張機能が備わっていて、さらに上記したようにカラーパレットに表示させる色のカスタマイズや、書式の指定などお好みのエディタを作成することができますのでお試しを!

別の機会に詳しいカスタマイズ方法も紹介したいと思います!

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*