• Overview
• Basic Usage
• Props
  • Toolbar Options
• Examples
  • Blog Post Editor
  • Comment Editor with Minimal Toolbar
  • Custom Toolbar
  • Livewire Form Integration
  • Read-Only Display
• Slots
• Accessibility

Pro Component — This component requires an Aura UI Pro license.

Overview#

The Editor component provides a WYSIWYG rich text editing experience with a configurable toolbar. It supports common formatting options including bold, italic, underline, strikethrough, headings, lists, and links. Content is stored as HTML and integrates with Livewire via wire:model.live for real-time syncing.

Basic Usage#

<x-aura::editor
    label="Content"
    name="content"
/>

Props#

Toolbar Options#

Available toolbar items for custom configuration:

['bold', 'italic', 'underline', 'strikethrough', 'link', 'list-ordered', 'list-unordered', 'heading']

Default Toolbar Preview#

Minimal Toolbar Preview#

Custom Toolbar Preview#

Examples#

Blog Post Editor#

<x-aura::editor
    label="Article Body"
    name="body"
    placeholder="Write your article..."
    minHeight="400px"
    wire:model.live="body"
/>

Comment Editor with Minimal Toolbar#

<x-aura::editor
    label="Your Comment"
    name="comment"
    toolbar="bold,italic,link"
    placeholder="Write a comment..."
    minHeight="120px"
    wire:model="comment"
/>

Custom Toolbar#

<x-aura::editor
    label="Product Description"
    name="description"
    :toolbar="['bold', 'italic', 'heading', 'list-unordered', 'list-ordered', 'link']"
    placeholder="Describe the product..."
    minHeight="250px"
/>

Livewire Form Integration#

<!-- Blade view -->
<form wire:submit="save">
    <div class="space-y-4">
        <x-aura::input
            label="Title"
            name="title"
            wire:model="title"
        />

        <x-aura::editor
            label="Content"
            name="content"
            wire:model.live="content"
            placeholder="Write your post content..."
            minHeight="350px"
        />

        @error('content')
            <p class="text-sm text-red-600">{{ $message }}</p>
        @enderror

        <div class="flex justify-end gap-3">
            <x-aura::button type="button" variant="ghost" wire:click="cancel">
                Cancel
            </x-aura::button>
            <x-aura::button type="submit">
                Publish
            </x-aura::button>
        </div>
    </div>
</form>

// Livewire component
class PostEditor extends Component
{
    public string $title = '';
    public string $content = '';

    protected function rules(): array
    {
        return [
            'title' => 'required|string|max:255',
            'content' => 'required|string|min:50',
        ];
    }

    public function save(): void
    {
        $this->validate();

        Post::create([
            'title' => $this->title,
            'content' => $this->content,
            'author_id' => auth()->id(),
        ]);

        $this->dispatch('toast', type: 'success', message: 'Post published.');
        $this->redirect(route('posts.index'));
    }
}

Read-Only Display#

<x-aura::editor
    label="Original Content"
    name="original"
    :value="$post->content"
    minHeight="200px"
    readonly
/>

Slots#

Accessibility#

• The editor area uses role="textbox" with aria-multiline="true".
• aria-label is set from the label prop for screen reader identification.
• Toolbar buttons have descriptive aria-label attributes (e.g., "Bold", "Insert Link").
• Active formatting states are indicated with aria-pressed="true" on toolbar buttons.
• Ctrl+B / Cmd+B toggles bold.
• Ctrl+I / Cmd+I toggles italic.
• Ctrl+U / Cmd+U toggles underline.
• Ctrl+K / Cmd+K inserts a link.
• Tab moves focus out of the editor (does not insert a tab character).
• The editor content area is focusable and announces content changes to screen readers.