Skip to content

Commit 81c7968

Browse files
eshanrnheshanrnh
authored
Merge pull request #7064 from umbraco/docs/remove-tinymce
V16 : Change TinyMCE defaults to Tiptap
2 parents 40db172 + 71c0572 commit 81c7968

File tree

8 files changed

+32
-25
lines changed

8 files changed

+32
-25
lines changed

‎15/umbraco-cms/customizing/umbraco-package.md

+3
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,9 @@ These are the current types of UI Extensions:
163163
| searchResultItem | A search result item is a component that can be added to the search results. |
164164
| 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. |
165165
| 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). |
166+
| 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). |
167+
| 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). |
168+
| 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). |
166169
| treeItem | A tree item that can be added to the tree. |
167170
| tree | A tree that can be added to a section. |
168171
| 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. |

‎15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md

-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@ You can continue to use the [TinyMCE UI for the Rich Text Editor](../rich-text-e
1111

1212
**Current limitations**
1313

14-
The Tiptap UI currently does not support using custom styles for your rich text.
15-
1614
Resizing media images has not been implemented yet.
1715

1816
{% endhint %}

‎16/umbraco-cms/customizing/development-flow/vite-package-setup.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,16 @@ npm install
5959
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).
6060
{% endhint %}
6161

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

6464
```bash
65-
npm install -D @umbraco-cms/backoffice
65+
npm install -D @umbraco-cms/backoffice@x.x.x
6666
```
6767

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

7070
```bash
71-
npm install --legacy-peer-deps -D @umbraco-cms/backoffice
71+
npm install --legacy-peer-deps -D @umbraco-cms/backoffice@x.x.x
7272
```
7373

7474
This disables IntelliSense for external references but keeps the install lean.

‎16/umbraco-cms/customizing/umbraco-package.md

+3
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,9 @@ These are the current types of UI Extensions:
162162
| searchProvider | A search provider is a provider that can be used to provide search results for the search bar in the Backoffice. |
163163
| searchResultItem | A search result item is a component that can be added to the search results. |
164164
| 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. |
165+
| 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). |
166+
| 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). |
167+
| 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). |
165168
| treeItem | A tree item that can be added to the tree. |
166169
| tree | A tree that can be added to a section. |
167170
| 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. |

‎16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/markdown-editor.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
`Returns: System.Web.HtmlString`
88

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

1111
## Data Type Definition Example
1212

@@ -84,8 +84,8 @@ The example below demonstrates how to add values programmatically using a Razor
8484
8585
// Create markdown value
8686
var markdownValue = new HtmlString("#heading \n**strong text**");
87-
88-
// Set the value of the property with alias 'myMarkdownEditor'.
87+
88+
// Set the value of the property with alias 'myMarkdownEditor'.
8989
content.SetValue("myMarkdownEditor", markdownValue);
9090

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

‎16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# Rich Text Editor
22

3-
`Schema Alias: Umbraco.RichText` `UI Alias: Umb.PropertyEditorUi.Tiptap`
3+
`Schema Alias: Umbraco.RichText`
4+
5+
`UI Alias: Umb.PropertyEditorUi.Tiptap`
46

57
`Returns: HTML`
68

‎16/umbraco-cms/tutorials/editors-manual/working-with-content/README.md

+14-13
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,20 @@ The Rich Text Editor is like any other word-processing program. You write the te
2121

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

24-
| Shortcut | Action |
25-
| -------- | ---------- |
26-
| Ctrl + A | Select all |
27-
| Ctrl + B | Bold |
28-
| Ctrl + C | Copy |
29-
| Ctrl + I | Italic |
30-
| Ctrl + U | Underline |
31-
| Ctrl + V | Paste |
32-
| Ctrl + X | Cut |
33-
| Ctrl + Y | Redo |
34-
| Ctrl + Z | Undo |
35-
36-
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/).
24+
| Windows/Linux | MacOS | Action |
25+
| -------- | -------- | ---------- |
26+
| <kbd>Ctrl</kbd> + <kbd>A</kbd> | <kbd>Cmd</kbd> + <kbd>A</kbd> | Select all |
27+
| <kbd>Ctrl</kbd> + <kbd>B</kbd> | <kbd>Cmd</kbd> + <kbd>B</kbd> | Bold |
28+
| <kbd>Ctrl</kbd> + <kbd>I</kbd> | <kbd>Cmd</kbd> + <kbd>I</kbd> | Italic |
29+
| <kbd>Ctrl</kbd> + <kbd>U</kbd> | <kbd>Cmd</kbd> + <kbd>U</kbd> | Underline |
30+
| <kbd>Ctrl</kbd> + <kbd>C</kbd> | <kbd>Cmd</kbd> + <kbd>C</kbd> | Copy |
31+
| <kbd>Ctrl</kbd> + <kbd>V</kbd> | <kbd>Cmd</kbd> + <kbd>V</kbd> | Paste |
32+
| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd> | <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd> | Paste without formatting |
33+
| <kbd>Ctrl</kbd> + <kbd>X</kbd> | <kbd>Cmd</kbd> + <kbd>X</kbd> | Cut |
34+
| <kbd>Ctrl</kbd> + <kbd>Z</kbd> | <kbd>Cmd</kbd> + <kbd>Z</kbd> | Undo |
35+
| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Y</kbd> | <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> | Redo |
36+
37+
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).
3738

3839
## View Source Code
3940

‎16/umbraco-forms/developer/extending/setting-types.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ Some are defined with the Umbraco CMS and some ship with the Forms package.
3333
| Umb.PropertyEditorUi.Slider | CMS | Uses a slider for range input | The "reCAPTCHAv3" field type |
3434
| Umb.PropertyEditorUi.TextArea | CMS | Uses a multiline textbox for entry | |
3535
| Umb.PropertyEditorUi.TextBox | CMS | Uses a single-line textbox for entry | |
36-
| Umb.PropertyEditorUi.TinyMCE | CMS | Uses a rich text editor for input | The "Send email" workflows |
36+
| Umb.PropertyEditorUi.Tiptap | CMS | Uses a rich text editor for input | The "Send email" workflows |
3737
| Umb.PropertyEditorUi.Toggle | CMS | Uses a single checkbox for entry | |
3838
| Umb.PropertyEditorUi.UploadField | CMS | Used for selection of a file | The "Text file" prevalue source |
3939
| Forms.PropertyEditorUi.DataTypePicker | Forms | Uses a datatype picker | The "Umbraco prevalues" prevalue source |

0 commit comments

Comments
 (0)