15: Rich Text Editor Tiptap #6498
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 highly configurable and based on [TinyMCE](https://www.tinymce.com/). Depending on the configuration, it will give your content editors more flexibility when working with content that should be more than plain text. | ||
|
|
||
| {% hint style="info" %} | ||
| **Are you using custom configurations 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](styles.md) | ||
|
|
||
| Use CSS to define specific editor styles and add them as formatting options of the Rich Text Editor. | ||
|
|
||
| ## [Blocks](blocks.md) | ||
|
|
||
| Use Blocks to define specific parts that can be added as part of the markup of the Rich Text Editor. | ||
|
|
||
| ## [Plugins](plugins.md) | ||
|
|
||
| Extend the functionality of the Rich Text Editor with plugins. | ||
|
|
||
| ## Data Type Definition Example | ||
|
|
||
|  | ||
|
|
||
| ## Content Example | ||
|
|
||
|  | ||
|
|
||
| ## 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/v15/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>"); | ||
| } | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| # Configuration | ||
|
|
||
| {% embed url="<https://www.youtube.com/watch?v=QRIWz9SotY4>" %} | ||
| Rich Text Editor default implementation | ||
| {% endembed %} | ||
|
|
||
| In this article, you will learn about different ways to configure the Rich Text Editor (RTE). | ||
|
|
||
| ## Toolbar | ||
|
|
||
| You have full control over which options should be available on the RTE. | ||
|
|
||
|  | ||
|
|
||
| In the example above, all 34 options have been enabled. These 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](styles.md) article to learn more about this feature. | ||
|
|
||
| ## Dimensions | ||
|
|
||
| Define the `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. | ||
|
|
||
|  | ||
|
|
||
| ### Inline | ||
|
|
||
| In this mode, the toolbar is hidden and only shows up when content in the editor is highlighted. | ||
|
|
||
|  | ||
|
|
||
| ## Blocks | ||
|
|
||
| Blocks can be added as elements in the Rich Text Editor. Configuration and rendering of Blocks are 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 backoffice users might be restricted to specific parts of the Content tree. When the "Ignore User Start Nodes" option is checked, users can pick any piece of content, when adding internal links. | ||
|
|
||
| ## Image Upload Folder | ||
|
|
||
| Images added through the RTE are 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. |
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.