Skip to main content
The Editor component requires a Flux Pro license. Learn more about Flux Pro.

​
Overview

The Editor component provides a powerful WYSIWYG rich text editing experience. Built for content creation, it includes formatting tools, media embedding, and seamless Livewire integration for real-time content updates.

​
Basic Usage

Create a simple rich text editor: 
<flux:editor
    wire:model="content"
    placeholder="Start writing..."
/>

​
With Toolbar

Customize available formatting options: 
<flux:editor
    wire:model="post.content"
    :tools="['bold', 'italic', 'underline', 'link', 'heading', 'list']"
/>
Enable all editing capabilities: 
<flux:editor
    wire:model="article.body"
    :tools="[
        'heading',
        'bold',
        'italic',
        'underline',
        'strike',
        'link',
        'bulletList',
        'orderedList',
        'blockquote',
        'codeBlock',
        'image',
        'table',
        'horizontalRule',
    ]"
    placeholder="Write your article..."
/>

​
With Character Limit

Set a maximum character count: 
<flux:editor
    wire:model="bio"
    :max-length="500"
    show-count
/>

​
Read-only Mode

Display formatted content without editing: 
<flux:editor
    :content="$post->content"
    readonly
/>

​
Custom Styling

Apply custom editor styling: 
<flux:editor
    wire:model="content"
    class="min-h-[400px]"
    :editor-class="'prose prose-lg max-w-none'"
/>

​
With Image Upload

Enable image uploading: 
<flux:editor
    wire:model="content"
    :tools="['image']"
    wire:upload-image="handleImageUpload"
/>

public function handleImageUpload($image)
{
    $path = $image->store('editor-images', 'public');
    
    return Storage::url($path);
}

​
Markdown Support

Enable markdown shortcuts: 
<flux:editor
    wire:model="content"
    markdown
/>

​
Use Cases

Blog Posts

Create and edit blog articles with full formatting capabilities.

Documentation

Write technical documentation with code blocks and structured content.

Email Composition

Compose formatted emails with links, lists, and basic styling.

Product Descriptions

Create rich product descriptions with images and formatting.

​
Features

​
Text Formatting

  • Bold, italic, underline, and strikethrough
  • Headings (H1 through H6)
  • Text alignment (left, center, right, justify)
  • Text and background colors
  • Font size adjustments

​
Content Blocks

  • Bullet and numbered lists
  • Blockquotes
  • Code blocks with syntax highlighting
  • Horizontal rules
  • Tables
  • Image embedding and upload
  • Video embedding (YouTube, Vimeo)
  • Link insertion with title attributes
  • File attachments

​
Productivity

  • Markdown shortcuts (type # for heading, * for list)
  • Keyboard shortcuts (Cmd/Ctrl + B for bold, etc.)
  • Undo/redo functionality
  • Word and character count
  • Auto-save drafts

​
Toolbar Configuration

Available toolbar options:
ToolDescription
headingHeading levels 1-6
boldBold text
italicItalic text
underlineUnderline text
strikeStrikethrough text
linkInsert/edit links
bulletListBullet point list
orderedListNumbered list
blockquoteBlockquote styling
codeBlockCode block
imageInsert image
videoEmbed video
tableInsert table
horizontalRuleHorizontal divider
textAlignText alignment
textColorText color
highlightBackground color

​
Keyboard Shortcuts

  • Cmd/Ctrl + B - Bold
  • Cmd/Ctrl + I - Italic
  • Cmd/Ctrl + U - Underline
  • Cmd/Ctrl + K - Insert link
  • Cmd/Ctrl + Z - Undo
  • Cmd/Ctrl + Shift + Z - Redo
  • Cmd/Ctrl + Shift + 7 - Ordered list
  • Cmd/Ctrl + Shift + 8 - Bullet list

​
Output Format

The editor stores content as HTML: 
// In your component
public $content; // Stores HTML output

// Display in your view
{!! $content !!}

// Or sanitize first
{!! clean($content) !!}

​
Accessibility

The Editor component includes:
  • ARIA labels for toolbar buttons
  • Keyboard navigation throughout
  • Screen reader support
  • Focus management
  • Semantic HTML output
For security, always sanitize editor output before displaying it. Consider using packages like HTMLPurifier or Laravel’s built-in clean() helper.

Build docs developers (and LLMs) love

Get started for freeTalk to us