Nextjs React 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:

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

Example

import React from "react";
// react plugin that creates text editor
import ReactQuill from "react-quill";

const modules = {
  toolbar: [
    ["bold", "italic"],
    ["link", "blockquote", "code", "image"],
    [
      {
        list: "ordered"
      },
      {
        list: "bullet"
      }
    ]
  ]
};

class Quill extends React.Component {
  state = {
    reactQuillText: ""
  };
  handleReactQuillChange = value => {
    this.setState({
      reactQuillText: value
    });
  };
  render() {
    return (
      <>
        <ReactQuill
          value={this.state.reactQuillText}
          onChange={this.handleReactQuillChange}
          theme="snow"
          modules={modules}
        />
      </>
    );
  }
}

export default Quill;

Props

If you want to see more examples and properties please check the official react-quill Documentation.

You can also check the Official Github Repository.

Also, please check the official QuillJS Documentation and its Official Github Repository.