React Quill Editors

A fully customizable React rich text editor with no external dependencies. Built from scratch using only React and native browser APIs. Features a comprehensive toolbar similar to popular Markdown editors with file operations, media insertion, and advanced formatting capabilities.

✨ Features

✅ No external dependencies - Built entirely with React and native browser APIs
✅ Markdown editor-style interface - Comprehensive toolbar with file operations, formatting, and media tools
✅ Fully customizable - Enable/disable features via props
✅ Modern UI - Clean, responsive design with professional styling
✅ TypeScript support - Full TypeScript definitions included
✅ Accessible - Keyboard navigation and screen reader support
✅ Lightweight - Minimal bundle size
✅ File operations - Save, delete, close functionality
✅ Media support - Insert links, images, videos, and attachments
✅ Advanced formatting - Headings, code blocks, quotes, horizontal rules
✅ Color controls - Text and background color options
✅ Font controls - Size and family selection
✅ Alignment tools - Left, center, right, justify alignment
✅ List support - Bullet and numbered lists
✅ Preview mode - Real-time content preview

🚀 Installation

npm install react-quill-editors

📖 Quick Start

import { RichTextEditor } from 'react-quill-editors';

function App() {
  const [content, setContent] = useState('');

  return (
    <RichTextEditor
      features={{
        // File operations
        save: true,
        delete: true,
        close: true,
        
        // Text formatting
        heading: true,
        bold: true,
        italic: true,
        underline: true,
        strikethrough: true,
        
        // Font controls
        fontSize: true,
        fontFamily: true,
        
        // Colors
        color: true,
        bgColor: true,
        
        // Alignment
        align: true,
        
        // Lists
        lists: true,
        
        // Media
        link: true,
        image: true,
        video: true,
        
        // Special formatting
        code: true,
        quote: true,
        horizontalRule: true,
        
        // Additional features
        attachment: true,
        preview: true,
      }}
      value={content}
      onChange={setContent}
      onSave={() => console.log('Saving...')}
      onDelete={() => console.log('Deleting...')}
      onClose={() => console.log('Closing...')}
      onPreview={() => console.log('Preview...')}
      placeholder="Start typing..."
    />
  );
}

📚 API Reference

RichTextEditor Props

Prop	Type	Default	Description
`features`	`EditorFeatures`	`{}`	Object to enable/disable specific features
`value`	`string`	`''`	The HTML content of the editor
`onChange`	`(value: string) => void`	-	Callback when content changes
`placeholder`	`string`	`'Start typing...'`	Placeholder text when editor is empty
`className`	`string`	`''`	Additional CSS class name
`style`	`React.CSSProperties`	`{}`	Inline styles for the editor
`readOnly`	`boolean`	`false`	Makes the editor read-only
`disabled`	`boolean`	`false`	Disables the editor completely
`onSave`	`() => void`	-	Callback for save button
`onDelete`	`() => void`	-	Callback for delete button
`onClose`	`() => void`	-	Callback for close button
`onPreview`	`() => void`	-	Callback for preview button

EditorFeatures

Category	Feature	Prop	Description
File Operations
	Save	`save: true`	Save button with callback
	Delete	`delete: true`	Delete button with callback
	Close	`close: true`	Close button with callback
Text Formatting
	Heading	`heading: true`	Insert headings (H1-H6)
	Bold	`bold: true`	Toggle bold text
	Italic	`italic: true`	Toggle italic text
	Underline	`underline: true`	Toggle underlined text
	Strikethrough	`strikethrough: true`	Toggle strikethrough text
Font Controls
	Font Size	`fontSize: true`	Change text size (8px-36px)
	Font Family	`fontFamily: true`	Change font family
Colors
	Text Color	`color: true`	Change text color
	Background Color	`bgColor: true`	Change background color
Alignment
	Alignment	`align: true`	Text alignment (left, center, right, justify)
Lists
	Lists	`lists: true`	Bullet and numbered lists
Media
	Link	`link: true`	Insert links
	Image	`image: true`	Insert images
	Video	`video: true`	Insert videos
Special Formatting
	Code	`code: true`	Insert code blocks
	Quote	`quote: true`	Insert blockquotes
	Horizontal Rule	`horizontalRule: true`	Insert horizontal rules
Additional Features
	Attachment	`attachment: true`	File attachment functionality
	Preview	`preview: true`	Preview mode with callback

💡 Usage Examples

Basic Editor

import { RichTextEditor } from 'react-quill-editors';

