Rich Text Editor

Rich text editor / WYSIWYG component for blogs, comments, and content editing with formatting controls.

Interactive Example

Try the editor below - use the toolbar buttons or keyboard shortcuts to format your text!

Rich Text Content


          <.rich_text_editor field={@form[:content]} label="Content" />

Features

Text Formatting

Bold (Ctrl+B)
Italic (Ctrl+I)
Underline (Ctrl+U)
Strikethrough

Headings

Heading 1 (H1)
Heading 2 (H2)
Heading 3 (H3)
Paragraph (P)

Lists & Alignment

Bullet Lists
Numbered Lists
Text Alignment (Left, Center, Right, Justify)
Indentation (Tab / Shift+Tab)

Special Features

Links (Ctrl+K)
Blockquotes
Code Blocks
Undo/Redo (Ctrl+Z / Ctrl+Y)
Clear Formatting

With Initial Content

Pre-filled Editor

Welcome

This is pre-filled content with formatting!

Item 1
Item 2


          <.rich_text_editor
            field={@form[:content]}
            value={"<h2>Welcome</h2><p>This is <strong>pre-filled</strong> content!</p>"}
            label="Pre-filled Editor"
          />

Keyboard Shortcuts

Formatting

Ctrl+B - Bold
Ctrl+I - Italic
Ctrl+U - Underline
Ctrl+K - Insert Link

Editing

Ctrl+Z - Undo
Ctrl+Y - Redo
Tab - Indent
Shift+Tab - Outdent

Note

The rich text editor uses a JavaScript hook (RichTextEditorHook) to sync content with the hidden input field for form submission.

All formatting is handled client-side using the browser's document.execCommand API. The HTML content is automatically synced to a hidden input field for form submission.

Props

Prop	Type	Default	Description
field	Phoenix.HTML.FormField	-	Form field struct
label	string	nil	Label text
placeholder	string	"Start typing..."	Placeholder text
value	string	nil	Initial HTML content