Oliver Servín
Desarrollador y creador
Oliver Servín
23 de junio, 2021

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>