function BasicEditor() {
  const [content, setContent] = useState('');

  return (
    <RichTextEditor
      features={{
        bold: true,
        italic: true,
        underline: true,
      }}
      value={content}
      onChange={setContent}
    />
  );
}

Markdown-Style Editor

import { RichTextEditor } from 'react-quill-editors';

function MarkdownStyleEditor() {
  const [content, setContent] = useState('');

  const handleSave = () => {
    console.log('Saving content:', content);
  };

  const handleDelete = () => {
    if (confirm('Are you sure?')) {
      setContent('');
    }
  };

  return (
    <RichTextEditor
      features={{
        // File operations
        save: true,
        delete: true,
        close: true,
        
        // Text formatting
        heading: true,
        bold: true,
        italic: true,
        underline: true,
        strikethrough: true,
        
        // Font controls
        fontSize: true,
        fontFamily: true,
        
        // Colors
        color: true,
        bgColor: true,
        
        // Alignment
        align: true,
        
        // Lists
        lists: true,
        
        // Media
        link: true,
        image: true,
        video: true,
        
        // Special formatting
        code: true,
        quote: true,
        horizontalRule: true,
        
        // Additional features
        attachment: true,
        preview: true,
      }}
      value={content}
      onChange={setContent}
      onSave={handleSave}
      onDelete={handleDelete}
      placeholder="Start typing your content..."
    />
  );
}

Read-Only Editor

import { RichTextEditor } from 'react-quill-editors';

function ReadOnlyEditor() {
  const content = '<p><strong>This is read-only content</strong> with <em>various formatting</em>.</p>';

  return (
    <RichTextEditor
      features={{
        bold: true,
        italic: true,
        underline: true,
        fontSize: true,
        fontFamily: true,
        color: true,
        align: true,
      }}
      value={content}
      readOnly={true}
    />
  );
}

Custom Styled Editor

import { RichTextEditor } from 'react-quill-editors';

function CustomStyledEditor() {
  const [content, setContent] = useState('');

  return (
    <RichTextEditor
      features={{
        bold: true,
        italic: true,
        color: true,
        align: true,
        lists: true,
      }}
      value={content}
      onChange={setContent}
      className="custom-editor"
      style={{
        border: '2px solid #007bff',
        borderRadius: '8px',
        minHeight: '400px',
        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
      }}
    />
  );
}

🎨 Available Options

Font Sizes

8px, 10px, 12px, 14px, 18px, 24px, 36px

Font Families

Arial, Times New Roman, Courier New, Georgia, Verdana, Helvetica

Color Palette

The editor includes a comprehensive color palette with 15 predefined colors:

Basic: Black, White
Primary: Red, Green, Blue
Secondary: Yellow, Magenta, Cyan
Extended: Gray, Maroon, Olive, Purple, Teal, Navy

🌐 Browser Support

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+

🛠️ Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Clean build directory
npm run clean

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Akshay Bhalala

🙏 Acknowledgments

Built with React and TypeScript
Uses native browser document.execCommand() API
Inspired by modern Markdown editors and rich text editors
Special thanks to the React community for inspiration and best practices

📦 Keywords

react
text-editor
rich-text
wysiwyg
editor
typescript
markdown
content-editor
html-editor
formatting
toolbar
no-dependencies
lightweight
customizable
accessible
modern-ui
file-operations
media-insertion
color-picker
font-controls
alignment-tools
list-support
preview-mode

react-quill-editors

React Quill Editors

✨ Features

🚀 Installation

📖 Quick Start

📚 API Reference

RichTextEditor Props

EditorFeatures

💡 Usage Examples

Basic Editor

Markdown-Style Editor

Read-Only Editor

Custom Styled Editor

🎨 Available Options

Font Sizes

Font Families

Color Palette

🌐 Browser Support

🛠️ Development

🤝 Contributing

📄 License

👨‍💻 Author

🙏 Acknowledgments

📦 Keywords

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

react-quill-editors

React Quill Editors

✨ Features

🚀 Installation

📖 Quick Start

📚 API Reference

RichTextEditor Props

EditorFeatures

💡 Usage Examples

Basic Editor

Markdown-Style Editor

Read-Only Editor

Custom Styled Editor

🎨 Available Options

Font Sizes

Font Families

Color Palette

🌐 Browser Support

🛠️ Development

🤝 Contributing

📄 License

👨‍💻 Author

🙏 Acknowledgments

📦 Keywords

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads