你可以将 Tiptap 与 Laravel、Livewire、Inertia.js、Alpine.js、Tailwind CSS，甚至—是的，你没看错—在 PHP 中一起使用。

我们提供了 官方 PHP 包来处理 Tiptap 内容，你可以将 Tiptap 兼容的 JSON 转换为 HTML，反之亦然，清理内容，或者修改它。

Laravel Livewire

my-livewire-component.blade.php

  1. <!--
  2.   在你的 Livewire 组件中，你可以添加一个
  3.   自动保存方法，用来每 10 秒保存一次编辑器的内容
  4. -->
  5. <x-editor wire:model="foo" wire:poll.10000ms="autosave"></x-editor>

提示

在 Livewire v3 中，.defer 修饰符不再可用，因为默认情况下，状态更新会被延迟。如果你需要在服务器端更新状态，可以使用 .live 修饰符，因为它会有所变化。

editor.blade.php

  1. <div
  2.   x-data="setupEditor(
  3.     $wire.entangle('{{ $attributes->wire('model')->value() }}').defer
  4.   )"
  5.   x-init="() => init($refs.editor)"
  6.   wire:ignore
  7.   {{ $attributes->whereDoesntStartWith('wire:model') }}
  8. >
  9.   <div x-ref="editor"></div>
  10. </div>

index.js

  1. import { Editor } from '@tiptap/core'
  2. import StarterKit from '@tiptap/starter-kit'
  4. window.setupEditor = function (content) {
  5.   let editor
  7.   return {
  8.     content: content,
  10.     init(element) {
  11.       editor = new Editor({
  12.         element: element,
  13.         extensions: [StarterKit],
  14.         content: this.content,
  15.         onUpdate: ({ editor }) => {
  16.           this.content = editor.getHTML()
  17.         },
  18.       })
  20.       this.$watch('content', (content) => {
  21.         // 如果新内容与 Tiptap 的内容相同，我们就跳过。
  22.         if (content === editor.getHTML()) return
  24.         /*
  25.           否则，意味着外部源（如 Livewire 本身）
  26.           正在修改此 Alpine 组件中的数据。
  27.           在这种情况下，我们只需要更新 Tiptap 的内容，完成即可。
  28.           更多关于 `setContent()` 方法的信息，参见：
  29.             https://www.tiptap.dev/api/commands/set-content
  30.         */
  31.         editor.commands.setContent(content, false)
  32.       })
  33.     },
  34.   }
  35. }