Nextjs Quill

Pro Component

The Nextjs Quill is a powerful rich text editor built for compatibility and extensibility.
Keep reading our Nextjs Quill examples and learn how to use this plugin.

Usage

CSS

In order to use this plugin on your page you will need to import the following styles inside your pages/_app.js:

Copy

import "quill/dist/quill.core.css";

Example

Copy

function Example() {
  React.useEffect(async () => {
    // we make a dynamic import for the QuillJS, as this component is not made to work on SSR
    const Quill = (await import("quill")).default;
    new Quill(document.querySelector('[data-toggle="quill"]'), {
      modules: {
        toolbar: [
          ["bold", "italic"],
          ["link", "blockquote", "code", "image"],
          [
            {
              list: "ordered",
            },
            {
              list: "bullet",
            },
          ],
        ],
      },
      placeholder: "Quill WYSIWYG",
      theme: "snow",
    });
  }, []);
  return (
    <>
      <div
        data-quill-placeholder="Quill WYSIWYG"
        data-toggle="quill"
      />
    </>
  );
}

export default Example;

Props

Please check the official QuillJS Documentation and its Official Github Repository.