Rearrange articles and update default data types

15/umbraco-cms/SUMMARY.md

@@ -28,7 +28,8 @@
 * [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 Tiptap](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tiptap.md)
+      * [Rich Text Editor](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md)
+      * [Rich Text Editor TinyMce](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/README.md)
       * [Image Cropper](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/image-cropper.md)
 
 ## Implementation

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

@@ -0,0 +1,122 @@
+# Rich Text Editor TinyMce
+
+`Schema Alias: Umbraco.RichText`
+`UI Alias: Umbraco.RichText`
+
+`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:
+
+```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-tinymce/configuration.md

@@ -0,0 +1,71 @@
+# Rich Text Editor Configuration
+
+## Configuration
+
+{% embed url="<https://www.youtube.com/watch?v=QRIWz9SotY4>" %}
+Rich Text Editor default implementation
+{% endembed %}
+
+In this article you can learn about the various ways you can configure the 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](../../built-in-property-editors/rich-text-editor/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](../../built-in-property-editors/rich-text-editor/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](rte-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, the users can pick any piece of content from the content tree, when adding internal links through the RTE.
+
+### 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-tinymce/rte-blocks.md

@@ -0,0 +1,101 @@
+# Blocks in Rich Text Editor
+
+{% 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 %}
+
+It is possible to insert Blocks into the markup of the Rich Text Editor (RTE). Once you've defined the Block Type as part of the RTE Data Type and enabled the Blocks Toolbar Option. Then Blocks can be created directly inside the Rich Text Editor.
+
+## Configure Blocks
+
+The Block List property editor is configured in the same way as any standard property editor, via the _Data Types_ admin interface.
+
+To set up your Block List Editor property, create a new _Data Type_ and select **Block List** from the list of available property editors.
+
+Then you will see the configuration options for a Block List as shown below.
+
+![Rich Text Editor - Data Type Block Fields](images/rte-data-type-block-fields.jpg)
+
+The Data Type editor allows you to configure the following properties:
+
+* **Available Blocks** - Here you will define the Block Types to be available for use in the property. Read more on how to set up Block Types below.
+* **Blocks Live editing mode** - Enabling this will make editing of a Block happen directly to the Rich Text Editor, making changes appear as you type.
+
+## Setup Block Types
+
+Block Types are **Element Types** that need to be created before you can start configuring them as Block Types. This can be done either directly from the property editor setup process, or you can set them up beforehand. If they are set beforehand then they need to be added to the Rich Text Editor afterward.
+
+Once you add an Element Type as a Block Type on your Rich Text Editor Data Type you will have options to configure it further.
+
+![Rich Text Editor - Data Type Block Configuration](images/rte-data-type-block-type-editor.jpeg)
+
+Each Block has a set of properties that are optional to configure. They are described below.
+
+### Editor Appearance
+
+By configuring the properties in the group you can customize the user experience for your content editors when they work with the blocks in the Content section.
+
+* **Label** - Define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties. [Examples and more details about labels and AngularJS templates.](../block-editor/label-property-configuration.md)
+* **Display Inline with text** - When turned on the Block Element will be able to stay in line with text or other elements. If not the Block will stay on its own line.
+* **Custom view** - Overwrite the AngularJS view for the block presentation in the Content editor. Use this to make a more visual presentation of the block or even make your own editing experience by adding your own AngularJS controller to the view.
+* **Custom stylesheet** - Pick your own stylesheet to be used for this block in the Content editor. By adding a stylesheet the styling of this block will become scoped. Meaning that backoffice styles are no longer present for the view of this block.
+* **Overlay editor size** - Set the size for the Content editor overlay for editing this block.
+
+### Data Models
+
+It is possible to use two separate Element Types for your Block Types. It's required to have one for Content and optional to add one for Settings.
+
+* **Content model** - This presents the Element Type used as a model for the content section of this Block. This cannot be changed, but you can open the Element Type to perform edits or view the properties available. Useful when writing your Label.
+* **Settings model** - Add a Settings section to your Block based on a given Element Type. When picked you can open the Element Type or choose to remove the settings section again.
+
+### Catalogue appearance
+
+These properties refer to how the Block is presented in the Block catalog when editors choose which Blocks to use for their content.
+
+* **Background color** - Define a background color to be displayed beneath the icon or thumbnail. Eg. `#424242`.
+* **Icon Color** - Change the color of the Element Type icon. Eg. `#242424`.
+* **Thumbnail** - Pick an image or Scalable Vector Graphics (SVG) file to replace the icon of this Block in the catalog.
+
+The thumbnails for the catalog are presented in the format of 16:10, and we recommend a resolution of 400px width and 250px height.
+
+### Advanced
+
+These properties are relevant when you work with custom views.
+
+* **Force hide content editor** - If you made a custom view that enables you to edit the content part of a block and you are using default editing mode (not inline) you might want to hide the content editor from the block editor overlay.
+
+## Rendering Blocks
+
+To render Blocks in the frontend, you must create Partial Views for each Block.
+
+The Partial Views must be:
+
+* Named by the alias of the Element Type that is being used as the Content Model for the Block.
+* Placed in the folder `Views/Partials/RichText/Components/`.
+
+For example, if the Element Type alias of the Content Model is `myBlockType`, a Partial View must be created at `Views/Partials/RichText/Components/MyBlockType.cshtml`.
+
+The Partial View will receive the model of `Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem`. This gives you the option to access properties of the Content and Settings Models of your Block, as illustrated in the following sample:
+
+```csharp
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem>
+
+@* Output the 'heading' field from the Content Model using the `backgroundColor` field from the Settings Model as background color *@
+<h1 style="background-color:@Model.Settings.Value("backgroundColor")">@Model.Content.Value("heading")</h1>
+```
+
+If you use ModelsBuilder, you can specify the Content Model (and optionally the Settings Model) in the Partial View model. This allows for type-safe access to the Block data.
+
+The following example shows a Partial View of a Block with `MyBlockType` as Content Model and `MyBlockSettingsType` as Settings Model:
+
+```csharp
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem<MyBlockType, MyBlockSettingsType>>
+@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
+
+@* Output the Heading of field with alias 'heading' from the 'MyBlockType' Content Model *@
+<h1 style="background-color:@Model.Settings.BackgroundColor">@Model.Content.Heading</h1>
+```
+
+## Build a Custom Backoffice View
+
+Building Custom Views for Block representations in Backoffice is the same for all Block Editors. [Read about building a Custom View for Blocks here](../block-editor/build-custom-view-for-blocks.md)