You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/extensions.md
+13-17Lines changed: 13 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,43 +4,41 @@ description: Information on how to work with Tiptap extensions in the rich text
4
4
5
5
# Extensions
6
6
7
-
The Rich Text Editor (RTE) in Umbraco is based on the opensource editor [Tiptap](https://tiptap.dev/).
7
+
The Rich Text Editor (RTE) in Umbraco is based on the open-source editor [Tiptap](https://tiptap.dev/).
8
8
9
-
Out of the box, Tiptap has limited capabilities, everything is an extension, by design. Basic text formatting features such as bold, italic, underline are their own extensions. This offers great flexibility, making the rich text editor highly configurable. The implementation in Umbraco offers a wide range of built-in extensions to enhance the Tiptap editor capabilities.
10
-
11
-
Using the same extensions points, this article will show you how to add a custom extension to the rich text editor.
9
+
Out of the box, Tiptap has limited capabilities and everything is an extension by design. Basic text formatting features such as bold, italic, and underline are their own extensions. This offers great flexibility, making the rich text editor highly configurable. The implementation in Umbraco offers a wide range of built-in extensions to enhance the Tiptap editor capabilities.
12
10
11
+
Using the same extension points, this article will show you how to add a custom extension to the rich text editor.
13
12
14
13
## Native Tiptap extensions
15
14
16
-
Tiptap has a library of supported native extensions. You can find a list of these extensions on the [Tiptap website](https://tiptap.dev/docs/editor/extensions/overview). While many of these are open source, there are also several [pro extensions](https://tiptap.dev/docs/guides/pro-extensions) available for commercial subscriptions.
17
-
15
+
Tiptap has a library of supported native extensions. You can find a list of these extensions on the [Tiptap website](https://tiptap.dev/docs/editor/extensions/overview). While many of these are open source, there are also [pro extensions](https://tiptap.dev/docs/guides/pro-extensions) available for commercial subscriptions.
18
16
19
17
### Tiptap extension types
20
18
21
19
There are two types of extension: `tiptapExtension` and `tiptapToolbarExtension`.
22
20
23
-
The `tiptapExtension` extension is used to register a native [Tiptap Extension](https://tiptap.dev/docs/editor/extensions/), these will enhance the capabilities of the rich text editor itself. For example, to enable text formatting, drag-and-drop functionality, spell checking, etc.
21
+
The `tiptapExtension` extension is used to register a native [Tiptap Extension](https://tiptap.dev/docs/editor/extensions/). These will enhance the capabilities of the rich text editor itself. For example, to enable text formatting, drag-and-drop functionality and spell-checking.
24
22
25
-
The `tiptapToolbarExtension` extension is used to make a toolbar action that interacts with the Tiptap editor (and native Tiptap extensions).
23
+
The `tiptapToolbarExtension` extension adds a toolbar action that interacts with the Tiptap editor (and native Tiptap extensions).
26
24
27
25
28
-
## Adding an native extension
26
+
## Adding a native extension
29
27
30
28
{% hint style="info" %}
31
-
This example assumes that you will be creating an Umbraco package using the Vite/Lit/TypeScript set-up.
29
+
This example assumes that you will be creating an Umbraco package using the Vite/Lit/TypeScript setup.
32
30
You can learn how to do this [Vite Package Setup](../../../../../customizing/development-flow/vite-package-setup.md) article.
33
31
{% endhint %}
34
32
35
-
In this example, we will take the native Tiptap opensource extension [Task List](https://tiptap.dev/docs/editor/extensions/nodes/task-list). Then register it with the rich text editor and add a toolbar button to invoke the Task List action.
33
+
In this example, you will take the native Tiptap open-source extension [Task List](https://tiptap.dev/docs/editor/extensions/nodes/task-list). Then register it with the rich text editor and add a toolbar button to invoke the Task List action.
36
34
37
-
First, you will need to install both the Task List and Task Item extensions from the npm registry.
35
+
1. Install both the Task List and Task Item extensions from the npm registry.
@@ -52,7 +50,7 @@ export default class UmbTiptapTaskListExtensionApi extends UmbTiptapExtensionApi
52
50
}
53
51
```
54
52
55
-
Next, you will need to create the toolbar action to invoke the Task List extension.
53
+
3. Create the toolbar action to invoke the Task List extension.
56
54
57
55
```
58
56
import { UmbTiptapToolbarElementApiBase } from '@umbraco-cms/backoffice/tiptap';
@@ -67,7 +65,6 @@ export default class UmbTiptapToolbarTaskListExtensionApi extends UmbTiptapToolb
67
65
68
66
Once you have the above code in place, they can be referenced in the [package manifest](../../../../../extending/property-editors/package-manifest.md) file.
0 commit comments