Test 1: toolbar-items Attribute
Using toolbar-items="undo redo | bold italic underline"
Expected: Toolbar should show: Undo, Redo | Bold, Italic, Underline
Test 2: Full Toolbar (All Native Plugins)
Using toolbar-items with multiple groups and all 39 native plugins
Full Feature Test
This editor should have a complete toolbar with all groups visible.
- Undo/Redo buttons
- Text formatting (Bold, Italic, Underline, Strikethrough)
- Colors (Text Color, Background Color)
- Typography (Font Size, Font Family)
- Block types (Heading)
- Alignment
- Lists
- Insert (Link, Image, Table)
- Code and Blockquote
- Clear Formatting
Test 3: Auto Toolbar (No toolbar-items specified)
No toolbar-items attribute - should automatically create toolbar from registered plugins
Expected: Toolbar should auto-generate from the 4 specified plugins
Test 5: Readonly Toggle
Toggle the editor between editable and readonly states using the button below.
This editor can be toggled readonly.
Test 6: Placeholder
Shows a placeholder when the editor is empty.
Test 7: Theme Switcher
Switch between default and dark themes dynamically.
Click the button to toggle theme.
Test 8: Custom Event Handling
Listen for editor-focus and editor-blur events and display status.
Focus and blur this editor to see events.
Test 4: Dynamic API & Events
Demonstrates onchange event, getContent(), setContent(), and dynamic behaviors.
Try editing, clicking the buttons, and observe the output below.
Edit this text. Changes will be shown below.