PHP

您可以在 Laravel、Livewire、Inertia.js、Alpine.js、Tailwind CSS，甚至——是的，您没有听错——在 PHP 中使用 Tiptap。

我们提供了一个官方的 PHP 包来处理 Tiptap 内容。您可以将 Tiptap 兼容的 JSON 转换为 HTML，反之亦然，对您的内容进行消毒，或者只需修改它。

Laravel Livewire

my-livewire-component.blade.php

<!--
  在您的 livewire 组件中，您可以添加一个
  自动保存方法，以便每 10 秒保存一次编辑器的内容，
  如果您愿意的话
-->
<x-editor wire:model="foo" wire:poll.10000ms="autosave"></x-editor>

提示

在 Livewire v3 中，.defer 修饰符不再可用，因为更新状态默认是延迟的。如果您需要在服务器端更新状态，请使用 .live 修饰符，因为它会发生变化。

editor.blade.php

<div
  x-data="setupEditor(
    $wire.entangle('{{ $attributes->wire('model')->value() }}').defer
  )"
  x-init="() => init($refs.editor)"
  wire:ignore
  {{ $attributes->whereDoesntStartWith('wire:model') }}
>
  <div x-ref="editor"></div>
</div>

index.js

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

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.$watch('content', (content) => {
        // 如果新内容与 Tiptap 的匹配，则我们跳过。
        if (content === editor.getHTML()) return

        /*
          否则，意味着一个外部源
          正在修改这个 Alpine 组件上的数据，
          可能是 Livewire 本身。
          在这种情况下，我们只需要更新 Tiptap 的
          内容，然后就可以了。
          有关 `setContent()` 方法的更多信息，请参见：
            https://www.tiptap.dev/api/commands/set-content
        */
        editor.commands.setContent(content, false)
      })
    },
  }
}