JavaScriptにはブログのような記事を書くことができるWYSIWYG(カスタマイズ可能な高機能エディタ)エディタプラグインがいくつかありますが、私のおすすめ（これしか使ったことない…）のQuill.jsというプラグインの使い方を紹介します。
ちなみに無料・商用利用OKのプラグインです。
目次
Quill.jsとは？
Quill.jsはオシャレで高機能なテキストエディタをHTML内に追加することができるJavaScriptのプラグインです。
公式サイト：https://quilljs.com
Quill.jsのサイトトップに3パターンのデモ画面があるので興味のある方は試しに触ってみてください。
Quill.jsの特徴
文字の大きさや色の変更、下線のような基本的なものだけでなく、画像や動画（恐らくYouTobeのみ）の追加、難しい数式やプログラミング言語の投稿（コードブロック）も可能です。
また、文字の書式や色の種類などをカスタマイズすることができます。
エディタ自体は、大きさやデザインをCSSで細かく調整することができます。
詳しくはドキュメントをご覧ください。全部英語ですが笑
https://quilljs.com/docs/quickstart/
Anybookでも使っています
私が運営しているオリジナル問題集・ノート作成サービスのAnybookでもテキストエディタにQuill.jsを使用しています。
さっそく実装してみよう
実際に実装する方法を解説します。
今回はデフォルトの状態のものを実装してみます。
１．Quill.jsの導入
Quill.jsはGithubからソースをダウンロードできますが、今回はCDNで参照するようにします。
Quill.jsのドキュメントにあるように、HTML内に以下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <!-- テキストエディタ「Quilljs」のライブラリ --> <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet"> </head> <body> </body> </html> |
これで、Quillのライブラリを使う準備が出来ました。
エディタを追加する準備として、id付きの「div」タグを追加しておきます。
|
1 2 3 |
<body> <div id="quill-editor"></div> </body> |
このdivタグの中にテキストエディタが生成されます。
2．デフォルトのテキストエディタを生成する
準備したdivタグにテキストエディタを生成します。
JavaScriptで生成するので、JavaScriptを書く準備をします。これはHTML内でもjsファイルでもどっちでも構いません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <!-- テキストエディタ「Quilljs」のライブラリ --> <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet"> </head> <body> <div id="quill-editor"></div> <script> // quillテキストエディタを生成する var quill = new Quill('#quill-editor', { theme: 'snow' }); </script> </body> </html> |
これだけで設定は終わりです！
コードについては後述しますので、一度ページを見てみましょう。
こんな簡単でいいのかというくらい簡単に実装出来ましたね。
さっき書いたコードですが、「new Quill(“表示させる要素のid名”,{ 設定 });」という構図になっています。
設定の中で１つだけ「theme」という設定を行っています。
Quill.jsには「snow」「bubble」というテーマがあり、それぞれツールバーの表示方法に違いがあります。
「snow」はエディタの上にツールバーが表示されるテーマ。今回はこれを採用しました。
「bubble」は編集したいテキストをドラッグで範囲指定するとツールチップのように表示されるテーマです。
テーマについてのドキュメント：https://quilljs.com/docs/themes/
また、quillという変数にnewしているので、この後で変数quillからエディタの情報を取得・操作することができます。
３．テキストエディタをカスタマイズする
ここまでで十分な方は必要ありませんが、このままだと文字色の設定とか画像の投稿が出来ません。
Quillの表示条件やレイアウトのカスタマイズをいちいち行うのも面倒なので、jsファイルを作り関数を作ってしまいましょう。コピペでOKです。
【関数の内容・目的】
・ツールバーに表示させる内容を増やす
・記事のように編集不可のページを作成する
・既に文章が入っている状態でエディタを表示させる
・スマホで表示された時bubbleテーマに変更
・MacとiPhoneで表示させるとなぜかbrタグが消えてしまうので保管する処理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 |
/* 拡張テキストエディタ「Quill」に関する処理 */ /** テキストエディタの生成(中身空) 引数１： 作成する場所のid 戻り値： Quillエディタの生成情報 */ function QuillEditorMake(make_id) { var toolbarOptions; // ツールバーの機能設定 var quill; // エディタ情報 var themes = set_themes(); // エディタのテーマ（snow , bubble） // ツールバー機能の設定 toolbarOptions = [ //見出し [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //フォント種類 [{ 'font': [] }], //文字寄せ [{ 'align': [] }], //太字、斜め、アンダーバー ['bold', 'italic', 'underline'], //文字色 [{ 'color': [] }, //文字背景色 { 'background': [] } ], // リスト [{ 'list': 'ordered' }, { 'list': 'bullet' } ], //インデント [{ 'indent': '-1' }, { 'indent': '+1' }], //画像挿入 ['image'], //動画 ['video'], //数式 ['formula'], //URLリンク ['link'] ]; //渡ってきたID名に「#」をくっつける make_id = '#' + make_id; //エディタの情報を生成 quill = new Quill(make_id, { modules: { //ツールバーの設定 toolbar: toolbarOptions }, placeholder: '入力してください', //ツールバーのあるデザイン theme: themes //'snow' or 'bubble' }); return quill; } /** テキストエディタの生成(中身有り) 引数１： 作成する場所のid 引数２： 表示させるJSONテキスト 戻り値： Quillエディタの生成情報 */ function QuillUpdateEditorMake(make_id, json_text) { var toolbarOptions // ツールバーの機能設定 var quill // エディタ情報 var themes = set_themes(); // エディタのテーマ（snow , bubble） // ツールバー機能の設定 toolbarOptions = [ //見出し [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //フォント種類 [{ 'font': [] }], //文字寄せ [{ 'align': [] }], //太字、斜め、アンダーバー ['bold', 'italic', 'underline'], //文字色 [{ 'color': [] }, //文字背景色 { 'background': [] } ], // リスト [{ 'list': 'ordered' }, { 'list': 'bullet' } ], //インデント [{ 'indent': '-1' }, { 'indent': '+1' }], //画像挿入 ['image'], //動画 ['video'], //数式 ['formula'], //URLリンク ['link'] ]; //渡ってきたID名に「#」をくっつける make_id = '#' + make_id; //エディタの情報を生成 quill = new Quill(make_id, { modules: { //ツールバーの設定 toolbar: toolbarOptions }, placeholder: '入力してください', //ツールバーのあるデザイン theme: themes //'snow' or 'bubble' }); //表示させる文章データを取得 json_data = JSON.parse(json_text); //データを表示 quill.setContents(json_data); // brが失われる場合の補完 make_id = make_id + ' .ql-editor'; var htmlstr = String($(make_id).html()); $(make_id).html(set_quill_br(htmlstr)); return quill; } /** テキストページ生成 エディタで作ったデータを表示させる側（編集不可）の設定 引数： 作成する場所のid 引数２： 表示させるJSONテキスト 戻り値： Quillエディタの生成情報 */ function QuillPageMake(make_id, json_text) { var quill; //エディタ情報 var json_data; //エディタに表示させるデータ（json形式） //渡ってきたID名に「#」をくっつける make_id = '#' + make_id; //エディタの情報を生成 quill = new Quill(make_id, { //ツールバー無デザイン theme: 'bubble' }); //エディタを入力不可にする quill.disable(); //表示させる文章データを取得 json_data = JSON.parse(json_text); //データを表示 quill.setContents(json_data); $(make_id).html = set_quill_br(String($(make_id).html)); // brが失われる場合の補完 var htmlstr = String($(make_id).html()); $(make_id).html(set_quill_br(htmlstr)); return quill; } // テーマ設定（PCとスマホで切り替える画面幅で判定） function set_themes() { var themes; if (window.parent.screen.width > 800) { themes = "snow"; } else { themes = "bubble"; } return themes; } |
【使い方】
◆ QuillEditorMake関数
通常のエディタを生成します。引数にid名を記入する。
◆ QuillUpdateEditorMake関数
通常のエディタに文章データを挿入した状態で生成します。引数にid名と文章データ(JSON形式)を記入する。
◆ QuillPageMake関数
編集出来ない表示だけのエディタを生成します。ブログ記事の表示などに使えます。引数にid名と文章データ(JSON形式)を記入する。
3つの関数ともにQuillオブジェクトを戻り値で指定しているので、変数で取得出来ます。
上記した文章データ(JSON形式)とは、Quillは入力された情報をJSON形式で出力・読み込みする機能が備わっています。
出力は「quill.getContents()」、読み込みは「quill.setContents(JSONデータ)」で行います。
ドキュメント：https://quilljs.com/docs/api/#getcontents
私感ですが、スマホだとツールバーが上にあるレイアウトのsnowタイプだと結構使いづらい印象だったので、画面サイズがスマホ相当のデバイスで表示された場合bubbleタイプに切り替えるようにしています。
Anybookでもゆくゆくはこの方法を実装しようと思います。
実装は以下のように行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="ja"> <head> <!-- テキストエディタ「Quilljs」のライブラリ --> <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet"> <!-- Quillカスタマイズjs --> <script type="text/javascript" src="quillcustom.js"></script> </head> <body> <div id="quill-editor_1"></div> <div id="quill-editor_2"></div> <div id="quill-editor_3"></div> <script> // 通常のエディタ var quill_1 = QuillEditorMake("quill-editor_1") // 通常のエディタ（文章あり） var quill_2 = QuillUpdateEditorMake("quill-editor_2" ,quill_1.getContent) // 編集不可エディタ（記事表示用） var quill_3 = QuillPageMake("quill-editor_1" ,quill_1.getContent) </script> </body> </html> |
先ほどに比べ、ツールバーのアイコンが増えたと思います。
まとめ
簡単に実装出来て、データのやり取りも行えるので重宝しているエディタプラグインの紹介でした。
Quill.jsには他にもたくさんの拡張機能が備わっていて、さらに上記したようにカラーパレットに表示させる色のカスタマイズや、書式の指定などお好みのエディタを作成することができますのでお試しを！
別の機会に詳しいカスタマイズ方法も紹介したいと思います！
