15: Rich Text Editor Tiptap

15/umbraco-cms/.gitbook.yaml

@@ -106,3 +106,6 @@ redirects:
     extending/packages/types-of-packages: extending/packages/README.md
     reference/configuration/nucachesettings: reference/configuration/cache-settings.md
     fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/listview: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/collection.md
+    fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-styles: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/styles.md
+    fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-plugins: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/plugins.md
+    fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-blocks: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/blocks.md

15/umbraco-cms/SUMMARY.md

@@ -29,6 +29,16 @@
 * [Backoffice](fundamentals/backoffice/README.md)
   * [Property Editors](fundamentals/backoffice/property-editors/README.md)
     * [Built-in Property Editors](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/README.md)
+      * [Rich Text Editor](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md)
+        * [Configuration](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration.md)
+        * [Plugins](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/plugins.md)
+        * [Blocks](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/blocks.md)
+        * [Change Rich Text Editor UI](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/change-rich-text-editor-ui.md)
+      * [Rich Text Editor TinyMce](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/README.md)
+        * [Configuration](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/configuration.md)
+        * [Styles](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/styles.md)
+        * [Plugins](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/plugins.md)
+        * [Blocks](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/blocks.md)
       * [Image Cropper](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/image-cropper.md)
       * [Block Editors](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md)
         * [Block Grid](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor.md)

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

