---
title: "Alpine"
description: "了解如何将 Tiptap 与 Alpine.js 一起使用，以创建一个强大的文本编辑器。按照我们文档中的详细指南进行操作！"
canonical_url: "https://tiptap.zhcndoc.com/editor/getting-started/install/alpine"
---
# Alpine
了解如何将 Tiptap 与 Alpine.js 一起使用，以创建一个强大的文本编辑器。按照我们文档中的详细指南进行操作！
以下指南描述了如何将 Tiptap 与版本 3 的 Alpine.js 集成。为了方便本指南，我们将使用 Vite 快速设置一个项目，但您可以使用您习惯的任何工具。Vite 真的很快，我们喜欢它！
### 要求
- 在您的机器上安装 [Node](https://nodejs.org/en/download/)
- 有 [Alpine.js](https://github.com/alpinejs/alpine) 的经验
## 创建项目（可选）
如果您已经有一个 Alpine.js 项目，那也没关系。请跳过此步骤。
为了本指南的目的，从一个新的 [Vite](https://vitejs.dev/) 项目开始，名为 `my-tiptap-project`。Vite 设置我们所需的一切，只需选择 Vanilla JavaScript 模板。
```bash
npm init vite@latest my-tiptap-project -- --template vanilla
cd my-tiptap-project
npm install
npm run dev
```
### 安装依赖项
好的，够了，无聊的样板工作。让我们终于安装 Tiptap！在以下示例中，您需要 `alpinejs`、`@tiptap/core` 包、`@tiptap/pm` 包和 `@tiptap/starter-kit`，后者包含最常见的扩展，便于快速入门。
```bash
npm install alpinejs @tiptap/core @tiptap/pm @tiptap/starter-kit
```
如果您已按照步骤 1 进行操作，则可以使用 `npm run dev` 启动项目，并在您喜欢的浏览器中打开 [http://localhost:5173](http://localhost:5173)。如果您在处理现有项目，这可能会有所不同。
## 集成 Tiptap
要真正开始使用 Tiptap，您需要编写一些 JavaScript。让我们将以下示例代码放入名为 `main.js` 的文件中。
这是将 Tiptap 与 Alpine.js 结合使用的最快方法。它将为您提供一个非常基本的 Tiptap 版本。不用担心，您很快就能添加更多功能。
```js
import Alpine from 'alpinejs'
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
document.addEventListener('alpine:init', () => {
Alpine.data('editor', (content) => {
let editor // Alpine 的响应引擎会自动将组件属性包装在代理对象中。如果您尝试使用代理编辑器实例应用事务，将导致“范围错误：应用不匹配的事务”，因此请确保使用 Alpine.raw() 解包，或简单地避免将编辑器存储为组件属性，如本示例所示。
return {
updatedAt: Date.now(), // 强制 Alpine 在选择更改时重新渲染
init() {
const _this = this
editor = new Editor({
element: this.$refs.element,
extensions: [StarterKit],
content: content,
onCreate({ editor }) {
_this.updatedAt = Date.now()
},
onUpdate({ editor }) {
_this.updatedAt = Date.now()
},
onSelectionUpdate({ editor }) {
_this.updatedAt = Date.now()
},
})
},
isLoaded() {
return editor
},
isActive(type, opts = {}) {
return editor.isActive(type, opts)
},
toggleHeading(opts) {
editor.chain().toggleHeading(opts).focus().run()
},
toggleBold() {
editor.chain().focus().toggleBold().run()
},
toggleItalic() {
editor.chain().toggleItalic().focus().run()
},
}
})
})
window.Alpine = Alpine
Alpine.start()
```
### 将其添加到您的应用程序
现在，让我们用以下示例代码替换 `index.html` 的内容，以在我们的应用程序中使用编辑器。
```html
```
现在 Tiptap 应该在您的浏览器中可见。是时候给自己一个拥抱了！:)
## 下一步
- [配置您的编辑器](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)