Tiptap is a headless editor framework with an open source core. Integrate over 100+ extensions like collaboration and AI agents and create the UX you want.Getting Started
Installing @tiptap/core and @tiptap/starter-kit with NPM
npm install -d @tiptap/core @tiptap/pm @tiptap/starter-kitTo set up the TipTap editor in your Laravel Livewire project, start by creating an editor.js file within the resources/js directory. This file serves as the configuration hub for integrating TipTap into your application. This JavaScript file initializes the TipTap editor instance and configures its extensions. Here’s a code given below:
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
document.addEventListener('alpine:init', () => {
window.setupEditor = function (content) {
let editor
return {
content: content,
init(element) {
editor = new Editor({
element: element,
extensions: [
StarterKit,
],
content: this.content,
onUpdate: ({ editor }) => {
this.content = editor.getHTML()
},
})
this.editor = editor;
this.toggleBold = () => editor.chain().toggleBold().focus().run();
this.$watch('content', (content) => {
// If the new content matches TipTap's then we just skip.
if (content === editor.getHTML()) return
/*
Otherwise, it means that a force external to TipTap
is modifying the data on this Alpine component,
which could be Livewire itself.
In this case, we just need to update TipTap's
content and we're good to do.
For more information on the `setContent()` method, see:
https://www.tiptap.dev/api/commands/set-content
*/
editor.commands.setContent(content, false)
})
}
}
}
})Now import the editor.js file into app.js
import './editor';remember that import path should direct to the editor.js file’s code.
Now create an editor.blade.php file inside the components folder within resources/views. and write the code given below:
<div x-data="setupEditor(@entangle($attributes['wire:model']))" x-init="() => init($refs.editor)" wire:ignore {{ $attributes->whereDoesntStartWith('wire:model') }}>
<div>
<button @click="toggleBold()">Bold</button>
</div>
<div x-ref="editor"></div>
</div>
Now, add the editor Blade component to any Livewire component of your choice.
<x-editor wire:model="content" />For further customization read tiptap documentation.
