Package Exports

@roel.id/quill-image-browser
@roel.id/quill-image-browser/media-browser.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@roel.id/quill-image-browser) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

quill-image-browser

npm (scoped) NPM npm

quill-image-browser is image browser module for Quill text editor. By default, Quill embed image into post as base64 string, which make the post unnecessarily large. There is quill-image-uploader module that overcome this problem. And better, this module can intercept dragged or pasted image, and upload to server. But how if one wants to pick previously uploaded image? Then quill-image-browser come to rescue.

Usage

<script src="/js/quill/quill.min.js"></script>
<script src="/js/media-browser.min.js"></script>
<script>
  let quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: {
        container: [['bold', 'italic'], ['image']],
        handlers: {
          image: () => {
            new MediaBrowser({
              parent: '.ql-container',
              upload: file => {// upload file to server, return url,
                return new Promise(resolve => {
                  // const formData = new FormData();
                  // formData.append("file", file);
                  // axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data'} })
                  //   .then(resp => resolve(resp.data) )
                  resolve({ url: 'https://picsum.photos/id/23/300/200.webp', name: 'Forks' });
                })
              },
              list: keyword => { // list of image [{url, title}], filtered by keyword
                return new Promise(resolve => {
                  // axios.post('/get-images', { keyword }, ).then(resp => resolve(resp.data));
                  let images = [
                    { url: 'https://picsum.photos/id/20/300/200.webp', name: 'Mac & iPhone' },
                    { url: 'https://picsum.photos/id/21/300/200.webp', name: 'High heel' },
                    { url: 'https://picsum.photos/id/22/300/200.webp', name: 'Walking' },
                  ];
                  resolve(keyword ? images.filter(e => e.name.match(new RegExp(keyword, 'i'))) : images);
                })
              },
              callback: url => {
                let range = quill.getSelection(true);
                quill.insertEmbed(range.index, "image", `${url}`);
              },
            }).open();
          }
        }
      }
    }
  })
</script>

Image Browser

Using together with `quill-image-uploader`

We can use quill-image-browser along side with quill-image-uploader by creating a new class that extends ImageUploader.

class ImageBrowser extends ImageUploader {
  constructor(quill, options) {
    super(quill, options);
    this.range = null;
    const toolbar = quill.getModule("toolbar");
    toolbar.addHandler("image", this.browseLocalImage.bind(this));
    this.mediaBrowser = new MediaBrowser({
      parent: '.ql-container',
      upload: options.upload,
      list: options.list,
      callback: this.callback.bind(this),
    });
  }

  browseLocalImage() {
    this.range = this.quill.getSelection();
    this.mediaBrowser.open();
  }

  callback(images) {
    this.quill.insertEmbed(this.range.index, "image", `${images[0]}`, "user");
  }
}

In this class, we replace the image handler, and let parent class catch image drop or paste event as usual.

@roel.id/quill-image-browser

Package Exports

Readme

quill-image-browser

Usage

Using together with quill-image-uploader

Using together with `quill-image-uploader`