Quillエディタにimgタグで画像を添付するモジュール【Laravel】

この記事では、Quillエディタにimgタグを使用して画像を添付する方法を解説します。サンプルコードも書いてみたので、参考にしてみてください。

Quillエディタの初期化

Quillエディタを使う準備が整ったら、次は実際にエディタを初期化する作業です。JavaScriptを使って、Quillエディタを適用する対象のtextarea要素を特定し、その上でエディタを初期化します。

#editorがIDとして設定されたtextarea要素に対してQuillエディタが初期化されます。

var quill = new Quill('#editor', {
  theme: 'snow'
});

画像を添付できるQuillモジュール

Quillエディタを導入したら、画像を添付する機能を実装したいと考えるかもしれません。幸いにもQuillエディタは、画像を添付するためのモジュールを提供しています。

下記のコードは、Quillエディタに画像を添付するためのオプション設定とコールバック処理の例です。必要に応じて、uploadUrlを適切な画像アップロード処理が実装されたエンドポイントに変更してください。

// 画像添付のオプションを定義
var options = {
  uploadUrl: '/upload', // 画像をアップロードするURLを指定
  method: 'POST', // HTTPリクエストメソッドを指定
  name: 'image', // アップロードするファイルのフィールド名を指定
  withCredentials: false, // クロスオリジンリクエストで認証情報を送信しないように指定
  headers: {
    'X-CSRF-TOKEN': '{{ csrf_token() }}' // CSRFトークンを指定（Laravelの場合）
  },
  // 画像をアップロードする際の成功・失敗時の処理を定義
  callbackOK: (serverResponse, next) => {
    next(serverResponse.url);
  },
  callbackKO: serverError => {
    console.log(serverError);
  }
};

// 画像添付モジュールを初期化
var imageHandler = function() {
  var range = this.quill.getSelection();
  this.quill.updateContents(new Delta().retain(range.index).delete(range.length).insert({ image: 'loading.gif' }), 'user');
  this.quill.setSelection(range.index + 1);
  var fileInput = this.container.querySelector('input.ql-image[type=file]');
  if (fileInput == null) {
    fileInput = document.createElement('input');
    fileInput.setAttribute('type', 'file');
    fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
    fileInput.classList.add('ql-image');
    fileInput.addEventListener('change', () => {
      var formData = new FormData();
      formData.append(options.name, fileInput.files[0]);
      fetch(options.uploadUrl, {
        method: options.method,
        headers: options.headers,
        body: formData,
        credentials: options.withCredentials ? 'include' : 'omit'
      }).then(response => {
        if (response.ok) {
          return response.json();
        }
        return Promise.reject(response.statusText);
      }).then(data => {
        options.callbackOK(data, url => {
          this.quill.insertEmbed(range.index, 'image', url, 'user');
          this.quill.setSelection(range.index + 1);
        });
      }).catch(error => {
        console.error('Upload failed');
        options.callbackKO(error);
      });
    });
    this.container.appendChild(fileInput);
  }
  fileInput.click();
};
quill.getModule('toolbar').addHandler('image', imageHandler);