diff --git a/16/umbraco-cms/.gitbook.yaml b/16/umbraco-cms/.gitbook.yaml index a6cb5d706d4..af9f93527e9 100644 --- a/16/umbraco-cms/.gitbook.yaml +++ b/16/umbraco-cms/.gitbook.yaml @@ -5,4 +5,9 @@ root: ./ summary: SUMMARY.md redirects: - \ No newline at end of file + fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md + fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/configuration: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration.md + fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/styles: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md + fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/plugins: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/extensions.md + fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/blocks: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/blocks.md + fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/change-rich-text-editor-ui: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md \ No newline at end of file diff --git a/16/umbraco-cms/SUMMARY.md b/16/umbraco-cms/SUMMARY.md index af4a95a927e..9312368f4b6 100644 --- a/16/umbraco-cms/SUMMARY.md +++ b/16/umbraco-cms/SUMMARY.md @@ -81,12 +81,6 @@ * [Configuration](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration.md) * [Extensions](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/extensions.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) * [Login](fundamentals/backoffice/login.md) * [Document Blueprints](fundamentals/backoffice/document-blueprints.md) * [Sidebar](fundamentals/backoffice/sidebar.md) diff --git a/16/umbraco-cms/customizing/umbraco-package.md b/16/umbraco-cms/customizing/umbraco-package.md index e48638e5615..dedd128eec4 100644 --- a/16/umbraco-cms/customizing/umbraco-package.md +++ b/16/umbraco-cms/customizing/umbraco-package.md @@ -162,7 +162,6 @@ 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. | -| 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). | | 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. | diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/README.md b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/README.md deleted file mode 100644 index c0c2f12ff39..00000000000 --- a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/README.md +++ /dev/null @@ -1,123 +0,0 @@ -# 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 - -![Rich Text Editor - Data Type](images/rte-datatype-v10.png) - -## Content Example - -![Rich Text Editor - Content](images/rte-content-11.png) - -## MVC View Example - -### Without Modelsbuilder - -```csharp -@{ - if (Model.HasValue("richText")){ -

@(Model.Value("richText"))

- } -} -``` - -### With Modelsbuilder - -```csharp -@{ - if (!string.IsNullOrEmpty(Model.RichText.ToString())) - { -

@Model.RichText

- } -} -``` - -## 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 here"); - - // 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 here"); -} -``` diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/blocks.md b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/blocks.md deleted file mode 100644 index 4263b54ad75..00000000000 --- a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/blocks.md +++ /dev/null @@ -1,101 +0,0 @@ -# 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. -{% 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. -* **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 - -@* Output the 'heading' field from the Content Model using the `backgroundColor` field from the Settings Model as background color *@ -

@Model.Content.Value("heading")

