tiptap/docs/guide/node-views/examples.md

28 lines
1.3 KiB
Markdown
Raw Normal View History

---
tableOfContents: true
---
2021-03-11 05:06:18 +08:00
# Examples
## Introduction
2021-04-03 22:49:53 +08:00
Node views enable you to fully customize your nodes. We are collecting a few different examples here. Feel free to copy them and start building on them.
Keep in mind that those are just examples to get you started, not officially supported extensions. We dont have tests for them, and dont plan to maintain them with the same attention as we do with official extensions.
2021-03-11 05:06:18 +08:00
## Drag handles
2021-04-03 22:49:53 +08:00
Drag handles arent that easy to add. We are still on the lookout whats the best way to add them. Official support will come at some point, but theres no timeline yet.
2021-10-19 00:01:47 +08:00
https://embed.tiptap.dev/preview/GuideNodeViews/DragHandle
2021-03-11 05:06:18 +08:00
## Table of contents
2021-04-03 22:49:53 +08:00
This one loops through the editor content, gives all headings an ID and renders a Table of Contents with Vue.
2021-10-19 00:01:47 +08:00
https://embed.tiptap.dev/preview/GuideNodeViews/TableOfContents
2021-03-11 05:06:18 +08:00
## Drawing in the editor
2021-04-03 22:49:53 +08:00
The drawing example shows a SVG that enables you to draw inside the editor.
2021-10-19 00:01:47 +08:00
https://embed.tiptap.dev/preview/Examples/Drawing
2021-04-03 22:49:53 +08:00
Its not working very well with the Collaboration extension. Its sending all data on every change, which can get pretty huge with Y.js. If you plan to use those two in combination, you need to improve it or your WebSocket backend will melt.