---
title: "节点视图示例"
description: "查看可自定义节点视图示例，并创建拖动手柄、动态目录和交互式绘图工具。更多内容请查看文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/node-views/examples"
---

# 节点视图示例

查看可自定义节点视图示例，并创建拖动手柄、动态目录和交互式绘图工具。更多内容请查看文档！

节点视图使您能够完全自定义节点。我们在这里收集了一些不同的示例。欢迎复制它们并开始构建。

请记住，这些只是入门示例，而非官方支持的扩展。我们没有为它们编写测试，也不打算像官方扩展那样投入大量维护精力。

## 拖动手柄

添加拖动手柄并不是那么容易。我们仍在寻找添加它们的最佳方式。官方支持会在某个时候推出，但目前没有具体时间表。

> **Interactive demo:** [DragHandle](https://embed.tiptap.dev/preview/GuideNodeViews/DragHandle)

## 编辑器中的绘图

绘图示例展示了一个 SVG，允许您在编辑器内进行绘图。

> **Interactive demo:** [Drawing](https://embed.tiptap.dev/preview/Examples/Drawing)

它与协作扩展配合使用时效果不佳。每次更改都会发送所有数据，配合 Y.js 使用时数据量可能非常庞大。如果您计划将两者结合使用，需要对其进行优化，否则您的 WebSocket 后端可能会崩溃。