Rich Editor
A powerful WYSIWYG editor based on Tiptap, fully integrated with Livewire and Alpine.js.
Basic Usage
A simple rich text editor that provides common formatting options.
<neura::editor placeholder="Start writing your masterpiece..." />Livewire Integration
The editor syncs seamlessly with Livewire properties using `wire:model`.
<!-- In your blade view -->
<neura::editor wire:model="content" />
<!-- In your Livewire component -->
class CreatePost extends Component
{
public $content = '';
public function save()
{
// Always sanitize HTML content before saving to prevent XSS attacks
// Use a library like HTMLPurifier or Laravel's built-in sanitization
Post::create(['content' => $this->content]);
}
}Form Integration
It also works as a regular form input with the `name` attribute.
Description
Provide a detailed description of the product.
<neura::field>
<neura::label>Description</neura::label>
<neura::editor name="description" placeholder="Enter product description..." />
<neura::description>
Provide a detailed description of the product.
</neura::description>
</neura::field>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | null | Name attribute for form submission |
| value | string | null | Initial content |
| placeholder | string | 'Write something...' | Placeholder text when empty |
| disabled | boolean | false | Disables editing and hides toolbar |
| mode | string | 'html' | Output format: 'html' or 'json' |