ウィジウィグエディタのQuillを使ってみる

ウィジウィグを独自で実装する機会があったので、オープンソースのウィジウィグエディタ「Quill」を使ってみました。

対応ブラウザ

対応ブラウザは公式のドキュメント内に記載がありますが、IEには対応していないようです。

導入

まずは公式のQuickstartを参考に簡単に導入してみます。
ダウンロード方法はいくつかありますが、今回はCDNを使用します。

<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

ウィジウィグを設置する要素を用意します。

<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

#editor内の要素が初期値になります。

JavaScriptでウィジウィグの設定を行います。

var quill = new Quill('#editor', {
  theme: 'snow'
});

これでウィジウィグの設置ができました。
ウィジウィグ設置のデモページ

先ほどはSnowというテーマを使用しましたが、他にもBubbleというテーマも用意されています。
先ほどのCSS読み込みを下記に変更します。

<link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.bubble.css">

JavaScriptのthemeを変更します。

var quill = new Quill('#editor', {
  theme: 'bubble'
});

これでテーマをBubbleに変更できました。
Snowはエディタ上部にボタンが表示されていたのに対して、Bubbleはテキストを選択すると吹き出しでボタンが表示されます。
Bubbleのデモページ

ここまでで簡単な動作は確認できましたが、実際に使用する場合は入力した内容をinputなどに追加して、フォーム送信する必要があります。
エディタに入力した内容をinputに動的に追加する処理も作成してみます。

<div id="editor"></div>
<input type="text" id="editor-input" name="editor-input">

ウィジウィグ用の要素とフォーム送信用のinputを設置しました。
今回は表示確認用にtypeをtextにしていますが、実際は見える必要がないのでhiddenにしてください。

JavaScriptでinputに動的に追加する処理を追加します。

var editor = document.getElementById('editor');
var editorInput = document.getElementById('editor-input');

var quill = new Quill(editor, {
  theme: 'snow'
});

quill.on('text-change', function(delta, oldDelta, source) {
  var editorHtml = editor.querySelector('.ql-editor').innerHTML;
  editorInput.value = editorHtml;
});

text-changeはQuillで用意されているイベントで、エディタの内容が変更された時に発火します。
HTMLを含めた内容一式を取得するメソッドが見つからなかったので、innerHTMLで取得してinputを書き換える形で実装しています。
inputに反映するデモページ

オプション

オプションの中からいくつか試してみます。
オプションについて詳しくは公式のドキュメントをご確認ください。

modules

modulesはウィジウィグに含めるモジュールとそのオプションを設定します。

API

メソッドやイベントの中からいくつか試してみます。
詳しくは公式のドキュメントをご確認ください。

Content

Contentのデモページ

Formatting

Formattingのデモページ

Selection

Selectionのデモページ

Editor

Editorのデモページ

Events

Eventsのデモページ