Quill-editor-nextjs NPM

Installation

Run the following command to install the package:

npm install quill-editor-nextjs

Copy Fonts to public/fonts/

This editor ships with font files located in: 📁 node_modules/quill-editor-nextjs/dist/esm/fonts/ 📁 node_modules/quill-editor-nextjs/dist/cjs/fonts/

To use them, copy the fonts to your project's public/fonts/ folder:

mkdir -p public/fonts cp -r node_modules/quill-editor-nextjs/dist/esm/fonts/* public/fonts/

⚠ Note: Some fonts included in this package are licensed for personal use only.
Please check individual font licenses before distributing them.

Import quill-editor.css in Your Layout

To apply Quill's styling globally, import quill-editor.css inside your Next.js layout.js (or layout.tsx):

// app/layout.js (or layout.tsx) import "quill-editor-nextjs/quill-editor.css"; // Imports Quill styles + font mappings

export default function RootLayout({ children }) { return (

<html lang="en">
  <body>{children}</body>
</html>

); }

This ensures that Quill's fonts and styles are loaded properly across your entire application. 3. Use the Editor in Your Code

You can now import and use the Quill editor inside your Next.js project. 👉 Important: Ensure you use braces {} when importing QuillEditor. Example: Using QuillEditor in app/page.js

"use client";

import React from "react"; import { QuillEditor } from "quill-editor-nextjs";

export default function Page() { return (

<main>
  <h1>My Quill Editor</h1>
  <QuillEditor />
</main>

); }

This will render a fully-functional Quill editor with the toolbar and font selection. License

🔖 Licensed under GPL (GNU General Public License). See the LICENSE file for full details.

react nextjs quill editor toolbar

5 months ago

5 months ago

5 months ago