mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-17 04:17:52 +08:00
81 lines
1.8 KiB
Markdown
81 lines
1.8 KiB
Markdown
---
|
|
title: Livewire WYSIWYG
|
|
tableOfContents: true
|
|
---
|
|
|
|
# Livewire
|
|
|
|
## 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)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
```
|