php artisan aura:add editor

composer require bluestarsystem/aura-ui
php artisan aura:install

• 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

Free Component — Included in Aura UI Free, no license required.

Looking for more? For Markdown output, an inline link picker (no browser prompt), active toolbar states, a hardened load-time sanitizer, and extra formatting (blockquote, inline code, clear formatting), use the Pro Rich Text Editor.

Overview#

The Editor is a lightweight, free WYSIWYG component for simple rich text needs — comments, short descriptions, and basic content. It offers a small formatting toolbar (bold, italic, underline, strikethrough, headings, lists, links), stores content as HTML, and integrates with Livewire via wire:model / wire:model.live. For advanced editing, see the Pro Rich Text Editor.

Basic Usage#

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

<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#

<x-aura::editor label="Default Toolbar" placeholder="Type something..." />

Minimal Toolbar Preview#

<x-aura::editor label="Minimal Toolbar" placeholder="Quick note..." toolbar="bold,italic,link" />

Custom Toolbar Preview#

<x-aura::editor label="Full Toolbar" placeholder="Write your content..." :toolbar="['bold', 'italic', 'underline', 'strikethrough', 'heading', 'list-unordered', 'list-ordered', 'link']" />

Examples#

Blog Post Editor#

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

<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"
/>

<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"
/>

<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".
• A visible <label> is rendered above the editor from the label prop.
• Toolbar buttons expose a title tooltip (e.g., "Bold", "Ordered list").
• Ctrl+B / Cmd+B, Ctrl+I / Cmd+I, and Ctrl+U / Cmd+U toggle bold, italic, and underline via the browser's native contenteditable shortcuts.
• Tab moves focus out of the editor (does not insert a tab character).

For active toolbar states (aria-pressed), an accessible inline link picker, and a configurable command set, use the Pro Rich Text Editor.