Oliver Servín

Integrating Tiptap in a Laravel-Livewire project

Install Javascript dependencies.

npm install -D [email protected] @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,
onUpdate: ({ 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>

Interact with API result values as object properties in Laravel


Get relative path with `route()` in Laravel


Chokidar file watcher to auto-run Pest tests


Chaining "Where" conditions using dynamic methods


Model factories with relationships by using magic methods


Show amount to pay in next billing cycle with Laravel Cashier (Stripe)


Tax calculation with Laravel Cashier for Stripe


How to keep in sync your customers details with Stripe in Laravel


Handle Paddle's marketing consent with Laravel


Custom styling the pay button with Laravel Cashier Paddle


Embed Paddle's checkout widget with Laravel Cashier


Weekly auto-reset a Laravel demo app


Remove the personal_access_tokens table on a fresh Laravel App


Deploy Umami analytics with Launcher


Fix Laravel storage:link using Launcher


Launcher: first impressions


Integrating Tiptap in a Laravel-Livewire project


Probando Google Ads con RadioCúbito(Design)


How to run a Ghost blog on Laravel Forge