-``` - -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> -@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels; - -@* Output the Heading of field with alias 'heading' from the 'MyBlockType' Content Model *@ -

@Model.Content.Heading

-``` - -## 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](../../../../../tutorials/creating-custom-views-for-blocklist.md). diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/configuration.md b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/configuration.md deleted file mode 100644 index 3f2464248b7..00000000000 --- a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/configuration.md +++ /dev/null @@ -1,69 +0,0 @@ -# Configuration - -{% embed url="" %} -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. - -![Toolbar: All options enabled](images/toolbar-full-11.png) - -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. - -![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 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. diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/inline-mode-new.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/inline-mode-new.png deleted file mode 100644 index 6b6ea1f4288..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/inline-mode-new.png and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/my-rte-button-editor.jpg b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/my-rte-button-editor.jpg deleted file mode 100644 index 8b9a659bf46..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/my-rte-button-editor.jpg and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/my-rte-button.jpg b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/my-rte-button.jpg deleted file mode 100644 index 8e43b2a5167..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/my-rte-button.jpg and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-choose-stylesheet.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-choose-stylesheet.png deleted file mode 100644 index 8452a57a36b..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-choose-stylesheet.png and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-code-tab.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-code-tab.png deleted file mode 100644 index 767739a3f31..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-code-tab.png and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-content-11.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-content-11.png deleted file mode 100644 index ab1e9acf68c..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-content-11.png and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-create-style.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-create-style.png deleted file mode 100644 index 5d5ca865fdd..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-create-style.png and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-data-type-block-fields.jpg b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-data-type-block-fields.jpg deleted file mode 100644 index ed0ed6da5d4..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-data-type-block-fields.jpg and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-data-type-block-type-editor.jpeg b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-data-type-block-type-editor.jpeg deleted file mode 100644 index dd54171ac52..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-data-type-block-type-editor.jpeg and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-datatype-v10.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-datatype-v10.png deleted file mode 100644 index a69a02a082d..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-datatype-v10.png and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-datatype.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-datatype.png deleted file mode 100644 index 0c22f13a5bf..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-datatype.png and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-mode-classic-11.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-mode-classic-11.png deleted file mode 100644 index 082f49bdf78..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-mode-classic-11.png and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-mode-classic-new.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-mode-classic-new.png deleted file mode 100644 index ade47ad435a..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-mode-classic-new.png and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-styles.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-styles.png deleted file mode 100644 index 2d5435266c7..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/rte-styles.png and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/toolbar-all-options.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/toolbar-all-options.png deleted file mode 100644 index 7c289bd39bd..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/toolbar-all-options.png and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/toolbar-full-11.png b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/toolbar-full-11.png deleted file mode 100644 index 7f4d5b84f19..00000000000 Binary files a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/images/toolbar-full-11.png and /dev/null differ diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/plugins.md b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/plugins.md deleted file mode 100644 index fa585b480a3..00000000000 --- a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/plugins.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -description: Information on how to work with TinyMCE plugins in the rich text editor. ---- - -# 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. - -TinyMCE comes with a lot of plugins out of the box, but it is also possible to create your own plugins. This article will show you how to add a custom plugin to the rich text editor. - -## Open-Source Plugins - -TinyMCE has a lot of open-source plugins available. You can find a list of these plugins on the [TinyMCE website](https://www.tiny.cloud/docs/tinymce/6/plugins/#open-source-plugins). - -## Premium Plugins - -TinyMCE also has a number of [premium plugins](https://www.tiny.cloud/docs/tinymce/6/plugins/#premium-plugins) available. These plugins are only available for [paid TinyMCE subscriptions](https://www.tiny.cloud/pricing/). They can be added to the rich text editor by [adding a bit of configuration](#adding-a-premium-plugin). - -## Adding a Plugin - -To enable plugins in the rich text editor, you need to add an extension type called `tinyMcePlugin` in a manifest file. The manifest file is a JSON file that describes the plugin and how it should be loaded. You can add a plugin such as the open source [Word Count Plugin](https://www.tiny.cloud/docs/tinymce/6/wordcount/) to the rich text editor. You can also define your own custom plugin to extend the functionality of the editor. This way you can add custom buttons, dialogs, or other features to the editor. - -{% hint style="info" %} -The manifest file should be placed in a folder in `App_Plugins/{YourPackageName}`, with the name `umbraco-package.json`. -{% endhint %} - -{% code title="App_Plugins/YourPackageName/umbraco-package.json" lineNumbers="true" %} - -```json -{ - "name": "My TinyMCE Plugin", - "version": "1.0.0", - "extensions": [ - { - "type": "tinyMcePlugin", - "alias": "mytinymceplugin", - "name": "My TinyMCE Plugin", - "meta": { - "config": { - "plugins": ["wordcount"], - "statusbar": true - } - } - } - ] -} -``` - -{% endcode %} - -The example above shows how to add the open-source [Word Count Plugin](https://www.tiny.cloud/docs/tinymce/6/wordcount/) to the rich text editor. The plugin is added to the `Plugins` array in the configuration. The plugin itself will be shown in the statusbar of the rich text editor, so the `statusbar` option is also added to the `config` object. - -## Creating a Custom Plugin - -If you want to create your own plugin, you should in general follow the [TinyMCE documentation](https://www.tiny.cloud/docs/tinymce/latest/creating-a-plugin/). However, there are a few things you need to be aware of to load the plugin in Umbraco. See the example below. - -### Examples - -Load a custom plugin that gives you the ability to interact with the global `tinymce` editor object. - -Here we are loading a custom plugin called `myrteplugin` and adding a button to the editor called `myrtebutton`. When the button is clicked, it will insert the text `Hello World!` into the editor. - -
Rich text editor showing a custom button

