wysiwygエディタのQuillの使い方
目次
- Quillの始め方
- ツールバーの編集
Quillの始め方
Quillを始める手順は以下の通りです。
- Quillをインストールする
- jsファイルにQuillの初期化を記述する
- htmlにQuillを表示するためのタグを用意する
1. Quillをインストールする
ターミナルで以下を実行します。
npm install quill
2. jsファイルにQuillの初期化を記述する
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に記述し、画面に表示させていきます。
以下のように書きます。
<!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が表示されるようになります。
const quill = new Quill("#editor", {
theme: "snow"
})
画面に以下のようにエディタが表示されれば完了です。
ツールバーの編集
ツールバーとはエディタ上部にある編集機能のことです。
デフォルトでは、見出しにする、太字にする、リストにするなどがありますが、
これらはほんの一部に過ぎず、他にもたくさん編集機能があります。
また、ツールバーの位置は動かすことができます。
以下の手順でツールバーを編集していきます。
- ツールバーオプションを作成する
- Quillにツールバーオプションを設定する
- Quillにツールバーの位置を設定するオプションをつける
- htmlにツールバーを表示させるためのタグを記述する
1. ツールバーオプションを作成する
まず初めにツールバーオプションを作成します。
以下の内容をquill.jsファイルのinitialQuillの中に記述してください。
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を以下の内容に書き換えてください。
const quill = new Quill("#editor", {
theme: "snow",
modules: {
toolbar: toolbarOptions
}
})
オプションにmodulesを追加し、その中にtoolbarを記述。そこに先ほどのツールバーオプションを設定します。
画面表示が以下のようになれば完了です。
全てのツールバーオプションが知りたい場合は、公式ドキュメントのフォーマットのページにに載っています。
https://quilljs.com/docs/formats/
3. Quillにツールバーの位置を設定するオプションをつける
quillの内容を以下に書き換えてください。
const quill = new Quill("#editor", {
theme: "snow",
modules: {
toolbar: "#toolbarOptions"
// toolbar: toolbarOptions
}
})
こうすることで、ツールバーはhtml内のid="toolbarOptions"のタグに設定されます。
4. htmlにツールバーを表示させるためのタグを記述する
htmlに先ほど設定したツールバーを表示させるためのidを持つタグを記述します。
以下の内容を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