「vue-quill-editor」はVue.js製のリッチテキストエディタを実装するライブラリです。その内部構造は、GitHubで★32,685を誇る有名なテキストエディタライブラリ「Quill」で構築されています。
Quillは、シンプルなAPIで構成されているので開発者向けにも使いやすいですし、クロスプラットフォームでデスクトップ、タブレット、スマホのすべての最新ブラウザをサポートしているので、Vue CLIやNuxt.jsのプロジェクトでエディタを導入する際には候補の一つとして考えていいと思います。
開発環境
- @vue/cli 4.5.15
- vue@2.6.14
インストール
まずはプロジェクトにvue-quill-editorをインストールします。
npm i vue-quill-editor実装
vue-quill-editorのインストールが完了したら、コンポーネント内でエディタを使えるようにします。実装は開発元のGithubを参考にしました。
コンポーネント
<template>
<div>
<quillEditor
ref="myQuillEditor"
v-model="content"
:options="editorOption"
/>
<div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
},
data: () => ({
content: "Hellow World",
editorOption: {
theme: 'snow'
},
}),
}
</script>コンポーネントでやっていることは、大きく3つです。
- vue-quill-editorのインポート
- コンポーネント定義
- エディタのオプションを定義
1. vue-quill-editorのインポート
import { quillEditor } from 'vue-quill-editor'
// エディタのテーマ
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'2. コンポーネント定義
export default {
components: {
quillEditor
},
}3. エディタのオプションを定義
data: () => ({
content: "Hellow World",
editorOption: {
theme: 'snow'
},
}),vue-quill-editor実装結果
上記の手順で実装すると、リッチテキストエディタが表示されます。
ツールバーのカスタマイズ
リッチテキストエディタでは、文字を太字にしたり色をつけたり、リストや画像を挿入できるのが大きな特徴です。vue-quill-editorではどのツールをエディタに組み込むのかを制御できます。
下記を見てみましょう。
export default {
components: {
quillEditor
},
data: () => ({
content: "Hellow World",
editorOption: {
theme: 'snow',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
],
}
},
}),
}dataのeditorOptionにmodulesオブジェクトを定義し、その中にtoolbar配列を用意します。このmodules > toolbarを定義しなければ一通り全てのツールがデフォルトでセットされます。ただ、よくわからないツールも多いので最低限にしたい場合は、modules > toolbarを使ってツール数を制御しましょう。
ツールバーなどのモジュールの導入については、下記の公式ドキュメントを参照してください。
【番外編】CDNの場合
全体を通して不明点やご指摘がありましたら、コメントを送信ください。
