ウィジウィグエディタの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に反映するデモページ

オプション

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

placeholder エディタが空の時のplaceholderを設定。
デモページ
readOnly エディタを読み取り専用(編集不可)にするかどうかを設定。
初期値はfalse。
デモページ
scrollingContainer エディタのスクロールバーを出す要素を設定。
theme 使用するテーマ名を設定。
設定できる値は’bubble’か’snow’。
formats エディタで許可するフォーマットのホワイトリストを設定。
設定できる項目はこちら
デモページ

modules

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

Toolbar ツールバーの項目の設定。
ボタン追加のデモページ
カスタムHTMLで設置のデモページ
カスタムハンドラーのデモページ
Keyboard ショートカットの設定。
デモページ
History 入力の取り消しややり直しの設定。
delay: 履歴を保存する間隔を設定。初期値は1000。
maxStack: 履歴の最大保持数を設定。初期値は100。
userOnly: ユーザーの操作による変更のみ履歴に残すかどうかを設定。初期値はfalse。
デモページ
Clipboard コピーやカット、ペーストに関する設定。
Syntax コードブロックを拡張してハイライト表示する設定。

API

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

Content

Contentのデモページ

deleteText エディタ内のテキストの削除。
getContents エディタ内のコンテンツ取得。
getLength エディタ内の文字数取得。
getText エディタ内のテキスト取得。
insertEmbed エディタ内に要素を挿入。
insertText エディタ内にテキストを挿入。
setContents エディタを指定した内容で上書き。
setText エディタのコンテンツを指定したテキストで設定。

Formatting

Formattingのデモページ

format 選択したテキストを指定した形にフォーマット。
formatLine 指定したテキストの行を指定した形にフォーマット。
formatText 指定したテキストを指定した形にフォーマット。
getFormat 指定したテキストのフォーマットを取得。
removeFormat 指定したテキストのフォーマットを削除。

Selection

Selectionのデモページ

getBounds 指定したテキストの位置などを取得。
getSelection 選択しているテキストの位置と範囲を取得。
setSelection 指定したテキストを選択状態にする。

Editor

Editorのデモページ

blur エディタからフォーカスを外す。
disable エディタの編集を不可にする。
enable エディタの編集を可能にするかどうか。
focus エディタにフォーカスを当てる。
hasFocus フォーカスが当たっているかどうかを返す。

Events

Eventsのデモページ

text-change エディタの内容が変更された時に発火。
selection-change 選択範囲が変更された時に発火。
editor-change text-changeまたはselection-changeのイベントが発火する時に発火。
off イベントハンドラーを削除する。
on イベントハンドラーを追加する。
once 1回だけ実行されるイベントハンドラーを追加する。

 

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

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031