from Quill ImageHandler Module

because Quill ImageHandler has some issues, when copied content that contains image both text, it will upload above all with a single image,image and text merge to a single image, no text part; its not too good. then, i add a logic,if it contain image and text. it will stop upload function, we can upload image by upload buttons at the top toolbar。

Quill ImageHandler logic, it will upload above all with a single image,image and text merge to a single image, no text part

this is change logic image, it will stop upload function,text is copyied, image need you upload by upload buttons at the top toolbar。

of course，we can also upload image,replace base64 image width uploaded urls before we post form, see html-base64-img-to-upload

npm install quill-image-upload-v2 --save

import Quill from "quill";
import ImageUploadV2 from "quill-image-uploader-v2";

Quill.register("modules/ImageUploadV2", ImageUploadV2);

const quill = new Quill(editor, {
  // ...
  modules: {
    // ...
    ImageUploadV2: {
      upload: (file) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(
              "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png"
            );
          }, 3500);
        });
      },
    },
  },
});

balabala

see Quill ImageHandler

Quill ImageHandler is below :

A module for Quill rich text editor to allow images to be uploaded to a server instead of being base64 encoded. Adds a button to the toolbar for users to click, also handles drag,dropped and pasted images.

Demo

Install

Install with npm:

npm install quill-image-uploader --save

Webpack/ES6

import Quill from "quill";
import ImageUpload from "quill.imageUpload.js";

Quill.register("modules/imageUpload", imageUpload);

const quill = new Quill(editor, {
  // ...
  modules: {
    // ...
    imageUpload: {
      upload: (file) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(
              "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png"
            );
          }, 3500);
        });
      },
    },
  },
});

Quickstart (React with react-quill)

React Example on CodeSandbox

Quickstart (script tag)

Example on CodeSandbox

// A link to quill.js
<script src="/dist/quill.js"></script>
<script src="/dist/quill.imageUpload.min.js"></script>

Quill.register("modules/imageUpload", imageUpload);

var quill = new Quill(editor, {
  // ...
  modules: {
    // ...
    imageUpload: {
      upload: file => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(
              "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png"
            );
          }, 3500);
        });
      }
    }
  }
});