Tiptap Editor

x-tiptap

A rich-text WYSIWYG editor with a configurable toolbar (headings, lists, links, code) built on Tiptap. Works with wire:model. Lazy-loads its bundle on demand.

php artisan components:add tiptap

Examples

Basic

A configurable toolbar with headings, lists, and links.

<div class="flex w-full justify-center">
    <div class="w-full">
        <x-components.tiptap :content="'<h2>Rich text, the Blade way</h2><p>Select some text to format it, add <strong>bold</strong>, <em>italic</em>, or a <a href=\'https://devdojo.com\'>link</a>.</p><ul><li>Bullet lists</li><li>Numbered lists</li></ul>'" />
    </div>
</div>

Props

Prop	Type	Default	Description
`id`	text	`—`	Optional explicit id (auto-generated otherwise).
`toolbar`	text	`bold \| italic \| underline \| code \| divider \| heading_1 \| heading_2 \| heading_3 \| divider \| link \| bulletList \| orderedList \| blockquote \| codeBlock`	Pipe-separated list of toolbar buttons; use 'divider' for separators.
`content`	textarea	`—`	Initial HTML content.