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>