---
title: Editing content in rich text fields
related:
  - https://docs.kentico.com/13/managing-website-content/editing-rich-text-content/using-the-rich-text-widget.md
  - https://docs.kentico.com/13/configuring-xperience/configuring-the-environment-for-content-editors/configuring-the-editor-for-rich-text-fields.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

The editor for rich text fields allows you to work with the content of form fields in an WYSIWYG manner. This editor is present in various locations within the system, for example on the **Content** tab of pages in the **Pages** application, or in email marketing.

![Editing a rich text field](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/RTE_CKeditor.png "Editing a rich text field")

On this page, you can find the following:

## Inserting media content

You can insert media content from various sources using the editor toolbar. The toolbar allows you to:

- [Insert media stored on your computer](#inserting-media-stored-on-your-computer) – choose a media file directly from your computer.
- [Insert media from the web](#inserting-media-from-the-web) – for example, an image or a video stored on a different website.
- [Insert media stored in Xperience](#inserting-media-stored-in-xperience) – media [attached ](https://docs.kentico.com/13/managing-website-content/working-with-files/page-attachments/attaching-files-to-pages.md) to a page or in a [media library](https://docs.kentico.com/13/managing-website-content/working-with-files/media-library-files/inserting-files-into-media-libraries.md).

> **Tip:** **Automatically generated image alternative text**
>
> Appropriate alternative text values for images in your content improve the website's accessibility and SEO capability. To help content editors set these values, you can ask your project administrators or developers to configure automatic generating of alternative text for images. This feature uses image recognition logic to provide alternative text in cases where it is not added manually.
>
> For technical information about the image recognition, see [Settings - Cognitive Services](https://docs.kentico.com/13/configuring-xperience/managing-sites/configuring-settings-for-sites/settings-content/settings-cognitive-services.md).

### Inserting media stored on your computer

1. Click where you want to insert the media.
2. On the editor toolbar, click the **Quickly insert media** button. A dialog window opens.

   ![Quickly insert media button](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/insert_media_quick.png "Quickly insert media button")
3. Choose the file that you want to insert and click **Open**.

   **Optional steps**
4. Modify the image properties by right-clicking the image with your mouse and choosing **Properties**. A dialog window opens.
5. [Adjust the properties](#properties-of-media-content-inserted-using-the-editor) based on the media type that you are inserting.
6. Click **Save & Close**. The system places the modified image.

### Inserting media from the web

1. With your mouse, click where you want to insert the media.
2. On the editor toolbar, click the **Insert/Edit image or media** button. An **Insert image or media** dialog window opens.

   ![Insert/Edit image or media toolbar button](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/insertmedia.png "Insert/Edit image or media toolbar button")
3. Switch to the **Web** tab.
4. Enter the URL of the resource into the **URL** field.
5. Try the automatic file type detection using the **Refresh** button. In case the file type cannot be detected, use the **Media type** drop-down list.
6. (Optional) [Adjust the properties](#properties-of-media-content-inserted-using-the-editor) based on the media type that you are inserting.
7. (Optional) Preview how the media file looks with the properties that you applied to it.

   ![](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/inserting_image_or_media_dialog.png)
8. Click **Save & Close**. The system places the media file.
9. **Save** the editing form you are editing.

### Inserting media stored in Xperience

1. With your mouse, click where you want to insert the media.
2. On the editor toolbar, click on the **Insert/Edit image or media** button. An **Insert image or media** dialog window opens.

   ![Insert/Edit image or media toolbar button](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/insertmedia.png "Insert/Edit image or media toolbar button")
3. Depending on where the file that you want to insert is stored, switch to one of the following tabs:
   1. **Attachments** **tab** – for files attached directly to the page you are editing.
   2. **Media libraries** **tab** - for files stored in media libraries.
4. **Select** () the file that you want to insert.
5. (Optional) [Adjust the properties](#properties-of-media-content-inserted-using-the-editor) based on the media type that you are inserting.
6. Click **Save & Close**. The system places the media file.
7. **Save** the editing form.

#### Example – Inserting media stored in Xperience

Look at this short video to see how to insert an image stored in a media library (demonstrated on our sample site):

🎬 [Video](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/kx13-adding-media-file-using-content-tab-optim.mp4)

### Properties of media content inserted using the editor

When inserting specific files using the editor, you may want to fill in certain advanced properties in the **Insert image or media** dialog:

**General tab**

- **URL** – URL of the attached image.
- **Alternate text** – the text used when the image is processed by a screen reader or if it cannot be loaded correctly in a browser. Appropriate alternative text values improve the website's accessibility and SEO capability. If not specified, the system loads the value from the _Description_ property in the [metadata](https://docs.kentico.com/13/configuring-xperience/managing-files/editing-file-metadata.md) of the inserted image. You can also ask your project administrators or developers to configure automatic generating of alternative text for images. See [Settings - Cognitive Services](https://docs.kentico.com/13/configuring-xperience/managing-sites/configuring-settings-for-sites/settings-content/settings-cognitive-services.md).
- **Width**, **Height** – the width and height of the displayed image; in pixels.
  - Aspect ratio can be locked, which makes the second dimension recalculated automatically when you change one dimension, while the ratio between the two dimensions is kept.
  - If unlocked, dimensions can be entered manually into both fields, without the ratio being kept.
  - You can also reload the default dimensions using the **Reset size** icon.
- **Border width** – the width of the border around the displayed image.
- **Border color** – the color of the border around the image; has no effect when border width is not set.
- **Horizontal space** – horizontal space between the image and the surrounding text.
- **Vertical space** – vertical space between the image and the surrounding text.
- **Align** – image alignment.

**Link tab**

- **URL** – if set, the image will become a link to the resource defined by the entered URL. Settings on the **Behavior** tab are overridden.
- **Target** – the destination where the linked resource should be displayed when the image is clicked.

**Advanced tab**

- **ID** – the identifier of the image HTML element.
- **Tooltip** – the text displayed when the mouse cursor is placed over the image.
- **Class** – the image element CSS class.
- **Style** – image element additional styles.

**Behavior tab**

- **None** – the image is inserted as a standard image. When the image is clicked, no action is performed.
- **Open full size in the same window** – the image will become a link. When the image is clicked, its full size is displayed in the same window.
- **Open full size in a new window** – the image will become a link. When the image is clicked, its full size is displayed in a new window.

## Working with links and anchors

You can make certain sections of the text clickable by creating hyperlinks. Once clicked, these links navigate users to different pages or, as described in [working with anchors](#working-with-anchors), to different sections of a page.

### Working with links

You can create the following types of links in the editor:

- [Attachment links](#placing-attachment-links) – allow you to create links to the attachments of the page that you are currently editing.
- [Content links](#placing-content-links) – allow you to create links to pages from the content tree of any of the sites running in the system.
- [Media library links](#placing-media-library-links) – allow you to create links to content stored in [media libraries](https://docs.kentico.com/13/managing-website-content/working-with-files/media-library-files.md).
- [Web links](#placing-web-links) – allow you to create links to different websites.
- [Email links](#placing-email-links) – allow you to create email links that create a new email in the user's default email client and automatically fill in the fields that you specify.
- [Anchor links](#working-with-anchors) – anchors allow you to navigate users to different sections of the same page.

#### Placing attachment links

1. Click in the text area where you want to create a link or select the text that you want to make into a link.
2. In the editor toolbar, click the **Insert/Edit** **link** button. An **Insert link dialog** opens.

   ![Inserting link](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/placing_links.png "Inserting link")
3. Switch to the **Attachments** tab.
4. (Optional) If the attachment that you want to create a link to is not attached to the page, use the **Upload** button to attach it.
5. ** Select** the attachment that you want to create a link to.

   ![Selecting a target for an attachment link](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/selecting_attachment.png "Selecting a target for an attachment link")
6. (Optional) If you have not marked any text that you want to make into a link, fill in the **Link text** field on the **General** tab.
7. On the **Target** tab, specify how the link opens once users click it:
   1. **(not set)** – the default setting, opens the link in the same browser window or tab as the page.
   2. **(frame)** – opens the link in the frame specified in the **Target frame name** field.
   3. **New window (\_blank)** – opens the link in a new browser window.
   4. **Same window (\_self)** – opens the link in the same browser window or tab as the page.
   5. **Parent window (\_parent)** – opens the link in the browser window the current page is nested in.
   6. **Topmost window (\_top)** – opens the link in the browser window that is positioned on the top.
8. **(Optional) Specify Advanced properties.**

   - **ID** – the identifier of the link HTML element
   - **Name** – the name of the link HTML object
   - **Tooltip** – the text displayed when the mouse cursor is placed over the link
   - **Class** – the link element CSS class
   - **Style** – additional link element styles
9. Click **Save & Close**. The system creates the attachment link.
10. **Save** the editing form.

The attachment opens when a user clicks the link.

#### Placing content links

1. Click in the text area where you want to create a link or select the text that you want to make into a link.
2. In the editor toolbar, click the **Insert/Edit** **link** button. An **Insert link dialog** opens.

   ![Inserting link](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/placing_links.png "Inserting link")
3. Switch to the **Content** tab.
4. In the **Site** drop-down list, specify the site on which the content that you want to link to is.
5. In the **Content tree**underneath, select the section to which you want to link.
6. ** Select** the specific page from the listing in the center.
7. (Optional) If you have not marked any text that you want to make into a link, fill in the **Link text** field on the **General** tab.

   ![Selecting a target for a content link](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/selecting_page.png "Selecting a target for a content link")
8. On the **Target** tab, specify how the link opens once users click it:
   1. **(not set)** – default setting, opens the link in the same browser window or tab as the page.
   2. **(frame)** – opens the link in the frame specified in the **Target frame name** field.
   3. **New window (\_blank)** – opens the link in a new browser window.
   4. **Same window (\_self)** – opens the link in the same browser window or tab as the page.
   5. **Parent window (\_parent)** – opens the link in the browser window the current page is nested in.
   6. **Topmost window (\_top)** – opens the link in the browser window that is positioned on the top.
9. **(Optional) Specify Advanced properties.**

   - **ID** – the identifier of the link HTML element
   - **Name** – the name of the link HTML object
   - **Tooltip** – the text displayed when the mouse cursor is placed over the link
   - **Class** – the link element CSS class
   - **Style** – additional link element styles
10. Click **Save & Close**. The system creates the page link.
11. **Save** the editing form.

Now, when a user clicks on the link, they are navigated to the page that you specified.

#### Placing media library links

1. Click in the text area where you want to create a link or select the text that you want to make into a link.
2. In the editor toolbar, click the **Insert/Edit** **link** button. An **Insert link dialog** opens.

   ![Inserting link](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/placing_links.png "Inserting link")
3. Switch to the **Media libraries** tab.
4. In the **Site**and **Library** drop-down lists, specify the media library with the content you want to link.
5. (Optional) Use the **Upload** button to add the file you want to link to into the media library.
6. ** Select** the media library item that you want to create a link to.

   ![Selecting a target for a media library link](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/selecting_media_file.png "Selecting a target for a media library link")
7. (Optional) If you have not marked any text that you want to make into a link, fill in the **Link text** field on the **General** tab.
8. On the **Target** tab, specify how the link opens once users click it:
   1. **(not set)** – default setting, opens the link in the same browser window or tab as the page.
   2. **(frame)** – opens the link in the frame specified in the **Target frame name** field.
   3. **New window (\_blank)** – opens the link in a new browser window.
   4. **Same window (\_self)** – opens the link in the same browser window or tab as the page.
   5. **Parent window (\_parent)** – opens the link in the browser window the current page is nested in.
   6. **Topmost window (\_top)** – opens the link in the browser window that is positioned on the top.
9. **(Optional) Specify Advanced properties.**

   - **ID** – the identifier of the link HTML element
   - **Name** – the name of the link HTML object
   - **Tooltip** – the text displayed when the mouse cursor is placed over the link
   - **Class** – the link element CSS class
   - **Style** – additional link element styles
10. Click **Save & Close**. The system creates the attachment link.
11. **Save** the text you are editing.

Now, the media library opens when a user click the link.

#### Placing web links

1. Click in the text area where you want to create a link or select the text that you want to make into a link.
2. In the editor toolbar, click the **Insert/Edit** **link** button. An **Insert link dialog** opens.

   ![Inserting link](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/placing_links.png "Inserting link")
3. Switch to the **Web** tab.
4. In the **Protocol** drop-down list, select the protocol on which the website you link to runs.
5. (Optional) If you have not marked any text that you want to make into a link, fill in the **Link text** field.

   ![Specifying a web link](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/creating_web_link.png "Specifying a web link")
6. On the **Target** tab, specify how the link opens once users click it:
   1. **(not set)** – default setting, opens the link in the same browser window or tab as the page.
   2. **(frame)** – opens the link in the frame specified in the **Target frame name** field.
   3. **New window (\_blank)** – opens the link in a new browser window.
   4. **Same window (\_self)** – opens the link in the same browser window or tab as the page.
   5. **Parent window (\_parent)** – opens the link in the browser window the current page is nested in.
   6. **Topmost window (\_top)** – opens the link in the browser window that is positioned on the top.
7. **(Optional) Specify Advanced properties.**

   - **ID** – the identifier of the link HTML element
   - **Name** – the name of the link HTML object
   - **Tooltip** – the text displayed when the mouse cursor is placed over the link
   - **Class** – the link element CSS class
   - **Style** – additional link element styles
8. Click **Save & Close**. The system creates the web link.
9. **Save** the text you are editing.

Now, when a user clicks the web link, the browser opens the new address as you specified.

#### Placing email links

1. Click in the text area where you want to create a link or select the text that you want to make into a link.
2. In the editor toolbar, click the **Insert/Edit link** button. An **Insert** **link dialog** opens.

   ![Inserting link](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/placing_links.png "Inserting link")
3. Switch to the **Email** tab.
4. (Optional) If you have not marked any text that you want to make into a link, fill in the **Link text** field.
5. Fill in the fields that you want the user to have prefilled when they click the email link.
6. Click on **Save & Close**. The system creates the email link.
7. **Save** the text you are editing.

Now, when a user clicks on the email link, their default email client creates a new message and prefills the fields that you specified.

### Working with anchors

Anchor hyperlinks allow you to create links to certain parts of a text. You can then use these links to navigate users to different sections of a page, for example, to different headers. Once a user clicks a link pointing to an anchor, the page scrolls to where you placed the anchor. You can place anchors anywhere in a text area.

#### Placing anchors

You can insert an anchor anywhere in a text area.

1. Click where you want to place the anchor.
2. In the editor toolbar, click the **Anchor** button. An anchor properties dialog appears.

   ![Inserting an anchor](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/placing_anchor_links.png "Inserting an anchor")
3. Fill in the **Anchor Name**.
4. Click **OK**. The system places the anchor in the text.
5. **Save** the text you are editing.

You can now link to the anchor as described below.

#### Linking to anchors

1. Mark the text that you want to use as a link to the anchor [that you created](#placing-anchors).
2. In the editor toolbar, click the **Insert/Edit** **link** button. An Insert **link dialog** opens.

   ![Inserting link](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/placing_links.png "Inserting link")
3. Switch to the **Anchor** tab.
4. In the **Link to existing anchor with name**, choose the anchor that you created previously. If you are creating a link to an anchor that does not yet exist, you can type its name in the **Link to the following anchor** field.

   ![Linking to an anchor](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/selecting_anchors.png "Linking to an anchor")
5. Click **Save & Close**. The system creates the link to the anchor that you specified on the page.
6. **Save** the text you are editing.

Now, when a user clicks on the link, the page scrolls to the anchor.

## Adding HTML content

If you wish to directly add (or copy) HTML elements into the text content, first click the **Source** button on the editor toolbar.

![Editor toolbar with the Source button available](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/Editor_Source.png "Editor toolbar with the Source button available")

This switches the text view to source mode, which displays the HTML code of the given content. You can edit or extend the code as required.

> **Note:** **Empty tags in the text editor**
>
> When editing the content of the text editor using the **Source** button, you cannot add empty HTML tags, such as __. Empty tags are removed by the editor when the source HTML is saved. A workaround is to add a **\ ** character entity (a non-breaking space) between the tags.

## Using the spell checker

The Editor comes with a spell checker that checks for mistakes as you type. The spell checker is available in the [full editor toolbar](https://docs.kentico.com/13/configuring-xperience/configuring-the-environment-for-content-editors/configuring-the-editor-for-rich-text-fields/personalizing-the-editor-for-rich-text-fields.md).

1. On the editor toolbar, click the _spell checker_ icon.
2. Click **Enable SCAYT** (Spell Check As You Type)

   ![](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/spelling_checker.png)
3. (Optional) Click the _spell checker_ icon again and select **Options** to configure _Languages, Dictionaries_ and other _Options_ of the spelling checker.
4. Begin typing in the editor. The editor underlines the text it considers incorrect as you type.
5. Right-click any of the underlined text to see suggestions for correction.

   ![](https://docs.kentico.com/docsassets/13/editing-content-in-rich-text-fields/checking_spelling_as_you_type.png)
6. Click a suggestion and the editor automatically corrects the text.

> **Note:** **Adding links to underlined words**
>
> It is currently not possible to [add links](#working-with-links-and-anchors) to words underlined by the spell checker. If you want to add a link to an underlined word, you need to right-click the word and select **Ignore** before you highlight the word and add the link.

## Analyzing text sentiment

When editing the content of rich text fields, you can utilize an integration with [Microsoft Azure Text Analytics](https://azure.microsoft.com/en-us/services/cognitive-services/text-analytics/) to analyze text and look for clues about positive or negative sentiment.

See [Using text analytics](https://docs.kentico.com/13/managing-website-content/using-text-analytics.md) to learn more.