Skip to content

V16 : Change TinyMCE defaults to Tiptap #7064

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
May 5, 2025
Merged

V16 : Change TinyMCE defaults to Tiptap #7064

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4183849
docs: document tiptap extensions
iOvergaard May 2, 2025
ce3c710
docs: document which version to install
iOvergaard May 2, 2025
80ef7e4
docs: removes reference to tinymce
iOvergaard May 2, 2025
ff43260
docs: remove one old limitation
iOvergaard May 2, 2025
4be895a
docs: formatting for schema and UI alias
iOvergaard May 2, 2025
1cbe46d
docs: change link from tinymce to tiptap
iOvergaard May 2, 2025
e5c6bf6
Merge remote-tracking branch 'origin/main' into docs/remove-tinymce
iOvergaard May 2, 2025
dbee751
docs: updates documentation from tinymce to tiptap shortcuts
iOvergaard May 2, 2025
46c76a8
docs(forms): updates property editor ui alias from tinymce to tiptap
iOvergaard May 2, 2025
3d6ecc6
docs: revert removal of tinymce in V15
iOvergaard May 2, 2025
2efdaa9
docs: copy V15 article for umbraco-package.md to V16 but with tinymce…
iOvergaard May 2, 2025
71c0572
Update 16/umbraco-cms/tutorials/editors-manual/working-with-content/R…
eshanrnh May 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions 15/umbraco-cms/customizing/umbraco-package.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,9 @@ These are the current types of UI Extensions:
| searchResultItem | A search result item is a component that can be added to the search results. |
| theme | A theme is a set of styles that can be added to the Backoffice. The user can select their preferred theme in the current user modal. |
| tinyMcePlugin | A TinyMCE plugin is a plugin that can be added to the TinyMCE editor. Read more about [TinyMCE Plugins](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/plugins.md). |
| tiptapExtension | A Tiptap extension is a component that can be added to the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). |
| tiptapToolbarExtension | A Tiptap toolbar extension is a component that can be added to the toolbar of the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). |
| tiptapStatusbarExtension | A Tiptap status bar extension is a component that can be added to the status bar of the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). |
| treeItem | A tree item that can be added to the tree. |
| tree | A tree that can be added to a section. |
| ufmComponent | This type of component is a formatter that can be added to the [Umbraco Flavoured Markdown](../reference/umbraco-flavored-markdown.md), which is used in property descriptions and advanced labels. |
Expand Down
2 changes: 0 additions & 2 deletions ...e/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ You can continue to use the [TinyMCE UI for the Rich Text Editor](../rich-text-e

**Current limitations**

The Tiptap UI currently does not support using custom styles for your rich text.

Resizing media images has not been implemented yet.

{% endhint %}
Expand Down
8 changes: 4 additions & 4 deletions 16/umbraco-cms/customizing/development-flow/vite-package-setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,16 @@ npm install
Before proceeding, ensure that you install the version of the Backoffice package compatible with your Umbraco installation. You can find the appropriate version on the [@umbraco-cms/backoffice npm page](https://www.npmjs.com/package/@umbraco-cms/backoffice).
{% endhint %}

5. Install the Umbraco Backoffice package:
5. Install the Backoffice package using the following command, where `x.x.x` should be replaced with your Umbraco version:

```bash
npm install -D @umbraco-cms/backoffice
npm install -D @umbraco-cms/backoffice@x.x.x
```

6. To avoid installing additional dependencies such as TinyMCE or Monaco Editor,use the `--legacy-peer-deps` flag:
6. To avoid installing Umbraco’s sub-dependencies such as the entire Monaco Editor, use the `--legacy-peer-deps` flag:

```bash
npm install --legacy-peer-deps -D @umbraco-cms/backoffice
npm install --legacy-peer-deps -D @umbraco-cms/backoffice@x.x.x
```

This disables IntelliSense for external references but keeps the install lean.
Expand Down
3 changes: 3 additions & 0 deletions 16/umbraco-cms/customizing/umbraco-package.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,9 @@ These are the current types of UI Extensions:
| searchProvider | A search provider is a provider that can be used to provide search results for the search bar in the Backoffice. |
| searchResultItem | A search result item is a component that can be added to the search results. |
| theme | A theme is a set of styles that can be added to the Backoffice. The user can select their preferred theme in the current user modal. |
| tiptapExtension | A Tiptap extension is a component that can be added to the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). |
| tiptapToolbarExtension | A Tiptap toolbar extension is a component that can be added to the toolbar of the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). |
| tiptapStatusbarExtension | A Tiptap status bar extension is a component that can be added to the status bar of the [Rich text editor](../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md). |
| treeItem | A tree item that can be added to the tree. |
| tree | A tree that can be added to a section. |
| ufmComponent | This type of component is a formatter that can be added to the [Umbraco Flavoured Markdown](../reference/umbraco-flavored-markdown.md), which is used in property descriptions and advanced labels. |
Expand Down
8 changes: 4 additions & 4 deletions ...ackoffice/property-editors/built-in-umbraco-property-editors/markdown-editor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

