tiptap/docs/installation/livewire.md
2021-09-16 14:41:25 +02:00

83 lines
1.8 KiB
Markdown

---
title: Livewire WYSIWYG
tableOfContents: true
---
# Livewire
## toc
## Introduction
The following guide describes how to integrate tiptap with your [Livewire](https://laravel-livewire.com/) project.
TODO
## editor.blade.php
```html
<!--
In your livewire component you could add an
autosave method to handle saving the content
from the editor every 10 seconds if you wanted
-->
<x-editor
wire:model="foo"
wire:poll.10000ms="autosave"
></x-editor>
```
## my-livewire-component.blade.php
```html
<div
x-data="setupEditor(
$wire.entangle('{{ $attributes->wire('model') }}').defer
)"
x-init="() => init($refs.editor)"
wire:ignore
{{ $attributes->whereDoesntStartWith('wire:model') }}
>
<div x-ref="editor"></div>
</div>
```
## index.js
```js
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
window.setupEditor = function (content) {
return {
editor: null,
content: content,
init(element) {
this.editor = new Editor({
element: element,
extensions: [
StarterKit,
],
content: this.content,
onUpdate: ({ editor }) => {
this.content = editor.getHTML()
}
})
this.$watch('content', (content) => {
// If the new content matches TipTap's then we just skip.
if (content === this.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
*/
this.editor.commands.setContent(content, false)
})
}
}
}
```