diff --git a/10/umbraco-cms/.gitbook.yaml b/10/umbraco-cms/.gitbook.yaml
index 1615f936f0f..04cd32fccb6 100644
--- a/10/umbraco-cms/.gitbook.yaml
+++ b/10/umbraco-cms/.gitbook.yaml
@@ -6,3 +6,5 @@ root: ./
redirects:
tutorials/add-azure-active-directory-authentication: tutorials/add-microsoft-entra-id-authentication.md
+ tutorials/editors-manual/working-with-content/rich-text-editor: tutorials/editors-manual/working-with-content.md
+
diff --git a/10/umbraco-cms/SUMMARY.md b/10/umbraco-cms/SUMMARY.md
index 4cc0fe0f171..44d353eb156 100644
--- a/10/umbraco-cms/SUMMARY.md
+++ b/10/umbraco-cms/SUMMARY.md
@@ -445,7 +445,6 @@
* [Copying a Page](tutorials/editors-manual/getting-started-with-umbraco/copying-a-page.md)
* [Deleting and Restoring Pages](tutorials/editors-manual/getting-started-with-umbraco/deleting-and-restoring-pages.md)
* [Working with Rich Text Editor](tutorials/editors-manual/working-with-content/README.md)
- * [Rich Text Editor](tutorials/editors-manual/working-with-content/rich-text-editor.md)
* [Version Management](tutorials/editors-manual/version-management/README.md)
* [Comparing Versions](tutorials/editors-manual/version-management/comparing-versions.md)
* [Rollback to a Previous Version](tutorials/editors-manual/version-management/rollback-to-a-previous-version.md)
diff --git a/10/umbraco-cms/tutorials/editors-manual/working-with-content/README.md b/10/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
index 66476c50a00..20d8d776743 100644
--- a/10/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
+++ b/10/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
@@ -1,41 +1,25 @@
# Working with Rich Text Editor
-The Umbraco Rich Text Editor is an editable field where you, as the editor, can be creative. You select how much you want to do yourself. You can work on text content, format the text, or leave it the way it is.
+The Umbraco Rich Text Editor (RTE) is a field where you, as an editor, can be creative. You can select how much you want to do yourself. You can work on text content, format the text, or leave it the way it is. If you want to do more, you can insert images, create tables, or create links to other pages/documents.
-If you want to use advanced functionality, you can insert images, create tables, or create links to other pages or documents. The functionality varies depending on how the editor is set up.
-
-* [Editor Buttons](./#editor-buttons)
-* [Paragraph Break/Line Break](./#paragraph-break-line-break)
-* [Shortcut Keys](./#shortcut-keys)
-* [Text Formatting](./#text-formatting)
-* [View Source Code](./#view-source-code)
-* [Links](./#links)
-* [Working with Images](./#working-with-images)
-* [Macros](./#macros)
-* [Tables](./#tables)
-
-Contact your system administrator for details regarding your editor.
+The functionality varies depending on how the editor is set up. Here, we describe the default editor with all the options enabled. Contact your system administrator for details regarding your editor.
## Editor Buttons
-By default, the following editor styles are available. Your system administrator can determine the styles displayed in different templates. You might have access to more or fewer styles than those shown here.
-
-
+By default, the following editor buttons are available. Your system administrator can determine which buttons are displayed in different templates. You therefore might have access to more or fewer buttons than those shown here.
-## Rich Text Editor Functionality
+
-The Rich Text Editor provides the following functionalities:
+## Paragraph Break/Line Break
-### Paragraph Break/Line Break
-
-The Rich Text Editor is like any other word processing program. You write the text and the text wraps around when the line reaches the end. Use the following keyboard shortcuts in the editor to add:
+The Rich Text Editor is like any other word-processing program. You write the text and the text wraps around when the line reaches the end. Use the following keyboard shortcuts in the editor to add:
* Space between paragraphs - press `ENTER`.
* Line breaks - press `SHIFT + ENTER`.
-### Shortcut Keys
+## Shortcut Keys
-For ease, there are shortcut keys for certain editor functions. Use the following shortcut keys to carry out certain commands:
+To make your work easier, there are shortcut keys for certain editor functions. Use the following shortcut keys to carry out certain commands:
| Shortcut | Action |
| -------- | ---------- |
@@ -49,271 +33,320 @@ For ease, there are shortcut keys for certain editor functions. Use the followin
| Ctrl + Y | Redo |
| Ctrl + Z | Undo |
-### Text Formatting
+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/).
-You do not normally need to spend much time formatting text because Umbraco takes care of the formatting. However, the editor provides a number of options for controlling the text formatting.
+## View Source Code
-#### Formatting Buttons
+
-The most familiar way to control formatting is using the formatting buttons. With these buttons, you can apply basic formatting such as Bold, Italic, aligning text, creating bulleted and numbered lists, and applying indents.
+If you are proficient in HTML, you can switch to HTML mode to create your page. You can also check the code and make minor adjustments to get the page exactly as you want.
-To apply a format using the formatting buttons:
+Certain elements such as scripts are not recognized by the HTML view of the Rich Text Editor. You can enter the scripts directly in the text view of the editor.
+
+## Formats
+
+
+
+You can apply formatting via the **Formats** drop-down list. The Formats drop-down list provides predefined styles that can be applied to text while maintaining a consistent look and feel throughout the site.
+
+These styles incorporate advanced formatting functionality which can be applied to provide a different look for certain elements such as links, headings, and sub-headings. For example, you can use a format style to change a link into a call-to-action button.
+
+To apply pre-defined styles:
-1. Select the text you want to apply the formatting to.
-2. Click the format button to apply the formatting you wish to add.
+1. Select the text you want to apply the style.
+2. Choose the style from the **Format** drop-down list.
- 
+For more information on how to create the Styles, see the [Rich Text Editor Styles](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-styles) article.
-#### Custom Formats
+## Text Formatting
-An alternate way to apply formatting is using Custom Formats. The **Formats** drop-down list provides a set of predefined styles that can be applied to text while maintaining a consistent look and feel throughout the site.
+You do not normally need to spend much time formatting text because Umbraco takes care of the formatting. However, the editor provides some options for controlling the text styles.
-These styles often incorporate more advanced formatting functionality which can be applied to provide a different look for certain elements such as links, headings and sub-heading. For example, you can use a format style to change a link into a call to action button. While the styles available on your site may differ, follow the below process to apply styles:
+### Formatting Buttons
-1. Select the text you want to apply the style to.
-2. Choose the style to apply from the **Format** drop-down list.
+
-#### Copying Content from Other Programs
+The most familiar way to control formatting is by using the formatting buttons. With these buttons, you can apply basic formatting such as Bold, Italic, aligning text, creating bulleted and numbered lists, and applying indents.
+
+To apply a format using the formatting buttons:
+
+1. Select the text you want to apply the formatting.
+2. Click the desired format button.
+
+### Copying Content from Other Programs
{% hint style="info" %}
-When you write content in another editor to be copied into a rich text editor, you may encounter style issues on your website.
+When you write content in another editor and copy it into a Rich Text Editor, you may encounter style issues on your website.
{% endhint %}
-While pasting content, the original text styles is preserved which can lead to different font faces, sizes, and colours displaying on the website when viewed.
+While pasting content, the original text styles are preserved which can lead to different font faces, sizes, and colors displaying on the website when viewed.
{% hint style="info" %}
-To prevent formatting issues, we recommended pasting the content first into a markdown editor such as notepad, then copy and paste it into your rich text editor.
+To prevent formatting issues, we recommended pasting the content first into a markdown editor such as Notepad, then copying and pasting it into your Rich Text Editor.
{% endhint %}
-#### Remove Formatting
+### Remove Formatting
+
+
-If you have already formatted a paragraph or selection using the formatting buttons, you can remove the formatting rule. To remove formatting:
+If you have already formatted a paragraph or selection using the formatting buttons, you can remove the formatting rule.
+
+To remove formatting:
1. Select the text you want to remove the style from.
2. Click the relevant formatting button to remove the formatting rule.
You can also add a **Remove format** button in your toolbar. To add the **Remove format** button:
-1. Navigate to your rich text editor.
-2. Go to the **Editor Settings** window.
-3. Select **Remove format**.
+1. Navigate to your Rich Text Editor in the Document Type.
+2. Click the cog wheel.
+3. Click **Edit** next to the Rich Text Editor Data Type.
+4. Select **Remove format** under the **Toolbar Configuration**.
+5. Click **Submit**.
+6. Click **Save**.
- 
+## Links
-### View Source Code
+
-
+The **Insert/Edit Link** button is used to add or update links to internal pages, external pages, media files, email links, and anchors. The process for inserting a hyperlink differs depending on the type of hyperlink you wish to create.
-If you are proficient in HTML, you can switch to HTML mode to create your page. You can also check the code and make minor adjustments to get the page exactly as you want it.
+To insert different types of hyperlinks, follow these steps:
-Certain elements such as scripts is not recognized by the HTML view of the rich text editor. You can enter the scripts directly in the text view of the editor.
+
-### Links
+Link to a Page on Another Website
-
+1. Select the text that will form the hyperlink.
+2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
+3. Enter the URL of the web page you wish to link to in the **Link** field.
+4. Enter the text that will be displayed as the link title in the **Link Title** field.
+ - This is important information for everyone reading the website with different accessibility aids.
+5. Select the **Target** field to open the link in a new window or tab.
+6. Click **Submit**.
-The **Insert/edit Link** button is used to add or update links to internal pages, external pages, media files, email links, and anchors. To insert different types of hyperlinks, follow these steps:
+
-#### Link to a Page on Another Website
+
-1. Select the text for the hyperlink.
-2. Click the **Insert Link** button. The **Select Link** tree opens on the right-side of the editor.
-3. In the **Link** field, enter the URL of the web page you wish to link to.
-4. In the **Link title** field, enter the text that will be shown as a pointer to the link. This is an important information for everyone reading the website with different accessibility aids.
-5. In the **Target** field, select the checkbox if you want the link to open in a new window or tab.
-6. Click **Submit**.
+
-
+Link to a Page in Umbraco
-#### Link to a Page in Umbraco
+1. Select the text that will form the hyperlink.
+2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
+3. Select a page from the **Link to page** field.
+ - This will populate the **Link** and **Link Title** fields automatically.
+4. Select the **Target** field to open the link in a new window or tab.
+5. Click **Submit**.
-1. Select the text for the hyperlink.
-2. Click the **Insert Link** button. The **Select Link** tree opens on the right-side of the editor.
-3. Select a page from the **Link to page** tree. The selection will populate the **Link** and **Link Title** fields.
-4. In the **Link Title** field, enter the text that will be shown as a pointer to the link. By default, the name of the selected page will be populated.
-5. In the **Target** field, select the checkbox if you want the link to open in a new window or tab.
-6. Click **Submit**.
+
+
+
-
+
-#### Link to a Media File in Umbraco
+Link to a Media File in Umbraco
-1. Select the text for the hyperlink.
-2. Click the **Insert Link** button. The **Select Link** tree opens on the right-side of the editor.
-3. Select the **Select media** button. The **Select media** tree opens where you can select the media item.
-4. Click **Select**. The selection will populate the **Link** and **Link Title** fields.
-5. In the **Target** field, select the checkbox if you want the link to open in a new window or tab.
+1. Select the text that will form the hyperlink.
+2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
+3. Select the **Link to Media** button to select the media item.
+4. Click **Select**.
+ - This will automatically populate the **Link** and **Link Title** fields with the media item information.
+ - By default, the **Link** field contains the media file name and cannot be edited.
+5. Select the **Target** field to open the link in a new window or tab.
6. Click **Submit**.
-
+
-#### Link to an email address in Umbraco
+
-1. Select the text for the hyperlink.
-2. Click the **Insert Link** button. The **Select Link** tree opens on the right-side of the editor.
-3. In the **Link** field, enter the text `mailto:` followed by the email address you wish to link (e.g. mailto:name@company.com).
-4. In the **Link Title** field, enter the text that will be shown as a pointer to the link.
-5. In the **Target** field, select the checkbox if you want the link to open in a new window or tab.
+
+
+Link to an Email Address in Umbraco
+
+1. Select the text that will form the hyperlink.
+2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
+3. Enter the text `mailto:` followed by the email address you wish to link to in the **Link** field. For example, `mailto:contact@umbraco.com`.
+4. Enter the text that will be displayed as the link title in the **Link Title** field.
+5. Select the **Target** field to open the link in a new window or tab.
6. Click **Submit**.
-
+
+
+
-#### Link to an Anchor on the Same Page
+
-An anchor allows you to create internal page links that enable users to navigate within a page. There are two parts to setting up an anchor - the anchor itself and the link to the anchor.
+Link to an Anchor on the Same Page
-#### Creating an anchor
+An anchor allows you to create internal page links that enable users to navigate within a page. There are two parts to setting up an anchor: the anchor itself and the link to the anchor.
-1. Select the text or place the cursor where you wish to create the anchor.
-2. Click the **Anchor** button. The **Create Anchor** dialog opens.
+#### Creating an Anchor
- 
-3. Enter the anchor name in the **ID** field. Aoid special characters and do not use spaces.
+1. Click the editor cursor where you wish to create the anchor.
+2. Click the **Anchor Button** which will launch the Anchor creation dialog.
+3. Enter your anchor name in the **ID** field.
+ - You should avoid special characters and spaces.
+4. Click **Save**.
+ - You will see a small anchor icon where you previously had the editor cursor.
- 
-4. Click **OK**. You will see a small anchor icon where you previously had the cursor in the editor.
+
To delete the anchor:
-1. Select the anchor icon in the editor.
-2. Press the **Delete** key.
+1. Select the anchor icon.
+2. Press your **Delete** key.
-#### Linking to an anchor
+
-1. Select the text where you wish to add the anchor.
-2. Click the **Insert link** button. The **Select Link** tree opens on the right-side of the editor.
-3. Add a `#`symbol followed by the name of your anchor in the **anchor/querystring** field.
-4. Click **Submit**.
+#### Linking to an Anchor
+
+1. Select the text to which you wish to add the anchor link to.
+2. Click the **Insert link** button to open the link properties slide-out menu.
+3. Add a hash symbol (#) followed by the name of your anchor in the **Anchor/querystring** field.
+4. Enter the text that will be displayed as the link title in the **Link Title** field.
+5. Click **Submit**.
-
+
-#### Create a Link from an Image
+
+
+
+
+Create a Link from an Image
You can make images into clickable links in Umbraco:
-1. Insert an image into the editor (see [Working with Images](./#working-with-images), for more details).
-2. Select the image to form the hyperlink.
-3. Click the **Insert Link** button. The **Select Link** tree opens on the right-side of the editor.
-4. In the **Link** field, enter the URL of the web page you wish to link to.
-5. In the **Link title** field, enter the text that will be shown as a pointer to the link.
-6. In the **Target** field, select the checkbox if you want the link to open in a new window or tab.
-7. Click **Submit**.
+1. Insert an image into the Rich Text Editor.
+ - For more information, see the [Working with Images](#working-with-images) section.
+2. Select the image that will form the hyperlink.
+3. Enter the URL of the web page you wish to link to in the **Link** field.
+4. Enter the text that will be displayed as the link title in the **Link Title** field.
+5. Select the **Target** field to open the link in a new window or tab.
+6. Click **Submit**.
-#### Removing a link
+
-To remove a link:
+
-1. Select the link in the editor. For text links, place the cursor anywhere within the link text. For an image, select the image itself.
-2. Click the **Remove Link** button which removes the hyperlink.
+
- 
+Removing a Link
-If the remove link button is not in your richtext editor toolbar, you can add the **Remove Link** button:
+
-1. Navigate to your rich text editor.
-2. Go to the **Editor Settings** window.
-3. Select **Remove Link**.
+To remove a link:
- 
+1. Select the link in the Rich Text Editor.
+ - For text links, click the cursor anywhere within the link text. For an image, click the image itself.
+2. Click the **Remove Link** button which will remove the hyperlink.
+3. Alternatively, you can click the **Insert/Edit Link** button and remove the link from the **Link** field.
-Alternatively, click the **Insert/Edit Link** button and manually remove the link from the **Link** field.
+
-### Working with Images
+## Working with Images
To display images on a page the images must be uploaded to your Umbraco media library.
-Many organisations set up a media library containing images that editors can use on their pages. The procedure for uploading an image varies slightly depending on which method your organisation has adopted, so check with your system administrator what is applicable in your organisation.
+Many administrators set up a media library containing images that editors can use on their pages. Others allow their editor's free use of their images. The procedure for uploading an image varies slightly depending on which method your administrators have setup. Check with your system administrator for more information about this.
-#### Inserting an Image from the Media Library
+
-1. Place the cursor in the editor where you want to insert your image.
-2. Click the **Media Picker** button on the toolbar. The **Select Media** tree opens on the right-side of the editor.
-3. Select the folder in which your image is stored.
-4. Click the thumbnail of the image. The **Edit selected media** tree opens.
-5. Enter an **Alternative Text** and **Caption** for your image. Both these fields are optional.
-6. Click **Select** to add the image.
+Inserting an Image from the Media Library
-
+1. Place the cursor in the Rich Text Editor where you want to insert your image.
+2. Click the **Media Picker** button from the toolbar.
+3. Select the folder in which the image is.
+4. Click the thumbnail of your chosen image to open the image properties menu.
+5. Enter a name/description for the image in the **Caption (optional)** field.
+ - It is important to add descriptive titles to images as these are used to assist visually impaired users.
+6. Click **Select**.
-#### Inserting an Image from your Computer
+
-You can upload images directly from your local directory in the rich text editor. These images will be stored in the Umbraco media library. Ensure that the image is placed in the correct location within the library.
+
-You can also create folders in the media library by clicking the `+` icon next to `Media/`.
+
-
+Inserting an Image from your Computer
-To insert an image from your computer:
+You can upload images directly from the Rich Text Editor on the page you are editing. These images will be stored in the Umbraco Media Library. Therefore, it would be best to ensure the image is placed in the correct location within the library. If you click the plus icon underneath the search bar in the media picker slide-out menu you can create folders in the media library.
-1. Place the cursor in the editor where you want to insert your image.
-2. Click the **Media Picker** button. The **Select Media** tree opens on the right-side of the editor.
-3. Click the **Upload** button in the top-right corner of the tree.
-4. Browse to the directory, select the image, and click **Open**.
-5. Enter an **Alternative Text** and **Caption** for your image. Both these fields are optional.
-6. Click **Select** to add the image.
+1. Place the cursor in the Rich Text Editor where you want to insert your image.
+2. Click the **Media Picker** button from the toolbar.
+3. Click the **Upload** button which is located in the top right-hand corner of the menu.
+4. Select the chosen image from the pop-up window.
+5. Enter a name/description for the image in the **Caption (optional)** field.
+6. Click **Select**.
-
+
-#### Deleting an Image from the Page
+
-To delete an image from the page:
+
-1. Select the image in your editor.
-2. Press **Delete** on your keyboard. The image is removed from the page, but is not deleted from the Umbraco media library.
+Deleting an Image from the Page
-### Macros
+To delete an image from the page:
-In Umbraco, macros are small building blocks of functionality that can be used in an editor. Each macro encompasses a piece of functionality and provides an interface to be able to modify the macro as per your requirements. A macro can be anything from a contact form to an embeddable media player. The advantage of macros is that it gives editors the ability to add complex elements to the page in a less complex manner.
+1. Select the image.
+2. Press the **Delete** button on your keyboard.
+ - The image disappears from the page but is not deleted from the Umbraco Media library.
-The macros available to you differ from system to system. Contact your system administrator to find out which macros are available to you and what they do.
+
-#### Adding a Macro to the Page
+## Macros
-1. Place the cursor in the editor where you want to insert your macro.
-2. Click the **Insert Macro** button. The **Select Macro** tree opens on the right-side of the editor.
-3. Select a macro to insert or enter the macro name in the **Search** bar.
+In Umbraco, Macros are small building blocks of functionality that can be dropped into an editor. Each macro encompasses a piece of functionality and provides an interface to modify the macro to your requirements. A macro can be anything from a contact form to an embedded media player. The advantage of macros is that it gives editors the ability to add complex elements to a page.
- 
-4. Configure the macro as required.
-5. Click **Submit** to insert the macro. The macro is displayed in the editor with a dotted border.
+The macros available differ on each system. Kindly check with your system administrator to find out which macros are available to you and what they do. The process for adding and updating a macro is as follows:
- 
+### Adding a Macro to the Page
-{% hint style="info" %}
-If there are no macros, you can [Create Macros](../../../reference/templating/macros/managing-macros.md#creating-macros). The above image is an example of macros available when a Starter Kit package is installed.
-{% endhint %}
+1. Place the cursor in the Rich Text Editor where you want to insert your macro.
+2. Click the **Insert Macro** button from the toolbar.
+3. Select a macro to insert from the macros list.
+4. Click **Submit**.
+ - The macro is displayed in the editor with a dotted border.
-#### Editing macros
+
-You can edit the macro values after it has been added to the rich text editor:
+### Editing Macros
-1. Highlight the macro in the rich text editor.
-2. Click the **Insert Macro** button. The **Select Macro** tree opens on the right-side of the editor.
-3. Here, you can edit the configuration as per your requirement.
+You can edit values after a macro has been added to the Rich Text Editor:
-#### Removing macros
+1. Select the macro in the Rich Text Editor.
+2. Click the **Insert Macro** button from the toolbar.
+ - This will open the configuration menu where you can edit any values previously added.
+
+### Removing Macros
To remove a macro:
-1. Highlight the macro in the rich text editor.
+1. Select the macro in the Rich Text Editor.
2. Press the **Delete** or **Backspace** button on your keyboard.
-### Tables
+## Tables
+
+Tables are used to format information in a grid-based structure. When you insert a table, you select how many rows and columns the table should comprise of. Additionally, you can fill in some optional formatting properties. These values can be changed later, so it is not important to know exactly what your table will look like when you create it.
+
+
+
+### Editing an Existing Table
-Tables are used to format information in a grid based structure. When you insert a table, you select how many rows and columns the table should comprise of, as well as fill in a number of additional optional formatting properties. These values can be altered later, so it is not important to know exactly what your table will look like when you create it.
+To edit the table after creating it, click on the table. A pop-up appears with different table properties and options. Alternatively, you can click on the **Table** button in the Rich Text Editor toolbar.
-
+
-#### Editing an Existing Table
+Clicking on **Table Properties** gives you different options for modifying the table’s appearance. However, the developer of the website may have already created table styles for you so you may not need to adjust these settings.
-To edit an existing table:
+There are other options available for modifying cells, rows, and columns such as width, height, alignment, border, and so on.
-1. Click on a cell in the table.
-2. A small square box is displayed with some quick actions.
-3. Select the action of your choice. Alternatively, click on the **Table** button in the rich text editor. There are various other options available for modifying cells, rows and columns such as height, alignment, merge, insert and delete.
+
- 
+## Configuring a Rich Text Editor
-**Table Properties** provides several options for modifying the table’s appearance. However the developer of the website may have already created table styles for you so you may not need to adjust these settings.
+The Rich Text Editor in Umbraco can be configured in many different ways.
-
+For more information, see the [Rich Text Editor Configuration](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration) article.
diff --git a/10/umbraco-cms/tutorials/editors-manual/working-with-content/rich-text-editor.md b/10/umbraco-cms/tutorials/editors-manual/working-with-content/rich-text-editor.md
deleted file mode 100644
index 6b596c77cd8..00000000000
--- a/10/umbraco-cms/tutorials/editors-manual/working-with-content/rich-text-editor.md
+++ /dev/null
@@ -1,240 +0,0 @@
-# Rich Text Editor
-
-The Umbraco Rich Text Editor is the field where you, as the editor, can be creative. You select how much you want to do yourself. You can work on text content, format the text, or leave it the way it is. If you want to do more, you can insert images, create tables or create links to other pages or documents.
-
-The functionality varies depending on how the editor is set up. Here we describe the default editor with all options enabled. Contact your system administrator for details regarding your editor.
-
-## Editor Buttons
-
-Below are all the default editor buttons available. Your system administrator is able to determine which buttons are displayed in different templates. You could therefore have access to more or fewer buttons than those shown here.
-
-
-
-## Paragraph Break/Line Break
-
-The editor is like any other word processing program. You write the text, and the text wraps around when the line reaches the end. When you press ENTER in the editor, you get a paragraph break, which means there is space between the paragraphs. If you do not want a space, you have to make a line break instead. You do this by pressing SHIFT+ENTER.
-
-## Shortcut Keys
-
-To make your work easier, there are shortcut keys for certain editor functions. Shortcut keys let you use the keyboard to carry out certain commands.
-
-| Shortcut | Action |
-| -------- | ---------- |
-| Ctrl + A | Select all |
-| Ctrl + B | Bold |
-| Ctrl + C | Copy |
-| Ctrl + I | Italic |
-| Ctrl + U | Underline |
-| Ctrl + V | Paste |
-| Ctrl + X | Cut |
-| Ctrl + Y | Redo |
-| Ctrl + Z | Undo |
-
-## Text Formatting
-
-You do not normally need to spend much time formatting text because Umbraco takes care of a lot of the formatting for you. When the default formatting is not enough however, there are a number of options for controlling the formatting of text.
-
-### Formatting Buttons
-
-The most basic and probably the most familiar way to control formatting are via the formatting buttons. These work much the same as those found in most word processing applications such as Microsoft Word. With these you can apply basic formatting such as Bold, Italic and underline as well as altering text alignment and creating bulleted and numbered lists.
-
-Regardless of the formatting being applied, the process for applying a format using the formatting buttons is always the same.
-
-1. Select the text you want to apply the formatting to.
-2. Click the appropriate format button to apply the formatting you wish to add.
-
-
-
-### Formats
-
-Another way of applying formatting is via the Formats drop-down list. The Formats drop-down list provides a set of predefined styles that can be applied to text whilst maintaining a consistent look and feel through the site. These styles often incorporate more advanced formatting functionality which can be applied to provide a different look for certain elements such as links, headings and sub heading. For example you can use a format style to change a link into a call to action button. Whilst the styles available on your site may differ, the process for applying styles is always the same.
-
-1. Select the text you want to apply the style to.
-2. Select the style to apply from the Format drop-down list.
-
-### Copying Content from Other Programs
-
-It is important to note that when you pre-write content to later be copied into a rich text editor you may encounter style issues on your website. When pasting content, the original text styles will be preserved which can lead to different font faces, sizes and colours from what is expected when the website is viewed. To prevent this from happening it is advisable that you paste the content into a markdown editor first such as notepad, then copy and paste it from there into your rich text editor.
-
-### Remove Formatting
-
-If you have formatted a paragraph or selection using the formatting buttons, you can remove a formatting rule by selecting the text, and clicking the relevant formatting button to remove that formatting rule. You may also have a remove format button in your toolbar. If you do not have this button please speak to your system administrator.
-
- _Remove Format button_
-
-## Show/Hide HTML Code
-
-
-
-If you are proficient in the use of HTML you can switch to HTML mode and create your page by writing HTML code. You can also check the code and make minor adjustments here to get the page exactly as you want it. Certain elements such as scripts will not be allowed and will be filtered out of code pasted into the rich text editor.
-
-## Links
-
-
-
-The _**Insert Link**_ button is used to create links to internal and external pages and media files email links and anchors. The process for inserting a hyperlink differs depending on the type of hyperlink you wish to create.
-
-### Link to a Page on Another Website
-
-1. Select the text that will form the hyperlink.
-2. Click the _**Insert Link**_ button which will reveal the link properties slide out menu.
-3. In the URL field, enter the URL of the web page you wish to link to.
-4. In the Title field, enter the text that will be shown as a pointer to the link. This is important information for everyone reading the website with different accessibility aids.
-5. In the Target field, select the target window/frame then select how the should be opened. There are three different ways the link can be opened:
- 1. Open link in a new tab in the same browser window.
- 2. Open link in a new separate browser window.
- 3. Open the link in the same browser tab as the user would be viewing your site.
-6. Click _**Select.**_ Your text will now contain the link as requested.
-
-
-
-### Link to a Page in Umbraco
-
-1. Select the text that will form the hyperlink.
-2. Click the _**Insert Link**_ button which will reveal the link properties slide out menu.
-3. Select a page from the _**Content**_ tab to link to. This will then populate the **link to document** automatically.
-4. In the Page Title field, enter the text that will be shown as a pointer to the link. This is important information for everyone reading the website with different accessibility aids, (by default the name of the selected page will automatically be entered for your convenience).
-5. In the _**Target**_ field, select the target window/frame the link should be opened in.
-6. Click _**Select**_.
-
-
-
-### Link to a Media File in Umbraco
-
-1. Select the text that will form the hyperlink.
-2. Click the _**Insert Link**_ button which will reveal the link properties slide out menu.
-3. Select the _**link to file**_ button which is situated at the bottom of the slide out menu.
-4. You will then be taken to the media picker, where you can select the media item.
-5. When you have selected the media item you will be taken back to the link screen where the link to document and page title fields have been populated with the media item information. By default the page title will be the media file name however this can be edited.
-6. In the _**Target**_ field, select the target window/frame the link should be opened in.
-7. Click Select.
-
-
-
-### Link to an email address in Umbraco
-
-1. Select the text that will form the hyperlink.
-2. Click the _**Insert Link**_ button which will reveal the link properties slide out menu.
-3. In the URL field, enter the text mailto: followed by the email address you wish to link to (e.g. mailto:name@company.com).
-4. In the Title field, enter the text that will be shown as a pointer to the link. This is important information for everyone reading the website with different accessibility aids.
-5. In the _**Target**_ field, select the target window/frame the link should be opened in.
-6. Click _**Select.**_
-
-
-
-### Link to an Anchor on the Same Page
-
-An anchor allows you to create internal page links that enable users to navigate within a page. There are two parts to setting up an anchor; the anchor itself and the link to the anchor.
-
-### Creating an anchor
-
-1. Focus the editor cursor where you wish to create the anchor.
-2. Click the  which will then launch the Anchor creation dialog.
-3. In the name field enter your anchor name. You should avoid special characters and do not use spaces.
-4. Click _**OK**_ to finish.
-5. You will see a small anchor icon where you previously had the editor cursor.
-
-To delete the anchor, select it and then press your delete key.
-
-
-
-### Linking to an anchor
-
-1. Highlight the content which you wish to add the anchor link to.
-2. Click the _**Insert link**_ button which will reveal the link properties slide out menu.
-3. Add a hash symbol followed by the name of your anchor into the **link to document**\* field.
-4. Click _**Select.**_
-
-
-
-### Create a Link from an Image
-
-You can make images into clickable links in Umbraco.
-
-1. Insert an image into the editor (see Working with Images for more details).
-2. Select the image that will form the hyperlink.
-3. From here, follow the same instructions as for inserting a normal hyperlink, starting at step 2.
-
-### Removing a link
-
-1. To remove a link you first need to select it in the editor. For text links click the cursor anywhere within the link text. For an image just click the image itself.
-2. Click the **Remove Link** button which remove the hyperlink. If the remove link button is not in your richtext editor toolbar you will instead need to click the **Insert/Edit Link** button again and manually remove the link from the link to document text field.
-
-
-
-## Working with Images
-
-To display images on a page they must be uploaded to your Umbraco media library. Many organisations set up a media library containing images that editors can use on their pages. Others allow their editors free use of their own images. The procedure for uploading an image varies slightly depending on which method your organisation has adopted, so check with your system administrator what is applicable in your organisation.
-
-### Inserting an Image from the Media Library
-
-1. Place the cursor in the editor where you want to insert your image.
-2. Click the _**Media Picker**_ button from the toolbar to open the media selector menu.
-3. Select the folder which the image is in.
-4. Click the thumbnail of your chosen image to open the image properties menu.
-5. In the Title field, enter a name/description for the image (by default the name of the file will be automatically entered for your convenience). It is important to add descriptive titles to images as these as used to assist visually impaired users.
-6. Click _**Insert**_ to add the image.
-
-
-
-### Inserting an Image from your Computer
-
-You can upload images directly from the rich text editor on the page you are editing. These images will be stored in the Umbraco media library. Therefore care should be taken to ensure that the image is placed in the correct location within the library. If you click the plus icon underneath the search bar in the media picker slide out menu you can create folders in the media library.
-
-1. Place the cursor in the editor where you want to insert your image.
-2. Click the _**Media Picker**_ button from the toolbar to open the media selector.
-3. Click the _**Upload**_ button which is located in the top right-hand corner of the menu.
-4. Select the chosen image from the pop-up window.
-5. In the Title field, enter a name/description for the image. (By default the name of the file will be automatically entered for your convenience).
-6. Click \***Insert** to add the image.
-
-
-
-### Deleting an Image from the Page
-
-If you want to delete an image from the page, select the image and press _**Delete**_ button on your keyboard. The image disappears from the page, but is not deleted from the Umbraco media library.
-
-## Macros
-
-In Umbraco, macros are small building blocks of functionality that can be dropped into an editor. Each macro encompasses a piece of functionality and provides a simple interface to be able to modify the macro to your requirements. A macro can be anything from a contact form to an embeddable media player. The advantage of macros is that it gives editors the ability to add complex elements to the page in a simple manner.
-
-The macros available to you differ from system to system so please see your system administrator to find out which macros are available to you and what they do. The process for adding and updating a macro is always the same.
-
-### Adding a Macro to the Page
-
-1. Place the cursor in the editor where you want to insert your macro.
-2. Click the _**Insert Macro**_ button from the toolbar to open the macro properties dialog box.
-3. Select a macro to insert from the Choose a macro drop-down list.
-4. Configure the macro as required.
-5. Click _**Select**_ to insert the macro.
-6. The macro is displayed in the editor with a yellow dotted border.
-
-
-
-
-
-### Editing macros
-
-You can edit values you have inputted into a macro after it has been added to the rich text editor.
-
-1. Highlight the macro in the rich text editor.
-2. Click the _**macro**_ button in the toolbar.
-3. This will bring out the configuration slide out menu where you can edit any values previously added.
-
-### Removing macros
-
-To remove a macro you highlight the macro in the rich text editor and hit the _**delete**_ or _**backspace**_ button on your keyboard.
-
-## Tables
-
-Tables are used to format information in a grid based structure. When you insert a table, you select how many rows and columns the table should comprise of, as well as fill in a number of additional optional formatting properties. These values can be altered later, so it is not important to know exactly what your table will look like when you create it.
-
-
-
-### Editing an Existing Table
-
-To edit the table after you have already created it, you need to click on it so you have a small square box in each of the four corners. Then you need to click on the _**Table**_ button in the rich text editor in order to reveal the options.
-
-Clicking _**Table Properties**_ gives you several options for modifying the table’s appearance, however the developer of the website may have already created table styles for you so you may not need to adjust these settings. There are various other options available for modifying cells, rows and columns such as height, alignment, merge, insert and delete.
-
-
diff --git a/12/umbraco-cms/.gitbook.yaml b/12/umbraco-cms/.gitbook.yaml
index ec79320f084..920a69c0eeb 100644
--- a/12/umbraco-cms/.gitbook.yaml
+++ b/12/umbraco-cms/.gitbook.yaml
@@ -6,4 +6,5 @@ root: ./
redirects:
tutorials/add-azure-active-directory-authentication: tutorials/add-microsoft-entra-id-authentication.md
+ tutorials/editors-manual/working-with-content/rich-text-editor: tutorials/editors-manual/working-with-content.md
\ No newline at end of file
diff --git a/12/umbraco-cms/SUMMARY.md b/12/umbraco-cms/SUMMARY.md
index 91d5742c546..c43f565e5c7 100644
--- a/12/umbraco-cms/SUMMARY.md
+++ b/12/umbraco-cms/SUMMARY.md
@@ -457,7 +457,6 @@
* [Copying a Page](tutorials/editors-manual/getting-started-with-umbraco/copying-a-page.md)
* [Deleting and Restoring Pages](tutorials/editors-manual/getting-started-with-umbraco/deleting-and-restoring-pages.md)
* [Working with Rich Text Editor](tutorials/editors-manual/working-with-content/README.md)
- * [Rich Text Editor](tutorials/editors-manual/working-with-content/rich-text-editor.md)
* [Version Management](tutorials/editors-manual/version-management/README.md)
* [Comparing Versions](tutorials/editors-manual/version-management/comparing-versions.md)
* [Rollback to a Previous Version](tutorials/editors-manual/version-management/rollback-to-a-previous-version.md)
diff --git a/12/umbraco-cms/tutorials/editors-manual/working-with-content/README.md b/12/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
index 309c9d0f366..20d8d776743 100644
--- a/12/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
+++ b/12/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
@@ -1,41 +1,25 @@
# Working with Rich Text Editor
-The Umbraco Rich Text Editor is an editable field where you, as the editor, can be creative. You select how much you want to do yourself. You can work on text content, format the text, or leave it the way it is.
+The Umbraco Rich Text Editor (RTE) is a field where you, as an editor, can be creative. You can select how much you want to do yourself. You can work on text content, format the text, or leave it the way it is. If you want to do more, you can insert images, create tables, or create links to other pages/documents.
-If you want to use advanced functionality, you can insert images, create tables, or create links to other pages or documents. The functionality varies depending on how the editor is set up.
-
-* [Editor Buttons](./#editor-buttons)
-* [Paragraph Break/Line Break](./#paragraph-break-line-break)
-* [Shortcut Keys](./#shortcut-keys)
-* [Text Formatting](./#text-formatting)
-* [View Source Code](./#view-source-code)
-* [Links](./#links)
-* [Working with Images](./#working-with-images)
-* [Macros](./#macros)
-* [Tables](./#tables)
-
-Contact your system administrator for details regarding your editor.
+The functionality varies depending on how the editor is set up. Here, we describe the default editor with all the options enabled. Contact your system administrator for details regarding your editor.
## Editor Buttons
-By default, the following editor styles are available. Your system administrator can determine the styles displayed in different templates. You might have access to more or fewer styles than those shown here.
-
-
+By default, the following editor buttons are available. Your system administrator can determine which buttons are displayed in different templates. You therefore might have access to more or fewer buttons than those shown here.
-## Rich Text Editor Functionality
+
-The Rich Text Editor provides the following functionalities:
+## Paragraph Break/Line Break
-### Paragraph Break/Line Break
-
-The Rich Text Editor is like any other word processing program. You write the text and the text wraps around when the line reaches the end. Use the following keyboard shortcuts in the editor to add:
+The Rich Text Editor is like any other word-processing program. You write the text and the text wraps around when the line reaches the end. Use the following keyboard shortcuts in the editor to add:
* Space between paragraphs - press `ENTER`.
* Line breaks - press `SHIFT + ENTER`.
-### Shortcut Keys
+## Shortcut Keys
-For ease, there are shortcut keys for certain editor functions. Use the following shortcut keys to carry out certain commands:
+To make your work easier, there are shortcut keys for certain editor functions. Use the following shortcut keys to carry out certain commands:
| Shortcut | Action |
| -------- | ---------- |
@@ -49,271 +33,320 @@ For ease, there are shortcut keys for certain editor functions. Use the followin
| Ctrl + Y | Redo |
| Ctrl + Z | Undo |
-### Text Formatting
+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/).
-You do not normally need to spend much time formatting text because Umbraco takes care of the formatting. However, the editor provides a number of options for controlling the text formatting.
+## View Source Code
-#### Formatting Buttons
+
-The most familiar way to control formatting is using the formatting buttons. With these buttons, you can apply basic formatting such as Bold, Italic, aligning text, creating bulleted and numbered lists, and applying indents.
+If you are proficient in HTML, you can switch to HTML mode to create your page. You can also check the code and make minor adjustments to get the page exactly as you want.
-To apply a format using the formatting buttons:
+Certain elements such as scripts are not recognized by the HTML view of the Rich Text Editor. You can enter the scripts directly in the text view of the editor.
+
+## Formats
+
+
+
+You can apply formatting via the **Formats** drop-down list. The Formats drop-down list provides predefined styles that can be applied to text while maintaining a consistent look and feel throughout the site.
+
+These styles incorporate advanced formatting functionality which can be applied to provide a different look for certain elements such as links, headings, and sub-headings. For example, you can use a format style to change a link into a call-to-action button.
+
+To apply pre-defined styles:
-1. Select the text you want to apply the formatting to.
-2. Click the format button to apply the formatting you wish to add.
+1. Select the text you want to apply the style.
+2. Choose the style from the **Format** drop-down list.
- 
+For more information on how to create the Styles, see the [Rich Text Editor Styles](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-styles) article.
-#### Custom Formats
+## Text Formatting
-An alternate way to apply formatting is using Custom Formats. The **Formats** drop-down list provides a set of predefined styles that can be applied to text while maintaining a consistent look and feel throughout the site.
+You do not normally need to spend much time formatting text because Umbraco takes care of the formatting. However, the editor provides some options for controlling the text styles.
-These styles often incorporate more advanced formatting functionality which can be applied to provide a different look for certain elements such as links, headings and sub-heading. For example, you can use a format style to change a link into a call to action button. While the styles available on your site may differ, follow the below process to apply styles:
+### Formatting Buttons
-1. Select the text you want to apply the style to.
-2. Choose the style to apply from the **Format** drop-down list.
+
-#### Copying Content from Other Programs
+The most familiar way to control formatting is by using the formatting buttons. With these buttons, you can apply basic formatting such as Bold, Italic, aligning text, creating bulleted and numbered lists, and applying indents.
+
+To apply a format using the formatting buttons:
+
+1. Select the text you want to apply the formatting.
+2. Click the desired format button.
+
+### Copying Content from Other Programs
{% hint style="info" %}
-When you write content in another editor to be copied into a rich text editor, you may encounter style issues on your website.
+When you write content in another editor and copy it into a Rich Text Editor, you may encounter style issues on your website.
{% endhint %}
-While pasting content, the original text styles is preserved which can lead to different font faces, sizes, and colours displaying on the website when viewed.
+While pasting content, the original text styles are preserved which can lead to different font faces, sizes, and colors displaying on the website when viewed.
{% hint style="info" %}
-To prevent formatting issues, we recommended pasting the content first into a markdown editor such as notepad, then copy and paste it into your rich text editor.
+To prevent formatting issues, we recommended pasting the content first into a markdown editor such as Notepad, then copying and pasting it into your Rich Text Editor.
{% endhint %}
-#### Remove Formatting
+### Remove Formatting
+
+
-If you have already formatted a paragraph or selection using the formatting buttons, you can remove the formatting rule. To remove formatting:
+If you have already formatted a paragraph or selection using the formatting buttons, you can remove the formatting rule.
+
+To remove formatting:
1. Select the text you want to remove the style from.
2. Click the relevant formatting button to remove the formatting rule.
You can also add a **Remove format** button in your toolbar. To add the **Remove format** button:
-1. Navigate to your rich text editor.
-2. Go to the **Editor Settings** window.
-3. Select **Remove format**.
+1. Navigate to your Rich Text Editor in the Document Type.
+2. Click the cog wheel.
+3. Click **Edit** next to the Rich Text Editor Data Type.
+4. Select **Remove format** under the **Toolbar Configuration**.
+5. Click **Submit**.
+6. Click **Save**.
- 
+## Links
-### View Source Code
+
-
+The **Insert/Edit Link** button is used to add or update links to internal pages, external pages, media files, email links, and anchors. The process for inserting a hyperlink differs depending on the type of hyperlink you wish to create.
-If you are proficient in HTML, you can switch to HTML mode to create your page. You can also check the code and make minor adjustments to get the page exactly as you want it.
+To insert different types of hyperlinks, follow these steps:
-Certain elements such as scripts is not recognized by the HTML view of the rich text editor. You can enter the scripts directly in the text view of the editor.
+
-### Links
+Link to a Page on Another Website
-
+1. Select the text that will form the hyperlink.
+2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
+3. Enter the URL of the web page you wish to link to in the **Link** field.
+4. Enter the text that will be displayed as the link title in the **Link Title** field.
+ - This is important information for everyone reading the website with different accessibility aids.
+5. Select the **Target** field to open the link in a new window or tab.
+6. Click **Submit**.
-The **Insert/edit Link** button is used to add or update links to internal pages, external pages, media files, email links, and anchors. To insert different types of hyperlinks, follow these steps:
+
-#### Link to a Page on Another Website
+
-1. Select the text for the hyperlink.
-2. Click the **Insert Link** button. The **Select Link** tree opens on the right-side of the editor.
-3. In the **Link** field, enter the URL of the web page you wish to link to.
-4. In the **Link title** field, enter the text that will be shown as a pointer to the link. This is an important information for everyone reading the website with different accessibility aids.
-5. In the **Target** field, select the checkbox if you want the link to open in a new window or tab.
-6. Click **Submit**.
+
-
+Link to a Page in Umbraco
-#### Link to a Page in Umbraco
+1. Select the text that will form the hyperlink.
+2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
+3. Select a page from the **Link to page** field.
+ - This will populate the **Link** and **Link Title** fields automatically.
+4. Select the **Target** field to open the link in a new window or tab.
+5. Click **Submit**.
-1. Select the text for the hyperlink.
-2. Click the **Insert Link** button. The **Select Link** tree opens on the right-side of the editor.
-3. Select a page from the **Link to page** tree. The selection will populate the **Link** and **Link Title** fields.
-4. In the **Link Title** field, enter the text that will be shown as a pointer to the link. By default, the name of the selected page will be populated.
-5. In the **Target** field, select the checkbox if you want the link to open in a new window or tab.
-6. Click **Submit**.
+
+
+
-
+
-#### Link to a Media File in Umbraco
+Link to a Media File in Umbraco
-1. Select the text for the hyperlink.
-2. Click the **Insert Link** button. The **Select Link** tree opens on the right-side of the editor.
-3. Select the **Select media** button. The **Select media** tree opens where you can select the media item.
-4. Click **Select**. The selection will populate the **Link** and **Link Title** fields.
-5. In the **Target** field, select the checkbox if you want the link to open in a new window or tab.
+1. Select the text that will form the hyperlink.
+2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
+3. Select the **Link to Media** button to select the media item.
+4. Click **Select**.
+ - This will automatically populate the **Link** and **Link Title** fields with the media item information.
+ - By default, the **Link** field contains the media file name and cannot be edited.
+5. Select the **Target** field to open the link in a new window or tab.
6. Click **Submit**.
-
+
-#### Link to an email address in Umbraco
+
-1. Select the text for the hyperlink.
-2. Click the **Insert Link** button. The **Select Link** tree opens on the right-side of the editor.
-3. In the **Link** field, enter the text `mailto:` followed by the email address you wish to link (e.g. mailto:name@company.com).
-4. In the **Link Title** field, enter the text that will be shown as a pointer to the link.
-5. In the **Target** field, select the checkbox if you want the link to open in a new window or tab.
+
+
+Link to an Email Address in Umbraco
+
+1. Select the text that will form the hyperlink.
+2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
+3. Enter the text `mailto:` followed by the email address you wish to link to in the **Link** field. For example, `mailto:contact@umbraco.com`.
+4. Enter the text that will be displayed as the link title in the **Link Title** field.
+5. Select the **Target** field to open the link in a new window or tab.
6. Click **Submit**.
-
+
+
+
-#### Link to an Anchor on the Same Page
+
-An anchor allows you to create internal page links that enable users to navigate within a page. There are two parts to setting up an anchor - the anchor itself and the link to the anchor.
+Link to an Anchor on the Same Page
-#### Creating an anchor
+An anchor allows you to create internal page links that enable users to navigate within a page. There are two parts to setting up an anchor: the anchor itself and the link to the anchor.
-1. Select the text or place the cursor where you wish to create the anchor.
-2. Click the **Anchor** button. The **Create Anchor** dialog opens.
+#### Creating an Anchor
- 
-3. Enter the anchor name in the **ID** field. Aoid special characters and do not use spaces.
+1. Click the editor cursor where you wish to create the anchor.
+2. Click the **Anchor Button** which will launch the Anchor creation dialog.
+3. Enter your anchor name in the **ID** field.
+ - You should avoid special characters and spaces.
+4. Click **Save**.
+ - You will see a small anchor icon where you previously had the editor cursor.
- 
-4. Click **OK**. You will see a small anchor icon where you previously had the cursor in the editor.
+
To delete the anchor:
-1. Select the anchor icon in the editor.
-2. Press the **Delete** key.
+1. Select the anchor icon.
+2. Press your **Delete** key.
-#### Linking to an anchor
+
-1. Select the text where you wish to add the anchor.
-2. Click the **Insert link** button. The **Select Link** tree opens on the right-side of the editor.
-3. Add a `#`symbol followed by the name of your anchor in the **anchor/querystring** field.
-4. Click **Submit**.
+#### Linking to an Anchor
+
+1. Select the text to which you wish to add the anchor link to.
+2. Click the **Insert link** button to open the link properties slide-out menu.
+3. Add a hash symbol (#) followed by the name of your anchor in the **Anchor/querystring** field.
+4. Enter the text that will be displayed as the link title in the **Link Title** field.
+5. Click **Submit**.
-
+
-#### Create a Link from an Image
+
+
+
+
+Create a Link from an Image
You can make images into clickable links in Umbraco:
-1. Insert an image into the editor (see [Working with Images](./#working-with-images), for more details).
-2. Select the image to form the hyperlink.
-3. Click the **Insert Link** button. The **Select Link** tree opens on the right-side of the editor.
-4. In the **Link** field, enter the URL of the web page you wish to link to.
-5. In the **Link title** field, enter the text that will be shown as a pointer to the link.
-6. In the **Target** field, select the checkbox if you want the link to open in a new window or tab.
-7. Click **Submit**.
+1. Insert an image into the Rich Text Editor.
+ - For more information, see the [Working with Images](#working-with-images) section.
+2. Select the image that will form the hyperlink.
+3. Enter the URL of the web page you wish to link to in the **Link** field.
+4. Enter the text that will be displayed as the link title in the **Link Title** field.
+5. Select the **Target** field to open the link in a new window or tab.
+6. Click **Submit**.
-#### Removing a link
+
-To remove a link:
+
-1. Select the link in the editor. For text links, place the cursor anywhere within the link text. For an image, select the image itself.
-2. Click the **Remove Link** button which removes the hyperlink.
+
- 
+Removing a Link
-If the remove link button is not in your richtext editor toolbar, you can add the **Remove Link** button:
+
-1. Navigate to your rich text editor.
-2. Go to the **Editor Settings** window.
-3. Select **Remove Link**.
+To remove a link:
- 
+1. Select the link in the Rich Text Editor.
+ - For text links, click the cursor anywhere within the link text. For an image, click the image itself.
+2. Click the **Remove Link** button which will remove the hyperlink.
+3. Alternatively, you can click the **Insert/Edit Link** button and remove the link from the **Link** field.
-Alternatively, click the **Insert/Edit Link** button and manually remove the link from the **Link** field.
+
-### Working with Images
+## Working with Images
To display images on a page the images must be uploaded to your Umbraco media library.
-Many organisations set up a media library containing images that editors can use on their pages. The procedure for uploading an image varies slightly depending on which method your organisation has adopted, so check with your system administrator what is applicable in your organisation.
+Many administrators set up a media library containing images that editors can use on their pages. Others allow their editor's free use of their images. The procedure for uploading an image varies slightly depending on which method your administrators have setup. Check with your system administrator for more information about this.
-#### Inserting an Image from the Media Library
+
-1. Place the cursor in the editor where you want to insert your image.
-2. Click the **Media Picker** button on the toolbar. The **Select Media** tree opens on the right-side of the editor.
-3. Select the folder in which your image is stored.
-4. Click the thumbnail of the image. The **Edit selected media** tree opens.
-5. Enter an **Alternative Text** and **Caption** for your image. Both these fields are optional.
-6. Click **Select** to add the image.
+Inserting an Image from the Media Library
-
+1. Place the cursor in the Rich Text Editor where you want to insert your image.
+2. Click the **Media Picker** button from the toolbar.
+3. Select the folder in which the image is.
+4. Click the thumbnail of your chosen image to open the image properties menu.
+5. Enter a name/description for the image in the **Caption (optional)** field.
+ - It is important to add descriptive titles to images as these are used to assist visually impaired users.
+6. Click **Select**.
-#### Inserting an Image from your Computer
+
-You can upload images directly from your local directory in the rich text editor. These images will be stored in the Umbraco media library. Ensure that the image is placed in the correct location within the library.
+
-You can also create folders in the media library by clicking the `+` icon next to `Media/`.
+
-
+Inserting an Image from your Computer
-To insert an image from your computer:
+You can upload images directly from the Rich Text Editor on the page you are editing. These images will be stored in the Umbraco Media Library. Therefore, it would be best to ensure the image is placed in the correct location within the library. If you click the plus icon underneath the search bar in the media picker slide-out menu you can create folders in the media library.
-1. Place the cursor in the editor where you want to insert your image.
-2. Click the **Media Picker** button. The **Select Media** tree opens on the right-side of the editor.
-3. Click the **Upload** button in the top-right corner of the tree.
-4. Browse to the directory, select the image, and click **Open**.
-5. Enter an **Alternative Text** and **Caption** for your image. Both these fields are optional.
-6. Click **Select** to add the image.
+1. Place the cursor in the Rich Text Editor where you want to insert your image.
+2. Click the **Media Picker** button from the toolbar.
+3. Click the **Upload** button which is located in the top right-hand corner of the menu.
+4. Select the chosen image from the pop-up window.
+5. Enter a name/description for the image in the **Caption (optional)** field.
+6. Click **Select**.
-
+
-#### Deleting an Image from the Page
+
-To delete an image from the page:
+
-1. Select the image in your editor.
-2. Press **Delete** on your keyboard. The image is removed from the page, but is not deleted from the Umbraco media library.
+Deleting an Image from the Page
-### Macros
+To delete an image from the page:
-In Umbraco, macros are small building blocks of functionality that can be used in an editor. Each macro encompasses a piece of functionality and provides an interface to be able to modify the macro as per your requirements. A macro can be anything from a contact form to an embeddable media player. The advantage of macros is that it gives editors the ability to add complex elements to the page in a less complex manner.
+1. Select the image.
+2. Press the **Delete** button on your keyboard.
+ - The image disappears from the page but is not deleted from the Umbraco Media library.
-The macros available to you differ from system to system. Contact your system administrator to find out which macros are available to you and what they do.
+
-#### Adding a Macro to the Page
+## Macros
-1. Place the cursor in the editor where you want to insert your macro.
-2. Click the **Insert Macro** button. The **Select Macro** tree opens on the right-side of the editor.
-3. Select a macro to insert or enter the macro name in the **Search** bar.
+In Umbraco, Macros are small building blocks of functionality that can be dropped into an editor. Each macro encompasses a piece of functionality and provides an interface to modify the macro to your requirements. A macro can be anything from a contact form to an embedded media player. The advantage of macros is that it gives editors the ability to add complex elements to a page.
- 
-4. Configure the macro as required.
-5. Click **Submit** to insert the macro. The macro is displayed in the editor with a dotted border.
+The macros available differ on each system. Kindly check with your system administrator to find out which macros are available to you and what they do. The process for adding and updating a macro is as follows:
- 
+### Adding a Macro to the Page
-{% hint style="info" %}
-If there are no macros, you can [Create Macros](../../../reference/templating/macros/managing-macros.md#creating-macros). The above image is an example of macros available when a Starter Kit package is installed.
-{% endhint %}
+1. Place the cursor in the Rich Text Editor where you want to insert your macro.
+2. Click the **Insert Macro** button from the toolbar.
+3. Select a macro to insert from the macros list.
+4. Click **Submit**.
+ - The macro is displayed in the editor with a dotted border.
-#### Editing macros
+
-You can edit the macro values after it has been added to the rich text editor:
+### Editing Macros
-1. Highlight the macro in the rich text editor.
-2. Click the **Insert Macro** button. The **Select Macro** tree opens on the right-side of the editor.
-3. Here, you can edit the configuration as per your requirements.
+You can edit values after a macro has been added to the Rich Text Editor:
-#### Removing macros
+1. Select the macro in the Rich Text Editor.
+2. Click the **Insert Macro** button from the toolbar.
+ - This will open the configuration menu where you can edit any values previously added.
+
+### Removing Macros
To remove a macro:
-1. Highlight the macro in the rich text editor.
+1. Select the macro in the Rich Text Editor.
2. Press the **Delete** or **Backspace** button on your keyboard.
-### Tables
+## Tables
+
+Tables are used to format information in a grid-based structure. When you insert a table, you select how many rows and columns the table should comprise of. Additionally, you can fill in some optional formatting properties. These values can be changed later, so it is not important to know exactly what your table will look like when you create it.
+
+
+
+### Editing an Existing Table
-Tables are used to format information in a grid based structure. When you insert a table, you select how many rows and columns the table should comprise of, as well as fill in a number of additional optional formatting properties. These values can be altered later, so it is not important to know exactly what your table will look like when you create it.
+To edit the table after creating it, click on the table. A pop-up appears with different table properties and options. Alternatively, you can click on the **Table** button in the Rich Text Editor toolbar.
-
+
-#### Editing an Existing Table
+Clicking on **Table Properties** gives you different options for modifying the table’s appearance. However, the developer of the website may have already created table styles for you so you may not need to adjust these settings.
-To edit an existing table:
+There are other options available for modifying cells, rows, and columns such as width, height, alignment, border, and so on.
-1. Click on a cell in the table.
-2. A small square box is displayed with some quick actions.
-3. Select the action of your choice. Alternatively, click on the **Table** button in the rich text editor. There are various other options available for modifying cells, rows and columns such as height, alignment, merge, insert and delete.
+
- 
+## Configuring a Rich Text Editor
-**Table Properties** provides several options for modifying the table’s appearance. However the developer of the website may have already created table styles for you so you may not need to adjust these settings.
+The Rich Text Editor in Umbraco can be configured in many different ways.
-
+For more information, see the [Rich Text Editor Configuration](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration) article.
diff --git a/12/umbraco-cms/tutorials/editors-manual/working-with-content/rich-text-editor.md b/12/umbraco-cms/tutorials/editors-manual/working-with-content/rich-text-editor.md
deleted file mode 100644
index 6a2113ef871..00000000000
--- a/12/umbraco-cms/tutorials/editors-manual/working-with-content/rich-text-editor.md
+++ /dev/null
@@ -1,285 +0,0 @@
-# Rich Text Editor
-
-The Umbraco Rich Text Editor (RTE) is a field where you, as an editor, can be creative. You select how much you want to do yourself. You can work on text content, format the text, or leave it the way it is. If you want to do more, you can insert images, create tables, or create links to other pages/documents.
-
-The functionality varies depending on how the editor is set up. Here, we describe the default editor with all the options enabled. Contact your system administrator for details regarding your editor.
-
-## Editor Buttons
-
-Below are the default editor buttons available. Your system administrator can determine which buttons are displayed in different templates. You could therefore have access to more or fewer buttons than those shown here.
-
-
-
-## Paragraph Break/Line Break
-
-The editor is like any other word-processing program. You write the text and the text wraps around when the line reaches the end. When you press `ENTER` in the editor, you get a paragraph break, which means there is space between the paragraphs. If you do not want a space, you have to make a line break instead. You do this by pressing `SHIFT+ENTER`.
-
-## Shortcut Keys
-
-To make your work easier, there are shortcut keys for certain editor functions. Shortcut keys let you use the keyboard to carry out certain commands.
-
-| Shortcut | Action |
-| -------- | ---------- |
-| Ctrl + A | Select all |
-| Ctrl + B | Bold |
-| Ctrl + C | Copy |
-| Ctrl + I | Italic |
-| Ctrl + U | Underline |
-| Ctrl + V | Paste |
-| Ctrl + X | Cut |
-| Ctrl + Y | Redo |
-| Ctrl + Z | Undo |
-
-We have listed only a few keyboard shortcuts. For a detailed list of available keyboard shortcuts, see the [official TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/latest/keyboard-shortcuts/).
-
-## View Source Code
-
-
-
-If you are proficient in the use of HTML, you can switch to HTML mode and create your page by writing HTML code. You can also check the code and make minor adjustments to get the page exactly as you want it. Certain elements such as scripts will not be allowed and will be filtered out of the code and pasted into the RTE.
-
-## Text Formatting
-
-You do not normally need to spend much time formatting text because Umbraco takes care of a lot of the formatting for you. When the default formatting is not enough, however, there are a couple of options for controlling the formatting of text:
-
-### Formats
-
-
-
-You can apply formatting via the **Formats** drop-down list. The Formats drop-down list provides predefined styles that can be applied to text while maintaining a consistent look and feel throughout the site.
-
-These styles incorporate advanced formatting functionality which can be applied to provide a different look for certain elements such as links, headings, and sub-headings. For example, you can use a format style to change a link into a call-to-action button.
-
-While the styles available on your site may differ, you can apply styles:
-
-1. Select the text you want to apply the style to.
-2. Select the style to apply from the **Format** drop-down list.
-
-For more information on how to create RTE Styles, see the [Rich Text Editor Styles](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-styles) article.
-
-### Formatting Buttons
-
-
-
-The most basic and probably the most familiar way to control formatting are via the formatting buttons. These work the same as those found in most word-processing applications such as Microsoft Word. With these you can apply basic formatting such as Bold, Italic, Underline, altering text alignment, bulleted and numbered lists, and altering text indentations.
-
-Regardless of the formatting being applied, you can apply a format using the formatting buttons:
-
-1. Select the text you want to apply the formatting to.
-2. Click the appropriate format button to apply the formatting you wish to add.
-
-### Copying Content from Other Programs
-
-When you pre-write content to copy it later into a RTE you may encounter style issues on your website. When pasting content, the original text styles will be preserved. This can lead to different font faces, sizes, and colors from what is expected when the website is viewed. It is advisable to paste the content into a markdown editor such as notepad, then copy, and paste it into your RTE.
-
-### Remove Formatting
-
-
-
-If you have formatted a paragraph or selection using the formatting buttons, you can remove a formatting rule:
-
-1. Select the text you want to remove the formatting from.
-2. Click the relevant formatting button to remove the formatting rule.
-3. Alternatively, you can use the **Remove Format** button from the toolbar.
-
-{% hint style="info" %}
-If you do not have the **Remove Format** button, contact your system administrator.
-{% endhint %}
-
-## Links
-
-
-
-The **Insert/Edit Link** button is used to create links to internal pages, external pages, media files, email links, and anchors. The process for inserting a hyperlink differs depending on the type of hyperlink you wish to create:
-
-### Link to a Page on another Website
-
-1. Select the text that will form the hyperlink.
-2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
-3. Enter the URL of the web page you wish to link to in the **Link** field.
-4. Enter the text that will be displayed as the link title in the **Link Title** field.
- * This is important information for everyone reading the website with different accessibility aids.
-5. Select the **Target** field to open the link in a new window or tab.
-6. Click **Submit**.
-
-
-
-### Link to a Page in Umbraco
-
-1. Select the text that will form the hyperlink.
-2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
-3. Select a page from the **Link to page** field.
- * This will populate the **Link** and **Link Title** fields automatically.
-4. Select the **Target** field to open the link in a new window or tab.
-5. Click **Submit**.
-
-
-
-### Link to a Media File in Umbraco
-
-1. Select the text that will form the hyperlink.
-2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
-3. Select the **Link to Media** button to select the media item.
-4. Click **Select**.
- * This will populate the **Link** and **Link Title** fields automatically with the media item information.
- * By default, the **Link** field contains the media file name and cannot be edited.
-5. Select the **Target** field to open the link in a new window or tab.
-6. Click **Submit**.
-
-
-
-### Link to an Email Address in Umbraco
-
-1. Select the text that will form the hyperlink.
-2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
-3. Enter the text `mailto:` followed by the email address you wish to link to in the **Link** field. For example, `mailto:contact@umbraco.com`.
-4. Enter the text that will be displayed as the link title in the **Link Title** field.
-5. Select the **Target** field to open the link in a new window or tab.
-6. Click **Submit**.
-
-
-
-### Link to an Anchor on the Same Page
-
-An anchor allows you to create internal page links that enable users to navigate within a page. There are two parts to setting up an anchor; the anchor itself and the link to the anchor.
-
-### Creating an Anchor
-
-1. Click the editor cursor where you wish to create the anchor.
-2. Click the **Anchor Button** which will launch the Anchor creation dialog.
-3. Enter your anchor name in the **ID** field.
- * You should avoid special characters and spaces.
-4. Click **Save**.
- * You will see a small anchor icon where you previously had the editor cursor.
-
-
-
-To delete the anchor:
-
-1. Select the anchor icon.
-2. Press your **Delete** key.
-
-
-
-### Linking to an anchor
-
-1. Select the text to which you wish to add the anchor link to.
-2. Click the **Insert link** button to open the link properties slide-out menu.
-3. Add a hash symbol (#) followed by the name of your anchor in the **Anchor/querystring** field.
-4. Enter the text that will be displayed as the link title in the **Link Title** field.
-5. Click **Submit**.
-
-
-
-### Create a Link from an Image
-
-You can make images into clickable links in Umbraco:
-
-1. Insert an image into the RTE.
- * For more information, see the [Working with Images](rich-text-editor.md#working-with-images) section.
-2. Select the image that will form the hyperlink.
-3. Enter the URL of the web page you wish to link to in the **Link** field.
-4. Enter the text that will be displayed as the link title in the **Link Title** field.
-5. Select the **Target** field to open the link in a new window or tab.
-6. Click **Submit**.
-
-
-
-### Removing a Link
-
-
-
-To remove a link:
-
-1. Select the link in the RTE.
- * For text links, click the cursor anywhere within the link text. For an image, click the image itself.
-2. Click the **Remove Link** button which will remove the hyperlink.
-3. Alternatively, you can click the **Insert/Edit Link** button and remove the link from the **Link** field.
-
-## Working with Images
-
-To display images on a page they must be uploaded to your Umbraco Media library. Many organizations set up a media library containing images that editors can use on their pages. Others allow their editor's free use of their images. The procedure for uploading an image varies slightly depending on which method your organization uses. Check with your system administrator about what applies to your organization.
-
-### Inserting an Image from the Media Library
-
-1. Place the cursor in the RTE where you want to insert your image.
-2. Click the **Media Picker** button from the toolbar.
-3. Select the folder in which the image is.
-4. Click the thumbnail of your chosen image to open the image properties menu.
-5. Enter a name/description for the image in the **Caption (optional)** field.
- * It is important to add descriptive titles to images as these are used to assist visually impaired users.
-6. Click **Select**.
-
-
-
-### Inserting an Image from your Computer
-
-You can upload images directly from the RTE on the page you are editing. These images will be stored in the Umbraco Media library. Therefore care should be taken to ensure that the image is placed in the correct location within the library. If you click the plus icon underneath the search bar in the media picker slide-out menu you can create folders in the media library.
-
-1. Place the cursor in the RTE where you want to insert your image.
-2. Click the **Media Picker** button from the toolbar.
-3. Click the **Upload** button which is located in the top right-hand corner of the menu.
-4. Select the chosen image from the pop-up window.
-5. Enter a name/description for the image in the **Caption (optional)** field.
-6. Click **Select**.
-
-
-
-### Deleting an Image from the Page
-
-To delete an image from the page:
-
-1. Select the image.
-2. Press the **Delete** button on your keyboard.
- * The image disappears from the page but is not deleted from the Umbraco Media library.
-
-## Macros
-
-In Umbraco, macros are small building blocks of functionality that can be dropped into an editor. Each macro encompasses a piece of functionality and provides an interface to modify the macro to your requirements. A macro can be anything from a contact form to an embedded media player. The advantage of macros is that it gives editors the ability to add complex elements to a page.
-
-The macros available differ on each system. Kindly check with your system administrator to find out which macros are available to you and what they do. The process for adding and updating a macro is as follows:
-
-### Adding a Macro to the Page
-
-1. Place the cursor in the RTE where you want to insert your macro.
-2. Click the **Insert Macro** button from the toolbar.
-3. Select a macro to insert from the macros list.
-4. Click **Submit**.
- * The macro is displayed in the editor with a dotted border.
-
-
-
-### Editing macros
-
-You can edit values after a macro has been added to the RTE:
-
-1. Select the macro in the RTE.
-2. Click the **Insert Macro** button from the toolbar.
- * This will open the configuration menu where you can edit any values previously added.
-
-### Removing macros
-
-To remove a macro:
-
-1. Select the macro in the RTE.
-2. Press the **Delete** or **Backspace** button on your keyboard.
-
-## Tables
-
-Tables are used to format information in a grid-based structure. When you insert a table, you select how many rows and columns the table should comprise of. Additionally, you can fill in some optional formatting properties. These values can be changed later, so it is not important to know exactly what your table will look like when you create it.
-
-
-
-### Editing an Existing Table
-
-To edit the table after creating it, click on the table. A pop-up appears with different table properties and options. Alternatively, you can click on the **Table** button in the RTE toolbar.
-
-
-
-Clicking on **Table Properties** gives you different options for modifying the table’s appearance. However, the developer of the website may have already created table styles for you so you may not need to adjust these settings. There are other options available for modifying cells, rows, and columns such as width, height, alignment, border, and so on.
-
-
-
-## Configuring a RTE
-
-The RTE in Umbraco can be configured in many different ways. For more information, see the [Rich Text Editor Configuration](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration) article.
diff --git a/13/umbraco-cms/.gitbook.yaml b/13/umbraco-cms/.gitbook.yaml
index f881f2c99fc..5acdbc0159f 100644
--- a/13/umbraco-cms/.gitbook.yaml
+++ b/13/umbraco-cms/.gitbook.yaml
@@ -7,3 +7,4 @@ root: ./
redirects:
tutorials/add-azure-active-directory-authentication: tutorials/add-microsoft-entra-id-authentication.md
fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/nested-content: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-list-editor
+ tutorials/editors-manual/working-with-content/rich-text-editor: tutorials/editors-manual/working-with-content.md
diff --git a/13/umbraco-cms/SUMMARY.md b/13/umbraco-cms/SUMMARY.md
index 49b914d565c..186f6c20229 100644
--- a/13/umbraco-cms/SUMMARY.md
+++ b/13/umbraco-cms/SUMMARY.md
@@ -463,7 +463,6 @@
* [Copying a Page](tutorials/editors-manual/getting-started-with-umbraco/copying-a-page.md)
* [Deleting and Restoring Pages](tutorials/editors-manual/getting-started-with-umbraco/deleting-and-restoring-pages.md)
* [Working with Rich Text Editor](tutorials/editors-manual/working-with-content/README.md)
- * [Rich Text Editor](tutorials/editors-manual/working-with-content/rich-text-editor.md)
* [Version Management](tutorials/editors-manual/version-management/README.md)
* [Comparing Versions](tutorials/editors-manual/version-management/comparing-versions.md)
* [Rollback to a Previous Version](tutorials/editors-manual/version-management/rollback-to-a-previous-version.md)
diff --git a/13/umbraco-cms/tutorials/editors-manual/working-with-content/README.md b/13/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
index 0136a704239..07694ef1743 100644
--- a/13/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
+++ b/13/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
@@ -1,6 +1,6 @@
# Working with Rich Text Editor
-The Umbraco Rich Text Editor (RTE) is a field where you, as an editor, can be creative. You select how much you want to do yourself. You can work on text content, format the text, or leave it the way it is. If you want to do more, you can insert images, create tables, or create links to other pages/documents.
+The Umbraco Rich Text Editor (RTE) is a field where you, as an editor, can be creative. You can select how much you want to do yourself. You can work on text content, format the text, or leave it the way it is. If you want to do more, you can insert images, create tables, or create links to other pages/documents.
The functionality varies depending on how the editor is set up. Here, we describe the default editor with all the options enabled. Contact your system administrator for details regarding your editor.
@@ -43,11 +43,7 @@ If you are proficient in HTML, you can switch to HTML mode to create your page.
Certain elements such as scripts are not recognized by the HTML view of the Rich Text Editor. You can enter the scripts directly in the text view of the editor.
-### Text Formatting
-
-You do not normally need to spend much time formatting text because Umbraco takes care of the formatting. However, the editor provides some options for controlling the text styles.
-
-### Formats
+## Formats
@@ -62,7 +58,11 @@ To apply pre-defined styles:
For more information on how to create the Styles, see the [Rich Text Editor Styles](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-styles) article.
-#### Formatting Buttons
+## Text Formatting
+
+You do not normally need to spend much time formatting text because Umbraco takes care of the formatting. However, the editor provides some options for controlling the text styles.
+
+### Formatting Buttons
@@ -73,7 +73,7 @@ To apply a format using the formatting buttons:
1. Select the text you want to apply the formatting.
2. Click the desired format button.
-#### Copying Content from Other Programs
+### Copying Content from Other Programs
{% hint style="info" %}
When you write content in another editor and copy it into a Rich Text Editor, you may encounter style issues on your website.
@@ -85,7 +85,7 @@ While pasting content, the original text styles are preserved which can lead to
To prevent formatting issues, we recommended pasting the content first into a markdown editor such as Notepad, then copying and pasting it into your Rich Text Editor.
{% endhint %}
-#### Remove Formatting
+### Remove Formatting
@@ -105,15 +105,17 @@ You can also add a **Remove format** button in your toolbar. To add the **Remove
5. Click **Submit**.
6. Click **Save**.
-### Links
+## Links
-The **Insert/Edit Link** button is used to add or update links to internal pages, external pages, media files, email links, and anchors. The process for inserting a hyperlink differs depending on the type of hyperlink you wish to create:
+The **Insert/Edit Link** button is used to add or update links to internal pages, external pages, media files, email links, and anchors. The process for inserting a hyperlink differs depending on the type of hyperlink you wish to create.
To insert different types of hyperlinks, follow these steps:
-#### Link to a Page on Another Website
+
+
+Link to a Page on Another Website
1. Select the text that will form the hyperlink.
2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
@@ -125,7 +127,11 @@ To insert different types of hyperlinks, follow these steps:
-#### Link to a Page in Umbraco
+
+
+
+
+Link to a Page in Umbraco
1. Select the text that will form the hyperlink.
2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
@@ -136,20 +142,28 @@ To insert different types of hyperlinks, follow these steps:
-#### Link to a Media File in Umbraco
+
+
+
+
+Link to a Media File in Umbraco
1. Select the text that will form the hyperlink.
2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
3. Select the **Link to Media** button to select the media item.
4. Click **Select**.
- - This will populate the **Link** and **Link Title** fields automatically with the media item information.
+ - This will automatically populate the **Link** and **Link Title** fields with the media item information.
- By default, the **Link** field contains the media file name and cannot be edited.
5. Select the **Target** field to open the link in a new window or tab.
6. Click **Submit**.
-#### Link to an Email Address in Umbraco
+
+
+
+
+Link to an Email Address in Umbraco
1. Select the text that will form the hyperlink.
2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
@@ -160,11 +174,15 @@ To insert different types of hyperlinks, follow these steps:
-#### Link to an Anchor on the Same Page
+
+
+
+
+Link to an Anchor on the Same Page
-An anchor allows you to create internal page links that enable users to navigate within a page. There are two parts to setting up an anchor; the anchor itself and the link to the anchor.
+An anchor allows you to create internal page links that enable users to navigate within a page. There are two parts to setting up an anchor: the anchor itself and the link to the anchor.
-### Creating an Anchor
+#### Creating an Anchor
1. Click the editor cursor where you wish to create the anchor.
2. Click the **Anchor Button** which will launch the Anchor creation dialog.
@@ -192,7 +210,11 @@ To delete the anchor:
-### Create a Link from an Image
+
+
+
+
+Create a Link from an Image
You can make images into clickable links in Umbraco:
@@ -206,7 +228,11 @@ You can make images into clickable links in Umbraco:
-#### Removing a Link
+
+
+
+
+Removing a Link
@@ -217,13 +243,17 @@ To remove a link:
2. Click the **Remove Link** button which will remove the hyperlink.
3. Alternatively, you can click the **Insert/Edit Link** button and remove the link from the **Link** field.
-### Working with Images
+
+
+## Working with Images
To display images on a page the images must be uploaded to your Umbraco media library.
-Many organizations set up a media library containing images that editors can use on their pages. Others allow their editor's free use of their images. The procedure for uploading an image varies slightly depending on which method your organization uses. Check with your system administrator about what applies to your organization.
+Many administrators set up a media library containing images that editors can use on their pages. Others allow their editor's free use of their images. The procedure for uploading an image varies slightly depending on which method your administrators have setup. Check with your system administrator for more information about this.
+
+
-#### Inserting an Image from the Media Library
+Inserting an Image from the Media Library
1. Place the cursor in the Rich Text Editor where you want to insert your image.
2. Click the **Media Picker** button from the toolbar.
@@ -235,9 +265,13 @@ Many organizations set up a media library containing images that editors can use
-#### Inserting an Image from your Computer
+
+
+
+
+Inserting an Image from your Computer
-You can upload images directly from the Rich Text Editor on the page you are editing. These images will be stored in the Umbraco Media Library. Therefore care should be taken to ensure that the image is placed in the correct location within the library. If you click the plus icon underneath the search bar in the media picker slide-out menu you can create folders in the media library.
+You can upload images directly from the Rich Text Editor on the page you are editing. These images will be stored in the Umbraco Media Library. Therefore, it would be best to ensure the image is placed in the correct location within the library. If you click the plus icon underneath the search bar in the media picker slide-out menu you can create folders in the media library.
1. Place the cursor in the Rich Text Editor where you want to insert your image.
2. Click the **Media Picker** button from the toolbar.
@@ -248,7 +282,11 @@ You can upload images directly from the Rich Text Editor on the page you are edi
-#### Deleting an Image from the Page
+
+
+
+
+Deleting an Image from the Page
To delete an image from the page:
@@ -256,7 +294,13 @@ To delete an image from the page:
2. Press the **Delete** button on your keyboard.
- The image disappears from the page but is not deleted from the Umbraco Media library.
-### Macros
+
+
+## Macros
+
+{% hint style="warning" %}
+Macros will be removed in the next version. Consider using Partial Views or Blocks in Rich Text Editor.
+{% endhint %}
In Umbraco, Macros are small building blocks of functionality that can be dropped into an editor. Each macro encompasses a piece of functionality and provides an interface to modify the macro to your requirements. A macro can be anything from a contact form to an embedded media player. The advantage of macros is that it gives editors the ability to add complex elements to a page.
@@ -272,7 +316,7 @@ The macros available differ on each system. Kindly check with your system admini
-#### Editing Macros
+### Editing Macros
You can edit values after a macro has been added to the Rich Text Editor:
@@ -280,29 +324,33 @@ You can edit values after a macro has been added to the Rich Text Editor:
2. Click the **Insert Macro** button from the toolbar.
- This will open the configuration menu where you can edit any values previously added.
-### Removing macros
+### Removing Macros
To remove a macro:
1. Select the macro in the Rich Text Editor.
2. Press the **Delete** or **Backspace** button on your keyboard.
-### Tables
+## Tables
Tables are used to format information in a grid-based structure. When you insert a table, you select how many rows and columns the table should comprise of. Additionally, you can fill in some optional formatting properties. These values can be changed later, so it is not important to know exactly what your table will look like when you create it.
-#### Editing an Existing Table
+### Editing an Existing Table
To edit the table after creating it, click on the table. A pop-up appears with different table properties and options. Alternatively, you can click on the **Table** button in the Rich Text Editor toolbar.
-Clicking on **Table Properties** gives you different options for modifying the table’s appearance. However, the developer of the website may have already created table styles for you so you may not need to adjust these settings. There are other options available for modifying cells, rows, and columns such as width, height, alignment, border, and so on.
+Clicking on **Table Properties** gives you different options for modifying the table’s appearance. However, the developer of the website may have already created table styles for you so you may not need to adjust these settings.
+
+There are other options available for modifying cells, rows, and columns such as width, height, alignment, border, and so on.
## Configuring a Rich Text Editor
-The Rich Text Editor in Umbraco can be configured in many different ways. For more information, see the [Rich Text Editor Configuration](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration) article.
+The Rich Text Editor in Umbraco can be configured in many different ways.
+
+For more information, see the [Rich Text Editor Configuration](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration) article.
diff --git a/14/umbraco-cms/tutorials/editors-manual/working-with-content/README.md b/14/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
index b389bf93438..8d0ebcab16f 100644
--- a/14/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
+++ b/14/umbraco-cms/tutorials/editors-manual/working-with-content/README.md
@@ -8,7 +8,7 @@ The functionality varies depending on how the editor is set up. Here, we describ
By default, the following editor buttons are available. Your system administrator can determine which buttons are displayed in different templates. You therefore might have access to more or fewer buttons than those shown here.
-
+
## Paragraph Break/Line Break
@@ -43,11 +43,7 @@ If you are proficient in HTML, you can switch to HTML mode to create your page.
Certain elements such as scripts are not recognized by the HTML view of the Rich Text Editor. You can enter the scripts directly in the text view of the editor.
-### Text Formatting
-
-You do not normally need to spend much time formatting text because Umbraco takes care of the formatting. However, the editor provides some options for controlling the text styles.
-
-### Formats
+## Formats
@@ -62,7 +58,11 @@ To apply pre-defined styles:
For more information on how to create the Styles, see the [Rich Text Editor Styles](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-styles) article.
-#### Formatting Buttons
+## Text Formatting
+
+You do not normally need to spend much time formatting text because Umbraco takes care of the formatting. However, the editor provides some options for controlling the text styles.
+
+### Formatting Buttons
@@ -73,7 +73,7 @@ To apply a format using the formatting buttons:
1. Select the text you want to apply the formatting.
2. Click the desired format button.
-#### Copying Content from Other Programs
+### Copying Content from Other Programs
{% hint style="info" %}
When you write content in another editor and copy it into a Rich Text Editor, you may encounter style issues on your website.
@@ -85,7 +85,7 @@ While pasting content, the original text styles are preserved which can lead to
To prevent formatting issues, we recommended pasting the content first into a markdown editor such as Notepad, then copying and pasting it into your Rich Text Editor.
{% endhint %}
-#### Remove Formatting
+### Remove Formatting
@@ -105,7 +105,7 @@ You can also add a **Remove format** button in your toolbar. To add the **Remove
5. Click **Submit**.
6. Click **Save**.
-### Links
+## Links
@@ -113,7 +113,9 @@ The **Insert/Edit Link** button is used to add or update links to internal pages
To insert different types of hyperlinks, follow these steps:
-#### Link to a Page on Another Website
+
+
+Link to a Page on Another Website
1. Select the text that will form the hyperlink.
2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
@@ -125,7 +127,11 @@ To insert different types of hyperlinks, follow these steps:
-#### Link to a Page in Umbraco
+
+
+
+
+Link to a Page in Umbraco
1. Select the text that will form the hyperlink.
2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
@@ -136,7 +142,11 @@ To insert different types of hyperlinks, follow these steps:
-#### Link to a Media File in Umbraco
+
+
+
+
+Link to a Media File in Umbraco
1. Select the text that will form the hyperlink.
2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
@@ -149,7 +159,11 @@ To insert different types of hyperlinks, follow these steps:
-#### Link to an Email Address in Umbraco
+
+
+
+
+Link to an Email Address in Umbraco
1. Select the text that will form the hyperlink.
2. Click the **Insert/Edit Link** button to open the link properties slide-out menu.
@@ -160,11 +174,15 @@ To insert different types of hyperlinks, follow these steps:
-#### Link to an Anchor on the Same Page
+
+
+
+
+Link to an Anchor on the Same Page
An anchor allows you to create internal page links that enable users to navigate within a page. There are two parts to setting up an anchor: the anchor itself and the link to the anchor.
-##### Creating an Anchor
+#### Creating an Anchor
1. Click the editor cursor where you wish to create the anchor.
2. Click the **Anchor Button** which will launch the Anchor creation dialog.
@@ -182,7 +200,7 @@ To delete the anchor:
-##### Linking to an Anchor
+#### Linking to an Anchor
1. Select the text to which you wish to add the anchor link to.
2. Click the **Insert link** button to open the link properties slide-out menu.
@@ -192,7 +210,11 @@ To delete the anchor:
-#### Create a Link from an Image
+
+
+
+
+Create a Link from an Image
You can make images into clickable links in Umbraco:
@@ -206,7 +228,11 @@ You can make images into clickable links in Umbraco:
-#### Removing a Link
+
+
+
+
+Removing a Link
@@ -217,13 +243,17 @@ To remove a link:
2. Click the **Remove Link** button which will remove the hyperlink.
3. Alternatively, you can click the **Insert/Edit Link** button and remove the link from the **Link** field.
-### Working with Images
+
+
+## Working with Images
To display images on a page the images must be uploaded to your Umbraco media library.
Many administrators set up a media library containing images that editors can use on their pages. Others allow their editor's free use of their images. The procedure for uploading an image varies slightly depending on which method your administrators have setup. Check with your system administrator for more information about this.
-#### Inserting an Image from the Media Library
+
+
+Inserting an Image from the Media Library
1. Place the cursor in the Rich Text Editor where you want to insert your image.
2. Click the **Media Picker** button from the toolbar.
@@ -235,7 +265,11 @@ Many administrators set up a media library containing images that editors can us
-#### Inserting an Image from your Computer
+
+
+
+
+Inserting an Image from your Computer
You can upload images directly from the Rich Text Editor on the page you are editing. These images will be stored in the Umbraco Media Library. Therefore, it would be best to ensure the image is placed in the correct location within the library. If you click the plus icon underneath the search bar in the media picker slide-out menu you can create folders in the media library.
@@ -248,7 +282,11 @@ You can upload images directly from the Rich Text Editor on the page you are edi
-#### Deleting an Image from the Page
+
+
+
+
+Deleting an Image from the Page
To delete an image from the page:
@@ -256,50 +294,21 @@ To delete an image from the page:
2. Press the **Delete** button on your keyboard.
- The image disappears from the page but is not deleted from the Umbraco Media library.
-### Macros
-
-In Umbraco, Macros are small building blocks of functionality that can be dropped into an editor. Each macro encompasses a piece of functionality and provides an interface to modify the macro to your requirements. A macro can be anything from a contact form to an embedded media player. The advantage of macros is that it gives editors the ability to add complex elements to a page.
-
-The macros available differ on each system. Kindly check with your system administrator to find out which macros are available to you and what they do. The process for adding and updating a macro is as follows:
-
-### Adding a Macro to the Page
-
-1. Place the cursor in the Rich Text Editor where you want to insert your macro.
-2. Click the **Insert Macro** button from the toolbar.
-3. Select a macro to insert from the macros list.
-4. Click **Submit**.
- - The macro is displayed in the editor with a dotted border.
-
-
-
-#### Editing Macros
-
-You can edit values after a macro has been added to the Rich Text Editor:
-
-1. Select the macro in the Rich Text Editor.
-2. Click the **Insert Macro** button from the toolbar.
- - This will open the configuration menu where you can edit any values previously added.
-
-### Removing macros
-
-To remove a macro:
-
-1. Select the macro in the Rich Text Editor.
-2. Press the **Delete** or **Backspace** button on your keyboard.
+
-### Tables
+## Tables
Tables are used to format information in a grid-based structure. When you insert a table, you select how many rows and columns the table should comprise of. Additionally, you can fill in some optional formatting properties. These values can be changed later, so it is not important to know exactly what your table will look like when you create it.
-#### Editing an Existing Table
+### Editing an Existing Table
To edit the table after creating it, click on the table. A pop-up appears with different table properties and options. Alternatively, you can click on the **Table** button in the Rich Text Editor toolbar.
-Clicking on **Table Properties** gives you different options for modifying the table’s appearance. However, the developer of the website may have already created table styles for you so you may not need to adjust these settings.
+Clicking on **Table Properties** gives you different options for modifying the table’s appearance. However, the developer of the website may have already created table styles for you so you may not need to adjust these settings.
There are other options available for modifying cells, rows, and columns such as width, height, alignment, border, and so on.
@@ -307,6 +316,6 @@ There are other options available for modifying cells, rows, and columns such as
## Configuring a Rich Text Editor
-The Rich Text Editor in Umbraco can be configured in many different ways.
+The Rich Text Editor in Umbraco can be configured in many different ways.
For more information, see the [Rich Text Editor Configuration](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration) article.
diff --git a/14/umbraco-cms/tutorials/editors-manual/working-with-content/images/editor_bar_v13.png b/14/umbraco-cms/tutorials/editors-manual/working-with-content/images/editor_bar_v13.png
deleted file mode 100644
index 79188596e16..00000000000
Binary files a/14/umbraco-cms/tutorials/editors-manual/working-with-content/images/editor_bar_v13.png and /dev/null differ
diff --git a/14/umbraco-cms/tutorials/editors-manual/working-with-content/images/editor_bar_v14.png b/14/umbraco-cms/tutorials/editors-manual/working-with-content/images/editor_bar_v14.png
new file mode 100644
index 00000000000..2207792f2a2
Binary files /dev/null and b/14/umbraco-cms/tutorials/editors-manual/working-with-content/images/editor_bar_v14.png differ