modern-rich-editor

v1.0.0

Published

5 months ago

A modern, feature-rich WYSIWYG text editor for web applications

Downloads

0High
0Medium
0Low

jeeneesh

rich-text editor wysiwyg text-editor html-editor content-editor web-editor

Rich Editor

A modern, feature-rich WYSIWYG text editor for web applications with enhanced UI and beautiful modal dialogs.

✨ Features

Rich Text Formatting: Bold, italic, underline, strikethrough
Font Controls: Font family and size selection
Color Controls: Text and background color pickers
Text Alignment: Left, center, right, and justify alignment
Lists: Bullet and numbered lists
Indentation: Increase and decrease text indentation
Media Insertion: Links, images, and tables with beautiful modal dialogs
Special Functions: Clear formatting, HTML view toggle
Undo/Redo: Full undo and redo functionality
Auto-save: Configurable auto-save with callbacks
Theme Support: Light and dark themes
Responsive Design: Works on all screen sizes
Keyboard Shortcuts: Common shortcuts like Ctrl+B, Ctrl+I, etc.

🚀 Quick Start

Installation

npm install modern-rich-editor
# or
yarn add modern-rich-editor

Basic Usage

import { RichEditor } from 'modern-rich-editor';

const editor = new RichEditor({
    container: '#editor',
    placeholder: 'Start typing...',
    theme: 'light',
    height: '400px'
});

HTML Usage

<!DOCTYPE html>
<html>
<head>
    <title>Rich Editor Demo</title>
</head>
<body>
    <div id="editor"></div>
    
    <script type="module">
        import { RichEditor } from './dist/index.esm.js';
        
        const editor = new RichEditor({
            container: '#editor',
            placeholder: 'Start typing your content...',
            theme: 'light',
            height: '300px',
            autoSave: true,
            onContentChange: (content) => {
                console.log('Content changed:', content);
            }
        });
    </script>
</body>
</html>

📖 API Reference

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | container | string \| HTMLElement | Required | CSS selector or DOM element | | placeholder | string | 'Start typing...' | Placeholder text | | theme | 'light' \| 'dark' | 'light' | Editor theme | | height | string | '400px' | Editor height | | width | string | '100%' | Editor width | | toolbar | boolean | true | Show toolbar | | statusBar | boolean | true | Show status bar | | autoSave | boolean | false | Enable auto-save | | autoSaveInterval | number | 5000 | Auto-save interval (ms) | | onContentChange | function | - | Content change callback | | onSave | function | - | Save callback |

Methods

| Method | Description | |--------|-------------| | getContent() | Get plain text content | | setContent(content) | Set plain text content | | getHTML() | Get HTML content | | setHTML(html) | Set HTML content | | focus() | Focus the editor | | blur() | Blur the editor | | enable() | Enable the editor | | disable() | Disable the editor | | isEnabled() | Check if editor is enabled | | undo() | Undo last action | | redo() | Redo last action | | clear() | Clear all content | | save() | Trigger save | | destroy() | Destroy the editor |

🎨 Enhanced Features

Beautiful Modal Dialogs

Link Insertion: Professional link insertion modal with URL and text fields
Image Insertion: Enhanced image modal with live preview and alt text
Table Creation: Custom table creation with row and column selection

Enhanced Toolbar Icons

Better Visual Symbols: Improved alignment icons (⫷ ⫸ ⫹ ⫺)
Indentation Controls: Dedicated buttons for increase/decrease indent (← →)
Professional Styling: Clean, modern interface with proper spacing

Live Image Preview

Real-time Preview: See images before inserting them
URL Validation: Only valid URLs show previews
Error Handling: Broken images show helpful error messages

🛠️ Development

Setup

# Install dependencies
npm install

# Build the package
npm run build

# Development mode with watch
npm run dev

Project Structure

rich-editor/
├── src/
│   ├── RichEditor.ts      # Main editor class
│   └── index.ts           # Entry point
├── dist/                  # Built files
├── demo.html              # Demo page
├── usage-example.html     # Usage example
├── test-image.svg         # Test image
├── package.json           # Package configuration
├── rollup.config.js       # Build configuration
├── tsconfig.json          # TypeScript configuration
└── README.md              # This file

🌐 Live Demo

Run the demo locally:

# Start the server
python3 -m http.server 3003

# Open in browser
open http://localhost:3003/demo.html

📦 Publishing

# Build the package
npm run build

# Publish to npm
npm publish

🤝 Contributing

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

📄 License

MIT License - see LICENSE file for details.

🆘 Support

If you encounter any issues or have questions, please open an issue on GitHub.

Rich Editor - A modern, feature-rich WYSIWYG text editor for web applications.