@@ -0,0 +1,126 @@
+# Rich Text Editor TinyMce
+
+`Schema Alias: Umbraco.RichText`
+`UI Alias: Umb.PropertyEditorUi.TinyMCE`
+
+`Returns: HTML`
+
+{% hint style="warning" %}
+This article is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
+{% endhint %}
+
+The Rich Text Editor (RTE) is based on [tinymce](https://www.tinymce.com/) and is highly configurable. Depending on the configuration, it will give your content editors more flexibility when working with content that should be more than only plain text.
+
+{% hint style="info" %}
+**Are you using custom configuration or plugins with TinyMCE?**
+
+In Umbraco 11 the TinyMCE version supported has been upgraded from version 4 to version 6. You need to migrate to the latest version if you are using TinyMCE plugins or custom configuration.
+
+If your site is upgraded from an older version, follow the migration guides below to upgrade the TinyMCE version as well.
+
+* [Migrate from version 4 to version 5](https://www.tiny.cloud/docs/tinymce/5/migration-from-4x/)
+* [Migrate from version 5 to version 6](https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/)
+{% endhint %}
+
+## [Configuration options](configuration.md)
+
+Customize everything from toolbar options to editor size to where pasted images are saved.
+
+## [Styles](rte-styles.md)
+
+Use CSS to define specific editor styles and add them as formatting options of the Rich Text Editor.
+
+## [Blocks](rte-blocks.md)
+
+Use Blocks to define specific parts which can be added as part of the markup of the Rich Text Editor.
+
+## [Plugins](rte-plugins.md)
+
+Extend the functionality of the Rich Text Editor with plugins.
+
+## Data Type Definition Example
+
+![Rich Text Editor - Data Type](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/rich-text-editor/images/rte-datatype-v10.png)
+
+## Content Example
+
+![Rich Text Editor - Content](../../built-in-property-editors/rich-text-editor/images/rte-content-11.png)
+
+## MVC View Example
+
+### Without Modelsbuilder
+
+```csharp
+@{
+    if (Model.HasValue("richText")){
+        <p>@(Model.Value("richText"))</p>
+    }
+}
+```
+
+### With Modelsbuilder
+
+```csharp
+@{
+    if (!string.IsNullOrEmpty(Model.RichText.ToString()))
+    {
+        <p>@Model.RichText</p>
+    }
+}
+```
+
+## Add values programmatically
+
+See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the [Content Service](https://apidocs.umbraco.com/v14/csharp/api/Umbraco.Cms.Core.Services.ContentService.html).
+
+{% hint style="info" %}
+The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.
+{% endhint %}
+
+```csharp
+@using Umbraco.Cms.Core.Services;
+@inject IContentService Services;
+@{
+    // Get access to ContentService
+    var contentService = Services;
+
+    // Create a variable for the GUID of the page you want to update
+    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");
+
+    // Get the page using the GUID you've defined
+    var content = contentService.GetById(guid); // ID of your page
+
+    // Create a variable for the desired value
+    var htmlValue = new HtmlString("Add some text <strong>here</strong>");
+
+    // Set the value of the property with alias 'richText'.
+    content.SetValue("richText", htmlValue);
+
+    // Save the change
+    contentService.Save(content);
+}
+```
+
+Although the use of a GUID is preferable, you can also use the numeric ID to get the page:
+
+```csharp
+@{
+    // Get the page using it's id
+    var content = contentService.GetById(1234);
+}
+```
+
+If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string.
+
+{% hint style="warning" %}
+The following example uses `IPublishedSnapshotAccessor` which is obsolete in Umbraco 15 and will be removed in a later version.
+{% endhint %}
+
+```csharp
+@using Umbraco.Cms.Core.PublishedCache;
+@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
+@{
+    // Set the value of the property with alias 'richText'
+        content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.RichText).Alias, "Add some text <strong>here</strong>");
+}
+```

15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-blocks.md → 15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/blocks.md

@@ -1,4 +1,4 @@
-# Blocks in Rich Text Editor
+# Blocks
 
 {% hint style="warning" %}
 This article is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.

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

@@ -0,0 +1,69 @@
+# Configuration
+
+{% embed url="<https://www.youtube.com/watch?v=QRIWz9SotY4>" %}
+Rich Text Editor default implementation
+{% endembed %}
+
+In this article you can learn about the different ways you can configure the Rich Text Editor (RTE).
+
+## Toolbar
+
+You have full control over which options should be available on the RTE.
+
+![Toolbar: All options enabled](../../built-in-property-editors/rich-text-editor/images/toolbar-full-11.png)
+
+In the examble above, all 34 options have been enabled. The options include copy/paste buttons, font styles like bold and italics, bullet lists and options to embed videos and insert images.
+
+## Stylesheets
+
+It is possible to define specific styles that can be used when editing content using the RTE. You can use as many of these styles with the RTE as you want.
+
+The RTE styles are defined in CSS files which can be created in the **Settings** section. Read the [RTE Styles](rte-styles.md) article to learn more about this feature.
+
+## Dimensions
+
+Define `height` and `width` of the editor displayed in the content section.
+
+## Maximum size for inserted images
+
+Define the maximum size for images added through the Rich Text Editor.
+
+If inserted images are larger than the dimensions defined here, the images will be resized automatically.
+
+## Mode
+
+The Rich Text Editor comes in two different modes: Classic and Inline.
+
+### Classic
+
+The default mode which displays the toolbar at the top.
+
+![RTE Mode: Classic](images/rte-mode-classic-11.png)
+
+### Inline
+
+In this mode the toolbar is hidden, and only shows up when content in the editor is highlighted.
+
+![Rich Text Editor Inline mode](images/inline-mode-new.png)
+
+## Blocks
+
+Blocks can be added as elements in the Rich Text Editor. Configuration and rendering of Blocks is described in the [Blocks in Rich Text Editor](blocks.md) article.
+
+## Overlay Size
+
+Select the width of the link picker overlay. The overlay size comes in three sizes: Small, Medium, and Large.
+
+## Hide Label
+
+When this option is checked the label and description for the RTE property will be hidden.
+
+## Ignore User Start Nodes
+
+Some of the backoffice users might be restricted to a specific part of the content tree. When the "Ignore User Start Nodes" is checked, users can pick any piece of content, when adding internal links.
+
+## Image Upload Folder
+
+Images added through the RTE is by default added to the root of the Media library.
+
+Sometimes you might want to add the images to a specific folder. This folder can be configured using the "Image Upload Folder" setting.

15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-plugins.md → 15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/plugins.md

@@ -2,9 +2,7 @@
 description: Information on how to work with TinyMCE plugins in the rich text editor.
 ---
 
-# Rich Text Editor Plugins
-
-## Overview
+# Plugins
 
 The Rich Text Editor (RTE) in Umbraco is based on the open source editor [TinyMCE](https://www.tiny.cloud/). TinyMCE is a highly customizable editor, and it is possible to extend the functionality of the editor by adding plugins.
 

15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-styles.md → 15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/styles.md

@@ -1,4 +1,4 @@
-# Rich Text Editor Styles
+# Styles
 
 It is possible to define specific styles and fonts for the Rich Text Editor (RTE). Once you have defined the styles, and enabled them on the RTE Data Type, the styles can be accessed directly in the Content section.
 

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

@@ -1,69 +1,61 @@
-# Rich Text Editor
+# Rich Text Editor Tiptap
 
-`Alias: Umbraco.TinyMCE`
+`Schema Alias: Umbraco.RichText`
+`UI Alias: Umb.PropertyEditorUi.TipTap`
 
 `Returns: HTML`
 
 {% hint style="warning" %}
-This article is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
-{% endhint %}
-
-The Rich Text Editor (RTE) is based on [tinymce](https://www.tinymce.com/) and is highly configurable. Depending on the configuration, it will give your content editors more flexibility when working with content that should be more than only plain text.
-
-{% hint style="info" %}
-**Are you using custom configuration or plugins with TinyMCE?**
+In Umbraco 15, the Rich Text Editor has gotten an alternative that introduces Tiptap as the new default property editor UI.
 
-In Umbraco 11 the TinyMCE version supported has been upgraded from version 4 to version 6. You need to migrate to the latest version if you are using TinyMCE plugins or custom configuration.
+You can continue to use the [TinyMCE UI for the Rich Text Editor](../rich-text-editor-tinymce/README.md). This UI will be removed in Umbraco 16.
 
-If your site is upgraded from an older version, follow the migration guides below to upgrade the TinyMCE version as well.
+**Current limitations**
 
-* [Migrate from version 4 to version 5](https://www.tiny.cloud/docs/tinymce/5/migration-from-4x/)
-* [Migrate from version 5 to version 6](https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/)
+The Tiptap UI currently does not support using custom styles for your rich text.
 {% endhint %}
 
+The Rich Text Editor (RTE) Tiptap property editor is based on [Tiptap](https://tiptap.dev/) and is highly configurable. Dependening on the configuration set up, it gives your editors a lot of flexibility when working with content.
+
 ## [Configuration options](configuration.md)
 
 Customize everything from toolbar options to editor size to where pasted images are saved.
 
-## [Styles](rte-styles.md)
-
-Use CSS to define specific editor styles and add them as formatting options of the Rich Text Editor.
-
-## [Blocks](rte-blocks.md)
+## [Blocks](blocks.md)
 
 Use Blocks to define specific parts which can be added as part of the markup of the Rich Text Editor.
 
-## [Plugins](rte-plugins.md)
+## [Plugins](plugins.md)
 
 Extend the functionality of the Rich Text Editor with plugins.
 
 ## Data Type Definition Example
 
-![Rich Text Editor - Data Type](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/rich-text-editor/images/rte-datatype-v10.png)
+![Rich Text Editor - Data Type](images/rte-tiptap-datatypedefinition.png)
 
 ## Content Example
 
-![Rich Text Editor - Content](../../built-in-property-editors/rich-text-editor/images/rte-content-11.png)
+![Rich Text Editor - Content Example](images/rte-tiptap-contentexample.png)
 
 ## MVC View Example
 
-### Without Modelsbuilder
+### With Modelsbuilder
 
 ```csharp
 @{
-    if (Model.HasValue("richText")){
-        <p>@(Model.Value("richText"))</p>
+    if (!string.IsNullOrEmpty(Model.RichText.ToString()))
+    {
+        <p>@Model.RichText</p>
     }
 }
 ```
 
-### With Modelsbuilder
+### Without Modelsbuilder
 
 ```csharp
 @{
-    if (!string.IsNullOrEmpty(Model.RichText.ToString()))
-    {
-        <p>@Model.RichText</p>
+    if (Model.HasValue("richText")){
+        <p>@(Model.Value("richText"))</p>
     }
 }
 ```
@@ -109,7 +101,11 @@ Although the use of a GUID is preferable, you can also use the numeric ID to get
 }
 ```
 
-If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:
+If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string.
+
+{% hint style="warning" %}
+The following example uses `IPublishedSnapshotAccessor` which is obsolete in Umbraco 15 and will be removed in a later version.
+{% endhint %}
 
 ```csharp
 @using Umbraco.Cms.Core.PublishedCache;