Zenn
📋

wysiwygエディタのQuillの使い方

2023/04/20に公開
JavaScript
editor
Quill
#
wysiwyg
tech

目次

  • Quillの始め方
  • ツールバーの編集

Quillの始め方

Quillを始める手順は以下の通りです。

  1. Quillをインストールする
  2. jsファイルにQuillの初期化を記述する
  3. htmlにQuillを表示するためのタグを用意する

1. Quillをインストールする

ターミナルで以下を実行します。

ターミナル
npm install quill

2. jsファイルにQuillの初期化を記述する

Quillを記述するためのjsのファイルを作成し、そこに以下を記述する。

quill.js
import Quill from "quill";
import "quill/dist/quill.snow.css"

export const initialQuill = () => {
    const quill = new Quill("#editor", {
        theme: "snow"
    })
}
initialQuill();

importしているのはQuillのライブラリのjsファイルと、cssファイルです。
jsファイルによってQuillの設定ができるようになり、cssファイルによって、Quillが用意してくれている見た目にしてくれます。見た目は自分で後からカスタマイズできます。

3. htmlにQuillを表示するためのタグを用意する

Quillの設定ができたので、それをhtmlに記述し、画面に表示させていきます。
以下のように書きます。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="./main.js"></script>
    <title>Quill</title>
</head>
<body>
    <div id="editor"></div>
</body>
</html>

<div id="editor"></div>ここにQuillのエディタが表示されます。
「2. jsファイルにQuillの初期化を記述する」でQuillを初期化した際に、以下を記述したと思います。ここで"#editor"と記述しているので、htmlのid="editor"のタグにQuillが表示されるようになります。

quill.js
const quill = new Quill("#editor", {
theme: "snow"
})

画面に以下のようにエディタが表示されれば完了です。

ツールバーの編集

ツールバーとはエディタ上部にある編集機能のことです。
デフォルトでは、見出しにする、太字にする、リストにするなどがありますが、
これらはほんの一部に過ぎず、他にもたくさん編集機能があります。
また、ツールバーの位置は動かすことができます。
以下の手順でツールバーを編集していきます。

  1. ツールバーオプションを作成する
  2. Quillにツールバーオプションを設定する
  3. Quillにツールバーの位置を設定するオプションをつける
  4. htmlにツールバーを表示させるためのタグを記述する

1. ツールバーオプションを作成する

まず初めにツールバーオプションを作成します。
以下の内容をquill.jsファイルのinitialQuillの中に記述してください。

quill.js
const toolbarOptions = [
['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': [] }],

["image"],

['clean']                                         // remove formatting button
    ];

2. Quillにツールバーオプションを設定する

次にQuillに先ほどのツールバーオプションを設定します。
quillを以下の内容に書き換えてください。

quill.js
const quill = new Quill("#editor", {
theme: "snow",
modules: {
    toolbar: toolbarOptions
}
})

オプションにmodulesを追加し、その中にtoolbarを記述。そこに先ほどのツールバーオプションを設定します。
画面表示が以下のようになれば完了です。

全てのツールバーオプションが知りたい場合は、公式ドキュメントのフォーマットのページにに載っています。
https://quilljs.com/docs/formats/

3. Quillにツールバーの位置を設定するオプションをつける

quillの内容を以下に書き換えてください。

quill.js
const quill = new Quill("#editor", {
theme: "snow",
modules: {
    toolbar: "#toolbarOptions"
    // toolbar: toolbarOptions
}
})

こうすることで、ツールバーはhtml内のid="toolbarOptions"のタグに設定されます。

4. htmlにツールバーを表示させるためのタグを記述する

htmlに先ほど設定したツールバーを表示させるためのidを持つタグを記述します。
以下の内容をhtml内の好きな位置に記述してください。

index.html
<div id="toolbarOptions">
	<!-- Add font size dropdown -->
	<select class="ql-size">
	    <option value="small"></option>
	    <!-- Note a missing, thus falsy value, is used to reset to default -->
	    <option selected></option>
	    <option value="large"></option>
	    <option value="huge"></option>
	</select>
	<!-- Add a bold button -->
	<button class="ql-bold"></button>
	<!-- Add subscript and superscript buttons -->
	<button class="ql-script" value="sub"></button>
	<button class="ql-script" value="super"></button>
	<button class="ql-image"></button>
</div>

画面を確認し、記述した位置にツールバーが来ていれば完了です。

Discussion