`Returns: System.Web.HtmlString`

This built-in editor allow the user to use the markdown formatting options, from within a tinyMCE-like interface.
This built-in editor allow the user to use the markdown formatting options, from within a rich text editor-like interface.

## Data Type Definition Example

Expand Down Expand Up @@ -84,8 +84,8 @@ The example below demonstrates how to add values programmatically using a Razor

// Create markdown value
var markdownValue = new HtmlString("#heading \n**strong text**");
// Set the value of the property with alias 'myMarkdownEditor'.

// Set the value of the property with alias 'myMarkdownEditor'.
content.SetValue("myMarkdownEditor", markdownValue);

// Save the change
Expand All @@ -98,7 +98,7 @@ Although the use of a GUID is preferable, you can also use the numeric ID to get
```csharp
@{
// Get the page using it's id
var content = contentService.GetById(1234);
var content = contentService.GetById(1234);
}
```

Expand Down
4 changes: 3 additions & 1 deletion ...e/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# Rich Text Editor

`Schema Alias: Umbraco.RichText` `UI Alias: Umb.PropertyEditorUi.Tiptap`
`Schema Alias: Umbraco.RichText`

`UI Alias: Umb.PropertyEditorUi.Tiptap`

`Returns: HTML`

Expand Down
27 changes: 14 additions & 13 deletions 16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,20 @@ The Rich Text Editor is like any other word-processing program. You write the te

To make your work easier, there are shortcut keys for certain editor functions. Use the following shortcut keys to carry out certain commands:

| Shortcut | Action |
| -------- | ---------- |
| Ctrl + A | Select all |
| Ctrl + B | Bold |
| Ctrl + C | Copy |
| Ctrl + I | Italic |
| Ctrl + U | Underline |
| Ctrl + V | Paste |
| Ctrl + X | Cut |
| Ctrl + Y | Redo |
| Ctrl + Z | Undo |

We have listed only a few keyboard shortcuts. For a detailed list of available keyboard shortcuts, see the [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/latest/keyboard-shortcuts/).
| Windows/Linux | MacOS | Action |
| -------- | -------- | ---------- |
| <kbd>Ctrl</kbd> + <kbd>A</kbd> | <kbd>Cmd</kbd> + <kbd>A</kbd> | Select all |
| <kbd>Ctrl</kbd> + <kbd>B</kbd> | <kbd>Cmd</kbd> + <kbd>B</kbd> | Bold |
| <kbd>Ctrl</kbd> + <kbd>I</kbd> | <kbd>Cmd</kbd> + <kbd>I</kbd> | Italic |
| <kbd>Ctrl</kbd> + <kbd>U</kbd> | <kbd>Cmd</kbd> + <kbd>U</kbd> | Underline |
| <kbd>Ctrl</kbd> + <kbd>C</kbd> | <kbd>Cmd</kbd> + <kbd>C</kbd> | Copy |
| <kbd>Ctrl</kbd> + <kbd>V</kbd> | <kbd>Cmd</kbd> + <kbd>V</kbd> | Paste |
| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd> | <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd> | Paste without formatting |
| <kbd>Ctrl</kbd> + <kbd>X</kbd> | <kbd>Cmd</kbd> + <kbd>X</kbd> | Cut |
| <kbd>Ctrl</kbd> + <kbd>Z</kbd> | <kbd>Cmd</kbd> + <kbd>Z</kbd> | Undo |
| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Y</kbd> | <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> | Redo |

Only a few keyboard shortcuts are listed here. For a detailed list of available shortcuts, see the [Tiptap Documentation](https://tiptap.dev/docs/editor/core-concepts/keyboard-shortcuts).

## View Source Code

Expand Down
2 changes: 1 addition & 1 deletion 16/umbraco-forms/developer/extending/setting-types.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Some are defined with the Umbraco CMS and some ship with the Forms package.
| Umb.PropertyEditorUi.Slider | CMS | Uses a slider for range input | The "reCAPTCHAv3" field type |
| Umb.PropertyEditorUi.TextArea | CMS | Uses a multiline textbox for entry | |
| Umb.PropertyEditorUi.TextBox | CMS | Uses a single-line textbox for entry | |
| Umb.PropertyEditorUi.TinyMCE | CMS | Uses a rich text editor for input | The "Send email" workflows |
| Umb.PropertyEditorUi.Tiptap | CMS | Uses a rich text editor for input | The "Send email" workflows |
| Umb.PropertyEditorUi.Toggle | CMS | Uses a single checkbox for entry | |
| Umb.PropertyEditorUi.UploadField | CMS | Used for selection of a file | The "Text file" prevalue source |
| Forms.PropertyEditorUi.DataTypePicker | Forms | Uses a datatype picker | The "Umbraco prevalues" prevalue source |
Expand Down