nextjs-rich-text-editor

Custom Rich Text Editor

A modern, feature-rich text editor component for React/Next.js applications.

Features

• ✅ Rich Text Formatting: Bold, italic, underline, headings
• ✅ Custom Colors: Text and background colors with a custom color picker
• ✅ Lists: Ordered and unordered lists
• ✅ Tables: Modern, responsive tables with hover effects
• ✅ Images: Upload, resize, and style images
• ✅ Responsive Design: Works on all screen sizes
• ✅ Customizable Dimensions: Set custom width and height
• ✅ Modern UI: Beautiful, professional interface

Installation

npm install nextjs-rich-text-editor

## Usage

import { useState } from "react"
import CustomEditor from "nextjs-rich-text-editor"

function App() {
  const [editorData, setEditorData] = useState("")

  return (
    <CustomEditor 
      value={editorData} 
      onChange={setEditorData}
      width="100%"        // Optional: default "100%"
      height="500px"      // Optional: default "500px"
      className="my-4"    // Optional: additional CSS classes
    />
  )
}

## Props

| Prop        | Type     | Default   | Description                   |
| ----------- | -------- | --------- | ----------------------------- |
| `value`     | string   | `""`      | Editor content (HTML)         |
| `onChange`  | function | —         | Callback when content changes |
| `width`     | string   | `"100%"`  | Editor width (CSS value)      |
| `height`    | string   | `"500px"` | Editor height (CSS value)     |
| `className` | string   | `""`      | Additional CSS classes        |

## Examples

### Basic Usage
<CustomEditor value={content} onChange={setContent} />

### Custom Dimensions
<CustomEditor 
  value={content} 
  onChange={setContent}
  width="800px"
  height="300px"
/>

### With Custom Styling
<CustomEditor 
  value={content} 
  onChange={setContent}
  className="shadow-xl border-2 border-blue-200"
/>