2021-04-07 06:08:50 +08:00
---
2022-01-28 06:04:05 +08:00
title: PHP WYSIWYG
2021-08-24 17:24:10 +08:00
tableOfContents: true
2021-04-07 06:08:50 +08:00
---
2022-01-28 06:04:05 +08:00
# PHP
2021-01-09 01:20:28 +08:00
2021-01-30 05:05:47 +08:00
## Introduction
2022-01-28 06:04:05 +08:00
You can use Tiptap with Laravel, Livewire, Inertia.js, [Alpine.js ](/installation/alpine ), [Tailwind CSS ](/guide/styling#with-tailwind-css ), and even - yes you read that right - inside PHP.
## Tiptap for PHP
We provide [an official PHP package to work with Tiptap content ](/api/utilities/tiptap-php ). A PHP package to work with Tiptap content. You can transform Tiptap-compatible JSON to HTML, and the other way around, sanitize your content, or just modify it.
2021-01-30 05:05:47 +08:00
2022-01-28 06:04:05 +08:00
## Laravel Livewire
2021-01-09 01:20:28 +08:00
2022-03-24 16:55:28 +08:00
### my-livewire-component.blade.php
2021-01-09 01:20:28 +08:00
```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 >
```
2022-03-24 16:55:28 +08:00
### editor.blade.php
2021-01-09 01:20:28 +08:00
```html
< div
x-data="setupEditor(
2021-05-04 04:47:43 +08:00
$wire.entangle('{{ $attributes->wire('model') }}').defer
2021-01-09 01:20:28 +08:00
)"
x-init="() => init($refs.editor)"
wire:ignore
{{ $attributes->whereDoesntStartWith('wire:model') }}
>
< div x-ref = "editor" > < / div >
< / div >
```
2021-02-08 23:41:57 +08:00
2022-01-28 06:04:05 +08:00
### index.js
2021-02-08 23:41:57 +08:00
```js
2021-05-07 00:41:22 +08:00
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
2021-02-08 23:41:57 +08:00
window.setupEditor = function (content) {
return {
editor: null,
2021-05-04 04:47:43 +08:00
content: content,
2021-02-08 23:41:57 +08:00
2021-05-04 04:47:43 +08:00
init(element) {
this.editor = new Editor({
element: element,
2021-05-07 00:41:22 +08:00
extensions: [
StarterKit,
],
2021-02-08 23:41:57 +08:00
content: this.content,
2021-05-04 04:47:43 +08:00
onUpdate: ({ editor }) => {
this.content = editor.getHTML()
2021-02-08 23:41:57 +08:00
}
})
2021-05-04 04:47:43 +08:00
this.$watch('content', (content) => {
// If the new content matches TipTap's then we just skip.
if (content === this.editor.getHTML()) return
2021-02-08 23:41:57 +08:00
2021-05-04 04:47:43 +08:00
/*
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)
2021-02-08 23:41:57 +08:00
})
}
}
}
```