---
title: "PHP"
description: "了解如何在 PHP 环境中使用 Tiptap，包括 Laravel 和 Livewire。访问我们的文档指南！"
canonical_url: "https://tiptap.zhcndoc.com/editor/getting-started/install/php"
---

# PHP

了解如何在 PHP 环境中使用 Tiptap，包括 Laravel 和 Livewire。访问我们的文档指南！

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

我们提供了[一个官方的 PHP 包来处理 Tiptap 内容](https://tiptap.zhcndoc.com/editor/api/utilities/tiptap-for-php.md)。您可以将 Tiptap 兼容的 JSON 转换为 HTML，反之亦然，对您的内容进行消毒，或者只需修改它。

## Laravel Livewire

### my-livewire-component.blade.php

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

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

### editor.blade.php

```html
<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

```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)
      })
    },
  }
}
```

## 后续步骤

- [配置您的编辑器](https://tiptap.zhcndoc.com/editor/getting-started/configure.md)
- [为编辑器添加样式](https://tiptap.zhcndoc.com/editor/getting-started/style-editor.md)
- [了解更多 Tiptap 的概念](https://tiptap.zhcndoc.com/editor/core-concepts/introduction.md)
- [学习如何持久化编辑器状态](https://tiptap.zhcndoc.com/editor/core-concepts/persistence.md)
- [开始构建您自己的扩展](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions.md)