Oliver Servín

Integrating Tiptap in a Laravel-Livewire project

1. Install Javascript dependencies.

npm install -D [email protected] @tiptap/core @tiptap/starter-kit

2. Install Livewire.

composer require livewire/livewire

3. 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

4. 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>

5. Make a Livewire component.

Create a Livewire component for the editor.

php artisan make:livewire editor

Add a `content` property in the component.

<?php

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>

Subscribe to get by email future posts or grab the RSS feed.


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