rich-editor Component

Rich Editor System

A powerful WYSIWYG editor with comprehensive formatting tools, media insertion, and customizable toolbar options. Features multiple variants from minimal to full-featured, supporting rich text editing with real-time preview.

Minimal Editor

Preview Code
Copy

This is a minimal rich text editor with basic formatting tools.

Standard Editor

Preview Code
Copy

Welcome to the Rich Text Editor

This is a standard rich text editor with comprehensive formatting tools including:

  • Text formatting (bold, italic, underline, strikethrough)
  • Paragraph alignment options
  • Lists and indentation
  • Links and images

Editor Themes

Dark Theme Editor

Preview Code
Copy

This editor features a dark theme with a focused set of tools for distraction-free writing.

Inline Editor

Preview Code
Copy

Click on the text below to edit it inline:

This is an inline editor. Click anywhere in this text to start editing. The toolbar will appear when you select text.

Editor with Custom Actions

Custom Action Buttons

Preview Code
Copy

This editor demonstrates custom toolbar styling and action buttons.

Compact Editor

Preview Code
Copy

Compact editor for limited space.

Usage Examples

Basic Implementation

Preview Code
Copy 
<div class="rich-editor minimal">
    <div class="toolbar">
        <div class="toolbar-group">
            <button class="toolbar-btn" data-command="bold">
                <i class="icon bold w-4 h-4"></i>
            </button>
            <button class="toolbar-btn" data-command="italic">
                <i class="icon italic w-4 h-4"></i>
            </button>
        </div>
    </div>
    <div class="editor-content" contenteditable="true">
        Your content here...
    </div>
</div>

JavaScript Initialization

Preview Code
Copy 
// Initialize all rich editors on page
document.addEventListener('DOMContentLoaded', function() {
    RichEditor.init();
});

// Initialize specific editor
const editor = document.querySelector('.rich-editor');
RichEditor.initEditor(editor);

// Custom command execution
document.execCommand('bold', false, null);
document.execCommand('createLink', false, 'https://example.com');