The text "Hello World!" shows up after clicking the button

- -1.**Add a manifest file** - -First we create an `umbraco-package.json` file which will contain the manifest for the plugin. This adds a button to the toolbar in the rich text editor, which editors can enable on the Data Type. We are also letting the rich text editor know it should load the plugin from the `plugin.js` file. - -{% code title="App_Plugins/MyRtePlugin/umbraco-package.json" lineNumbers="true" %} - -```json -{ - "name": "My TinyMCE Plugin", - "version": "1.0.0", - "extensions": [ - { - "type": "tinyMcePlugin", - "alias": "myrteplugin", - "name": "My TinyMCE Plugin", - "js": "/App_Plugins/MyRtePlugin/plugin.js", - "meta": { - "toolbar": [ - { - "alias": "myrtebutton", - "label": "My RTE Button", - "icon": "code-sample" - } - ] - } - } - ] -} -``` - -{% endcode %} - -2.**Add the plugin.js file** - -The `plugin.js` file should contain the JavaScript code for the plugin. The file is loaded as a JavaScript module and must export a default class that extends the `UmbTinyMcePluginBase` class. - -{% hint style="info" %} -The `UmbTinyMcePluginBase` class is a class provided by Umbraco that you can use to create your own plugins. The class is a wrapper around the TinyMCE plugin API. We can use the `args` object on the constructor to access the TinyMCE editor instance and other useful properties. -{% endhint %} - -{% code title="App_Plugins/MyTinyMCEPlugin/plugin.js" lineNumbers="true" %} - -```js -import { UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/tiny-mce'; - -export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase { - /** - @param args {import('@umbraco-cms/backoffice/tiny-mce').TinyMcePluginArguments} - */ - constructor(args: TinyMcePluginArguments) { - super(args); - - // Add your plugin code here - args.editor.ui.registry.addButton('myrtebutton', { - text: 'My RTE Button', - icon: 'code-sample', - onAction: () => { - args.editor.insertContent('Hello World!'); - } - }); - } -} -``` - -{% endcode %} - -The button must be added to the toolbar in the rich text editor configuration. - -
Rich text editor configuration showing available options

Enable the button in the rich text editor configuration

