Por Oliver Servín en English

Integrating Tiptap in a Laravel-Livewire project

Install Javascript dependencies.

// torchlight! {"lineNumbers": false}
npm install -D alpinejs@2 @tiptap/core @tiptap/starter-kit

Install Livewire.

// torchlight! {"lineNumbers": false}
composer require livewire/livewire

Initialize the editor.

For this example, we will initialize the editor in resources/js/app.js

// torchlight! {"lineNumbers": false}


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: [
                content: this.content,
                onUpdate: ({ editor }) => {
                    this.content = editor.getHTML()

And compile the assets:

// torchlight! {"lineNumbers": false}
npm run dev

Make a Blade component.

Create an anonymous Blade component for the editor at resources/views/components/editor.blade.php

// torchlight! {"lineNumbers": false}
        content: @entangle($attributes->wire('model')),
    x-init="() => init($refs.editor)"
    {{ $attributes->whereDoesntStartWith('wire:model') }}
  <div x-ref="editor"></div>

Make a Livewire component.

Create a Livewire component for the editor.

// torchlight! {"lineNumbers": false}
php artisan make:livewire editor

Add a `content` property in the component.

// torchlight! {"lineNumbers": false}
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.

// torchlight! {"lineNumbers": false}
    <x-editor wire:model="content"/>