wysiwygエディタを探していたので「Quill」を利用してみた
現在Laravelで求人サイトを開発しています。その機能の一部でwysiwygが使いたく、利用したことがないライブラリを使ってみようと調べ始めたのがきっかけです。今回は、Laravel5.7のプロジェクトに「Quill」を導入します。
[ 目次 ]
はじめに
こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。
現在Laravelで求人サイトを開発しています。その機能の一部でwysiwygエディタが使いたく、利用したことがないライブラリを使ってみようと調べ始めたのがきっかけです。
今回はLaravel5.7のプロジェクトに「Quill」を導入しました。その際のまとめをベースにしたQuillの紹介記事になります。
Laravel自体の機能は利用しませんので環境などの説明は省略します。
Quillのインストールはnpm or yarnで行うことを前提としています。
検証環境のバージョンは以下です。
# npm -v
6.4.1
# yarn -v
1.7.0
ES6でコーディングしていたので説明もES6とします。
Quillとは
「Quill」とはブログなどの記事を書くときのwysiwygエディタになります。
公式サイトに"Your powerful rich text editor."とあるようにリッチなエディターを提供してくれます。
- 公式サイト : < https://quilljs.com/>
- github : < https://github.com/quilljs/quill>
Quickstart を試す
まずは、公式サイトの Quickstart を試してみましょう。
以下の内容のHTMLファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
</body>
</html>
作成後、ブラウザで確認してみてください。
以下のQuillのエディタが表示されます
このサンプルはCDNのソースを利用したものです。
npm or yarn を利用してインストールを試してみましょう。
quillのインストール
■ npmを利用する場合
$ npm install quill@1.3.6 --save
■ yarnを利用する場合
$ yarn add quill@1.3.6
公式サイトの Download もご確認ください。
利用方法（js）
公式サイトの Configuration からのソース抜粋とします。
今回は、Laravelのプロジェクトにinstallし、ES6でコーディングしています。
Quillの読み込み
QuillはES6でコーディングされているようなので以下のようにimportできます。
import Quill from 'quill';
セクレタを指定する方法
const editor = new Quill('.editor');
VanillaJSでcontainerを取得する方法
const container = document.getElementById('editor');
const editor = new Quill(container);
jQueryでcontainerを取得する方法
const container = $('.editor').get(0);
const editor = new Quill(container);
Optionの指定方法
const options = {
debug: 'info',
modules: {
toolbar: '#toolbar'
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
};
const editor = new Quill('#editor', options);
それぞれのOptionの説明は、公式サイトの Configuration - Options をご確認ください。
利用方法（css）
今回は、sassにimportする形で利用していきます。
(Laravelでは、resources/sass/app.scss が用意されていますが、app.scss内にimportする形を想定しています）
Themeはsnowを利用します。
【補足】
Quillのスタイルは、Stylus でコーディングされていました
ビルドされたCSSを読み込む
@import '~quill/dist/quill.snow.css';
Laravel案件で利用したソース紹介
実際に利用する際は、汎用的に利用したいので以下のようにコーディングにしました。
（あくまでサンプルになります。そのままでは動かないケースがあります）
HTML側では、Quillエディタ用のdivタグと値を送るためのhiddenのフォームを用意しました。
classに js-quill-editor が設定されているタグをQuillエディタとして利用します。
<!-- HTML -->
・・・
<div class="js-quill-editor" data-target="#content" style="height: 150px;">{!! old('content', optional($model)->content) !!}</div>
<input id="content" name="content" type="hidden" value="{{ old('content', optional($model)->content) }}">
・・・
JS側では複数のエディタを読み込みめるように.js-quill-editorをループさせてそれぞれ設定していきます。
Quillエディタはデフォルトでエディタ内のHTMLを取得するfunctionが用意されていません。
innerHTMLから取得できますが、functionを用意して利用しています。
// JS
import * as $ from 'jquery';
import Quill from 'quill';
// 拡張してエディタ内のHTMLを取得するfunctionを用意
Quill.prototype.getHtml = function() {
return this.container.querySelector('.ql-editor').innerHTML
}
$(document).ready(() => {
$('.js-quill-editor').each((index, e) => {
const $target = $($(e).data('target'))
const editor = new Quill(e, {
modules: {
// 今回toolbarは、hタグと'bold', 'italic', 'underline'のスタイルのみ用意
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
]
},
theme: 'snow'
});
editor.on('text-change', (delta) => {
if (delta) {
// Quillエディタ内のHTMLをformに設定する
const html = editor.getHtml();
$target.val(html)
}
})
})
});
Quillのイベントについては、こちら をご確認ください。
今回は以下のような求人登録ページを作成していました・・・
最後に
今回は簡単な利用しかしていませんので、今後も利用していきたいライブラリです！
- 画像のアップロード
- command + z の巻き戻し操作
- モジュール拡張
など試していきたいです。
