⌘K

rich-editor component

Drop-in semantic component. See examples, sizes, variants, and source.

WYSIWYG editor built from a rich-editor wrapper containing a toolbar of toolbar-btn / toolbar-select controls and a contenteditable editor-content region. Pick a feature density with minimal, standard, or full; pick a presentation with dark-theme, inline, or compact. Toolbar wiring and command execution are handled by rich-editor.js.

Rich Editor System

Minimal Editor

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

Standard Editor

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

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

Inline Editor

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

This editor demonstrates custom toolbar styling and action buttons.

Compact Editor

Compact editor for limited space.

Usage Examples

Basic Implementation

<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

// 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');

Class API Reference

Type Class / Attribute Usage Notes
Base rich-editor Outer container with border, toolbar, and content slots Always required
toolbar Top control strip with formatting buttons Hosts .toolbar-group children
toolbar-group Cluster of related controls separated by a divider Inside .toolbar
editor-content Contenteditable region; inherits typography Set contenteditable="true" + a placeholder
editor-footer Optional bottom strip — word/char counts, status Sibling of .editor-content
Variants minimal Bare-bones editor; white toolbar background Modifier on rich-editor
standard Subtle shadow + grey toolbar Modifier on rich-editor
full Stronger shadow; ideal for multi-row toolbars Modifier on rich-editor
Themes / Layout dark-theme Dark background and toolbar Modifier on rich-editor
inline Borderless; toolbar floats on selection Pair with .floating-toolbar
fullscreen Lock to viewport for distraction-free editing Toggled by JS
source-view Render the contenteditable as raw source Toggled by JS
Toolbar Items toolbar-btn Square 28px control inside the toolbar Pair with data-command
toolbar-btn.active Marks the current command (e.g. bold on) Toggled by JS
toolbar-select Native <select> styled to match toolbar Pair with data-command
toolbar-color-picker Wraps a button + hidden color-input Inside .toolbar-group
toolbar-multi-row Stacks toolbar rows vertically Modifier on toolbar
toolbar-row Single horizontal row inside a multi-row toolbar Inside .toolbar.toolbar-multi-row
State / Float floating-toolbar Absolute, centered toolbar for inline editing Pair with hidden until selection
focused Purple ring around the editor Toggled by JS on focus
data-command / data-value Identify which execCommand to run On toolbar-btn / toolbar-select