Integrating Tiptap in a Laravel-Livewire project
Install Javascript dependencies.
npm install -D alpinejs@2 @tiptap/core @tiptap/starter-kit
Install Livewire.
composer require livewire/livewire
Initialize the editor.
For this example, we will initialize the editor in resources/js/app.js
require('./bootstrap'); require('alpinejs'); import { Editor } from '@tiptap/core'import StarterKit from '@tiptap/starter-kit' window.setupEditor = function() { return { editor: null, init(element) { this.editor = new Editor({ element: element, extensions: [ StarterKit ], content: this.content, onUppublished_at: ({ editor }) => { this.content = editor.getHTML() } }) }, }}
And compile the assets:
npm run dev
Make a Blade component.
Create an anonymous Blade component for the editor at resources/views/components/editor.blade.php
<div x-data="{ content: @entangle($attributes->wire('model')), ...setupEditor() }" x-init="() => init($refs.editor)" wire:ignore {{ $attributes->whereDoesntStartWith('wire:model') }}> <div x-ref="editor"></div></div>
Make a Livewire component.
Create a Livewire component for the editor.
php artisan make:livewire editor
Add a `content` property in the component.
namespace App\Http\Livewire; use Livewire\Component; class Editor extends Component{ public $content; public function render() { return view('livewire.editor'); }}
Render the editor Blade component in Livewire component.
<div> <x-editor wire:model="content"/></div>