Quillとは
Quill（クイル）は、オープンソースのWYSIWYG1エディタです。Webアプリケーション上にリッチな表現力を持つエディタを実装することができます。
Quillは商用利用できる？
2024年３月現在、Quillは商用利用が可能です。
Quillの導入
Quillの導入方法は3つあります。今回は最も手軽なCDNで導入しました。
CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet">npmでインストール
npm install [email protected]公式からダウンロードして配置
<script src="js/quill.js" type="text/javascript"></script>
<link href="css/quill.snow.css" rel="stylesheet">
Quillの実装
HTML要素の配置
今回は<div id=”editor”>要素にQuillエディタを設定していきます2。
今回は、Quillエディタに入力された文字列をデータベースに保存するために<form>を普通にsubmitしてサーバーサイド（PHP）に値を渡してやります。したがい、値を渡すために非表示の<textarea>要素も配置します。ただ、この工程はajaxを使って非同期にて保存するなら必要ないでしょう。
<form name="fm" method="POST">
<div id="editor"></div>
<!-- 非表示のテキストエリア(値渡し用) -->
<textarea name="content" id="content" style="display:none"></textarea>
<div>
<button type="submit" name="update" onclick="return clickSubmit();">保存</button>
</div>
</form>Quillの初期化（JavaScript）
Quillのツールバーにはどんな機能を詰め込むかが設定可能です。今回はめいっぱい詰め込んでみました。
// ツールバーの設定
toolbar_options = [
// 見出し
[{'header': [1, 2, 3, 4, false]}],
// フォント
[{'font': []}],
// 文字寄せ
[{'align': []}],
// 太字、イタリック、アンダーライン
['bold', 'italic', 'underline'],
// 文字色
[{'color': []},
// 文字の背景色
{'background': []}],
// リスト
[{'list': 'ordered'},{'list': 'bullet'}],
// インデント
[{'indent': '-1'}, {'indent': '+1'}],
// 画像
['image'],
// 動画
['video'],
// 数式
['formula'],
// リンク
['link']
];
// Quillの初期化
const quill = new Quill('#editor', { // div要素のIDを指定
modules: {
// ツールバーの設定
toolbar: toolbar_options
},
// テーマの指定
theme: 'snow'
});Quillを初期化に成功すると、以下のようなリッチテキストエディタが現れます。
見出し（H~）、太字、イタリック、画像の挿入などの表現が可能です。
Quillで入力されたデータを取得
以下のJavaScriptコードでは、submitボタンがクリックされた際にQuillのエディタに入力された内容を取得し、非表示の<textarea>に値をセットしています。後は普通に〇〇.phpにPOSTしてやります。
function clickSubmit(){ // submitボタンクリック時に発動
var data = quill.getContents(); // Quillに入力されたデータを取得(Delta形式)
data = JSON.stringify(data); //JSON形式の文字列に変換
$("#content").val(data); // <textarea>に値をセットしてやる
return true;
}PHP側では特に変わったことはしていないので省略します。文字列をエスケープしてMySQLにINSERTするだけです。
<?php
$str = htmlspecialchars($_POST["content"], ENT_QUOTES, 'UTF-8');
?>MySQLにINSERTされたデータをphpMyAdminで見てみます。JSON形式で保存されています。
データベースに保存されたデータをQuillのエディタに反映する
まずサーバーサイド（PHP）にてMySQLのテーブルから普通にSELECTでデータを取得してから、htmlspecialchars_decode()してエスケープ前のJSONに戻してやります。
<?php
$content_text = htmlspecialchars_decode($content->content);
?>次にPHPからJavaScriptにデータを渡してやります。改行コードが「\n」だと「JSON.parse()」でエラーになってしまうので「\\n」に変換してやります。データベースに保存する前に処理しておくか、それとも更新画面で処理するかはケースバイケースでしょう。
最後に「quill.setContents()」を実行してやればQuillエディタに値が反映されます。
var content_text = "<?php echo $content_text ?>";
var json = content_text.replace(/\n/g,'\\n'); // 改行コードを置換(\n → \\n)
json = JSON.parse(json);
quill.setContents(json);おわりに
今回はQuillを使ったWYSIWYGエディタの実装を紹介しました。最後までお読みいただきありがとうございました。
コメント