HTML Text Editor
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The HtmlTextEditor component provides a rich text editing experience with HTML output. Built with contentEditable and document.execCommand, it offers a WYSIWYG editor with formatting toolbar and real-time HTML generation. Perfect for content management systems, blog editors, email composition, and any application requiring rich text input.
Basic Usage
Blog Post Editor
Email Composer
Content Management
Simple Note Editor
Quick Notes
Auto-saved • Last updated: 5:27:55 PM
Properties
HtmlTextEditor
| Property | Type | Description |
|---|---|---|
initialValue | string | Initial HTML content for the editor. Default is empty string. |
onChange | (value: string) => void | Callback fired when content changes. Receives HTML string. |
className | string | Additional CSS classes for the editor container. |
Toolbar Features
The HtmlTextEditor includes a built-in formatting toolbar with the following options:
Text Formatting
- Bold - Make text bold (Ctrl+B)
- Italic - Make text italic (Ctrl+I)
- Underline - Underline text (Ctrl+U)
- Strikethrough - Strike through text
Text Alignment
- Align Left - Left align text
- Align Center - Center align text
- Align Right - Right align text
- Justify - Justify text
Lists and Structure
- Bullet List - Create unordered lists
- Numbered List - Create ordered lists
- Indent - Increase indentation
- Outdent - Decrease indentation
Advanced Features
- Link - Insert/edit hyperlinks
- Image - Insert images (URL-based)
- Horizontal Rule - Insert horizontal dividers
- Clear Formatting - Remove all formatting
Keyboard Shortcuts
The editor supports standard keyboard shortcuts:
- Ctrl+B - Bold
- Ctrl+I - Italic
- Ctrl+U - Underline
- Ctrl+Z - Undo
- Ctrl+Y - Redo
- Ctrl+A - Select all
- Tab - Indent (in lists)
- Shift+Tab - Outdent (in lists)
Accessibility
The HtmlTextEditor component includes accessibility features:
- Keyboard Navigation - Full keyboard support for all formatting options
- Screen Reader Support - Toolbar buttons have proper ARIA labels
- Focus Management - Clear focus indicators and logical tab order
- Semantic HTML - Generates proper semantic HTML structure
- Content Editable - Uses standard contentEditable for native editing support
- Toolbar Labels - All formatting buttons have descriptive labels
Common Use Cases
The HtmlTextEditor component is perfect for:
- Content Management - Blog posts, articles, and page content
- Email Composition - Rich text email creation
- Documentation - User manuals and help content
- Comments Systems - Rich text comments and replies
- Note Taking - Personal or collaborative note applications
- Product Descriptions - E-commerce product content
- News Articles - Editorial content creation
- Forum Posts - Community discussion platforms
Best Practices
- Content Validation - Always sanitize HTML output on the server side
- Auto-Save - Implement periodic auto-saving for longer content
- Preview Mode - Provide preview functionality for content review
- Mobile Support - Test editor functionality on mobile devices
- Performance - Debounce onChange callbacks for better performance
- Accessibility - Ensure proper keyboard navigation and screen reader support
- Content Limits - Set reasonable content length limits
- Error Handling - Handle edge cases and provide user feedback
Security Considerations
⚠️ Important Security Notes:
- HTML Sanitization - Always sanitize HTML content on the server before storing or displaying
- XSS Prevention - Never trust user-generated HTML content without proper sanitization
- Content Security Policy - Implement CSP headers to prevent script injection
- Input Validation - Validate and filter HTML content according to your security requirements
- Safe Rendering - Use proper HTML sanitization libraries when rendering user content