Quill ImageHandler Module for NextJS

A modifed alternative of Quill Image Upload Plugin to support NextJS

The original plugin uses css import in node_modules, which is not supported by the latest NextJS.

Credits

The full credit for the editor plugin goes to Quill Image Upload Plugin and this is a modificaion to support the NextJS.

Therefore, keep upto date on its issue tracker whether the issue is fixed.

Install

Install with npm:

1npm install @writergate/quill-image-uploader-nextjs --save

Webpack/ES6

1import Quill from "quill";
2import ImageUploader from "quill.imageUploader.js";
3import '@writergate/quill-image-uploader-nextjs/dist/quill.imageUploader.min.css';
4
5Quill.register("modules/imageUploader", ImageUploader);
6
7const quill = new Quill(editor, {
8  // ...
9  modules: {
10    // ...
11    imageUploader: {
12      upload: (file) => {
13        return new Promise((resolve, reject) => {
14          setTimeout(() => {
15            resolve(
16              "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png"
17            );
18          }, 3500);
19        });
20      },
21    },
22  },
23});

Note: It's also important that you create a quill component and dynamically import the component with SSR: false for NextJS.

e.g: No SSR Editor component includes all the above code.

1
2const QuillNoSSR = dynamic(
3  () => import('src/components/no-ssr-editor').then(md => md.default),
4  { ssr: false }
5);
6