Want to show me some ❤️ for the hard work I do on this gem? You can use the following PayPal link: https://paypal.me/nvtit93. Any amount is welcome and let me tell you it feels good to be appreciated. Even a dollar makes me super excited about all of this.

quill-upload

A plugin for uploading image, video, attachment in Quill 🌇

• 🌟 upload a image, video, attachment when it is inserted, and then replace the base64-url with a http-url
• 🌟 preview the image, video, attachment which is uploading with a loading animation
• 🌟 when the image, video, attachment is uploading, we can keep editing the content including changing the image's, video's or attachment's position or even delete the image, video or attachment.

Install

npm install quill-upload --save

Start

import Quill from "quill";
import "quill/dist/quill.snow.css";
import { ImageHandler, VideoHandler, AttachmentHandler } from "quill-upload";

// register quill-upload
Quill.register("modules/imageHandler", ImageHandler);
Quill.register("modules/videoHandler", VideoHandler);
Quill.register("modules/attachmentHandler", AttachmentHandler);

new Quill("#editor", {
  theme: "snow",
  modules: {
    toolbar: ["image", "video"],
    imageHandler: {
      upload: file => {
        // return a Promise that resolves in a link to the uploaded image
        return new Promise((resolve, reject) => {
          ajax().then(data => resolve(data.imageUrl));
        });
      }
    },
    videoHandler: {
      upload: file => {
        // return a Promise that resolves in a link to the uploaded image
        return new Promise((resolve, reject) => {
          ajax().then(data => resolve(data.videoUrl));
        });
      }
    },
    attachmentHandler: {
      upload: file => {
        // return a Promise that resolves in a link to the uploaded image
        return new Promise((resolve, reject) => {
          ajax().then(data => resolve(data.attachmentUrl));
        });
      }
    }
  }
});

Example

cd example
npm install
npm start