- -You can go to any Document Type that uses the rich text editor and click the button to insert the text `Hello World!` after. - -You have full access to the `tinymce` editor object, so you can create any custom functionality you need. - -### Learn more - -* [TinyMCE documentation](https://www.tiny.cloud/docs/) -* [TinyMCE tutorial: Creating a plugin](https://www.tiny.cloud/docs/tinymce/latest/creating-a-plugin/) - -## Adding a premium plugin - -To add a premium plugin, you need to add the plugin name to the `plugins` array in the `config` object of a `tinyMcePlugin` extension. You also need to add a JavaScript module that can load up the cloud-hosted TinyMCE premium plugins bundle. - -{% hint style="info" %} -Premium plugins require a subscription at [TinyMCE Cloud](https://www.tiny.cloud/). You can go there and sign up for a free trial. You will get a Cloud API key that you can use to try out the premium plugins. -{% endhint %} - -1. Declaring the plugin - -Let us first add the [powerpaste](https://www.tiny.cloud/docs/tinymce/6/introduction-to-powerpaste/) plugin to the rich text editor. This plugin is a premium plugin that helps you paste content from Word documents and other sources. We will configure the plugin to allow local images and clean the HTML when pasting Word documents. - -{% code title="App_Plugins/MyRtePlugin/umbraco-package.json" lineNumbers="true" %} - -```json -{ - "name": "My TinyMCE Plugin", - "version": "1.0.0", - "extensions": [ - { - "type": "tinyMcePlugin", - "alias": "mytinymceplugin", - "name": "My TinyMCE Plugin", - "js": "/App_Plugins/MyRtePlugin/plugin.js", - "meta": { - "config": { - "plugins": ["powerpaste"], - "powerpaste_allow_local_images": "true", - "powerpaste_word_import": "clean" - } - } - } - ] -} -``` - -{% endcode %} - -2. Creating the plugin.js file - -The `plugin.js` file should contain the JavaScript code to load the cloud-hosted TinyMCE premium plugins bundle. You must replace `{Cloud API Key}` with your own Cloud API key. - -{% code title="App_Plugins/MyTinyMCEPlugin/plugin.js" lineNumbers="true" %} - -```js -import 'https://cdn.tiny.cloud/1/{Cloud API Key}/tinymce/6/plugins.min.js'; -``` - -{% endcode %} - -We have now enabled the `powerpaste` plugin. We have configured it to allow pasting in local images. It will prompt when pasting Word documents, but for HTML documents it will clean the HTML without prompting. - -{% hint style="info" %} -You can enable as many plugins as you want through the `plugins` array in the `config` object. You can even combine premium, open-source, and your own plugins as you see fit. -{% endhint %} - -See all the [available premium plugins](https://www.tiny.cloud/docs/tinymce/6/plugins/#premium-plugins) on the TinyMCE website. diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/styles.md b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/styles.md deleted file mode 100644 index 67e925990e4..00000000000 --- a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/styles.md +++ /dev/null @@ -1,44 +0,0 @@ -# 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. - -![Rich Text Editor Styles](images/rte-styles.png) - -## Creating RTE Styles - -The RTE styles are created and managed in the Umbraco backoffice. - -* Find the **Stylesheets** folder in the Settings section. -* Click **...** next to the **Stylesheets** folder and select **Create...**. -* Choose _New Rich Text Editor style sheet file_. -* Give the new stylesheet a name and **Save** it. - -This will generate an empty CSS file in your project. - -At this point, you can start adding specific styles, that your editors can then use in the Content section when creating and writing new content. - -![Add specific RTE styles](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/rich-text-editor/images/rte-create-style.png) - -The image above is an example of how an RTE style can be configured. When working with these styles, the **Preview** feature will show you how the style will look when applied. - -Every style you add, will automatically be added to the CSS file. The file will be placed in the same location as the rest of your CSS files. It is possible to edit the file directly from the backoffice as well. Access it from the **Code** tab in the top-right corner. - -![Edit CSS file directly in the backoffice](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/rich-text-editor/images/rte-code-tab.png) - -## Using RTE Styles - -In order for your editors to be able to use the styles when working with content, two things needs to be done. - -### 1. Enable "Style select" - -The styles will be accessed by the editors using the "Formats" dropdown in the toolbar of the RTE. In order the enable the dropdown, the "Style select" toolbar option needs to be checked. - -This can be done by accessing the RTE Data Type directly from the "Info" tab on the Content. You can also find the RTE Data Type in the Settings section of the backoffice and make the changes from there. Learn more about the configuration options in the [RTE Config](configuration.md) article. - -### 2. Select the styles - -You can have as many different styles for your RTEs as you want. You might want to have different styles for different RTE Data Types. - -When configuring your RTE Data Types, you can select which stylesheets your content editors should be able to use. - -![Choose stylesheets on the Data Type](../../../../../../../10/umbraco-cms/fundamentals/backoffice/property-editors/built-in-property-editors/rich-text-editor/images/rte-choose-stylesheet.png) diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md index 2ec74dbffeb..7018e9a31c5 100644 --- a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md +++ b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md @@ -5,19 +5,10 @@ `Returns: HTML` {% hint style="warning" %} -In Umbraco 15, the Rich Text Editor has a new default property editor UI that introduces Tiptap as an alternative. - -You can continue to use the [TinyMCE UI for the Rich Text Editor](../rich-text-editor-tinymce/). This UI will be removed in Umbraco 16. - -**Current limitations** - -The Tiptap UI currently does not support using custom styles for your rich text. - -Resizing media images has not been implemented yet. - +With the release of Umbraco 16, [the TinyMCE UI option for the Rich Text Editor is removed](../../../../setup/upgrading/version-specific/README.md#breaking-changes). {% endhint %} -The Rich Text Editor (RTE) Tiptap property editor is highly configurable and based on [Tiptap](https://tiptap.dev/). Depending on the configuration setup, it provides editors a lot of flexibility when working with content. +The Rich Text Editor property editor is highly configurable and based on [Tiptap](https://tiptap.dev/). Depending on the configuration setup, it provides editors a lot of flexibility when working with content. ## [Configuration options](configuration.md) diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/change-rich-text-editor-ui.md b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/change-rich-text-editor-ui.md deleted file mode 100644 index b7a0d938364..00000000000 --- a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/change-rich-text-editor-ui.md +++ /dev/null @@ -1,57 +0,0 @@ -# Change Rich Text Editor UI - -{% hint style="info" %} -Umbraco 15 includes two options for rich text editing: Tiptap and TinyMCE. TinyMCE will eventually be phased out of the CMS. - -This article will guide you through switching from TinyMCE UI to the new Tiptap UI. -{% endhint %} - -The following steps will guide you through changing the property editor used for rich text on an existing Document Type. - -## Create a new Data Type - -The first step in this guide is to create a new Rich Text Editor Data Type using the Tiptap property editor. - -As an alternative, you can create a new Data Type using the Tiptap property editor when updating the Document Type. - -{% hint style="info" %} -When swapping the UI used for the Rich Text Editor, you may need to reconfigure the toolbar. -{% endhint %} - -1. Navigate to the **Settings** section of the Umbraco Backoffice. -2. Select **+** next to the Data Types folder. -3. Select **New Data Type...**. - -![Click on + next to the Data Types folder to create a new Data Type](images/rte-swap-new-data-type.png) - -4. Give the new Data Type a name. -5. Click **Select a property editor**. -6. Choose **Rich Text Editor [Tiptap]**. - -![Search for and choose the Rich Text Editor Tiptap UI](images/rte-swap-select-ui.png) - -7. [Configure the Data Type](./configuration.md) to match your needs. -8. **Save** the Data Type. - -## Update the Document Type(s) - -Once you have prepared the new Data Type you need to update the Document Types that should use it. - -1. Expand the **Document Types** folder. -2. Select a Document Type that needs to be updated. -3. Click on the Property used for rich text. - -![Click on the property used for rich Text in the Document Type editor](images/rte-swap-change-property.png) - -4. Hover over the selected property editor and click **Change**. -5. Search for the newly created Data Type and select it. - -![Search for the new Data Type and select it](images/rte-swap-search-and-find-new-ui.png) - -6. **Submit** the changes. -7. **Save** the Document Type. -8. Repeat steps 2-7 for each Document Type that needs to use the new Data Type. - -## Verify your content - -When you have updated all the relevant Document Types, it is recommended to verify the content that uses the Rich Text Editor. diff --git a/16/umbraco-cms/reference/templating/macros.md b/16/umbraco-cms/reference/templating/macros.md index 7ee641e3071..b3cce83007b 100644 --- a/16/umbraco-cms/reference/templating/macros.md +++ b/16/umbraco-cms/reference/templating/macros.md @@ -5,7 +5,7 @@ Macros and Partial View Macros have been removed with the release of Umbraco 14. -We recommend using using [Partial Views](../../fundamentals/design/partial-views.md) or [Blocks in the Rich Text Editor](../../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor-tinymce/blocks.md) as a replacement. +We recommend using using [Partial Views](../../fundamentals/design/partial-views.md) or [Blocks in the Rich Text Editor](../../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/blocks.md) as a replacement. Learn more about the decision for remove Macros in the official announcement: [Breaking change: Macros will be removed in Umbraco 14](https://github.com/umbraco/Announcements/issues/14). {% endhint %} diff --git a/16/umbraco-cms/release-candidate-guide.md b/16/umbraco-cms/release-candidate-guide.md index 3d10493bea9..83e8b88f4de 100644 --- a/16/umbraco-cms/release-candidate-guide.md +++ b/16/umbraco-cms/release-candidate-guide.md @@ -71,6 +71,12 @@ The blog post will mention if there are any specific features or workflows that Here is a list of all the articles that are new to this version or have been updated. +### Removed articles + +* [TinyMCE is removed](fundamentals/setup/upgrading/version-specific/README.md#breaking-changes): + * Rich Text Editor (TinyMCE) article incl. sub-articles. + * Change Rich Text Editor UI article. + ### New articles * Coming soon...