---
title: "示例"
description: "通过我们的一系列代码示例了解如何在 Tiptap 中使用和集成自定义用户体验。更多内容请参见文档！"
canonical_url: "https://tiptap.zhcndoc.com/examples"
---

# 示例

通过我们的一系列代码示例了解如何在 Tiptap 中使用和集成自定义用户体验。更多内容请参见文档！

新库初始难度较大。我们理解这一点，因此为你准备了一系列示例。它们涵盖了各种使用场景，展示了如何在项目中使用 Tiptap。

[默认文本编辑器了解如何用 Tiptap 创建一个默认的文本编辑器。编辑器](https://tiptap.zhcndoc.com/examples/basics/default-text-editor.md)

[Markdown快捷键在你的 Tiptap 编辑器中添加 Markdown 快捷键。编辑器](https://tiptap.zhcndoc.com/examples/basics/markdown-shortcuts.md)

[表格
在你的 Tiptap 编辑器中添加表格。编辑器](https://tiptap.zhcndoc.com/examples/basics/tables.md)

[图片
在你的 Tiptap 编辑器中添加图片。编辑器](https://tiptap.zhcndoc.com/examples/basics/images.md)

[格式化给你的 Tiptap 编辑器添加内容格式化功能。编辑器](https://tiptap.zhcndoc.com/examples/basics/formatting.md)

[任务
为你的 Tiptap 编辑器添加任务清单。编辑器](https://tiptap.zhcndoc.com/examples/basics/tasks.md)

[文本方向 & 右到左支持添加对从右到左语言和双向文本的支持。编辑器](https://tiptap.zhcndoc.com/examples/basics/text-direction.md)

[长文本在内容规模巨大的情况下保持良好的性能。编辑器](https://tiptap.zhcndoc.com/examples/basics/long-texts.md)

[最小配置使用简洁的配置保持编辑器简单干净。编辑器](https://tiptap.zhcndoc.com/examples/basics/minimal-setup.md)

[协作编辑使用 Tiptap 编辑器构建协作编辑器。编辑器
协作](https://tiptap.zhcndoc.com/examples/advanced/collaborative-editing.md)

[菜单在你的编辑器中添加气泡菜单和悬浮菜单。编辑器](https://tiptap.zhcndoc.com/examples/advanced/menus.md)

[绘图为你的 Tiptap 编辑器添加支持绘图的自定义 NodeView。编辑器](https://tiptap.zhcndoc.com/examples/advanced/drawing.md)

[提及功能允许用户在文档中提及他人。编辑器](https://tiptap.zhcndoc.com/examples/advanced/mentions.md)

[强制内容结构强制内容符合特定结构，例如标题。编辑器](https://tiptap.zhcndoc.com/examples/advanced/forced-content-structure.md)

[智能编辑器通过自定义扩展，使你的编辑器变得更聪明。编辑器](https://tiptap.zhcndoc.com/examples/advanced/clever-editor.md)

[交互式 React & Vue 视图在你的 Tiptap 内容中使用 React 或 Vue 组件。编辑器](https://tiptap.zhcndoc.com/examples/advanced/interactive-react-and-vue-views.md)

[语法高亮在你的 Tiptap 编辑器中为代码块实现语法高亮。编辑器](https://tiptap.zhcndoc.com/examples/advanced/syntax-highlighting.md)

## 实验项目

以下示例属于**实验性质**，意味着它们尚未得到支持或维护。它们的目的在于展示 Tiptap 的潜能，并激发你自己开发扩展。

[协作字段通过字段，将单独的数据保存到使用 Tiptap 的协作 Yjs 文档中。编辑器
协作](https://tiptap.zhcndoc.com/examples/experiments/collaborative-fields.md)

[图片节点创建支持图像的节点，并增强支持图形的能力。编辑器](https://tiptap.zhcndoc.com/examples/experiments/figure.md)

[通用图形通过通用图形扩展，创建支持图形的节点。编辑器](https://tiptap.zhcndoc.com/examples/experiments/generic-figure.md)

[iFrame 嵌入
在内容中嵌入 iframe。编辑器](https://tiptap.zhcndoc.com/examples/experiments/iframe.md)

[代码检测为你的 Tiptap 编辑器创建检测工具。编辑器](https://tiptap.zhcndoc.com/examples/experiments/linting.md)

[斜杠命令添加在斜杠位置弹出的工具栏。编辑器](https://tiptap.zhcndoc.com/examples/experiments/slash-commands.md)

[末尾节点
在文档末尾添加一个节点编辑器](https://tiptap.zhcndoc.com/examples/experiments/trailing-node.md)