react-quill-editors

v1.0.5

Published

10 months ago

A fully customizable React rich text editor with no external dependencies. Features a comprehensive toolbar similar to popular Markdown editors with file operations, media insertion, and advanced formatting capabilities.

Downloads

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