Editing content in rich text fields

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.

On this page, you can find the following:

• Inserting media content
• Working with links and anchors
• Adding HTML content
• Using the spell checker
• Analyzing text sentiment

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 – choose a media file directly from your computer.
• Insert media from the web – for example, an image or a video stored on a different website.
• Insert media stored in Xperience – media attached to a page or in a media library.

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.

   

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 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.

   

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 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.

   

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.

   

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 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):

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 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.
• 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, to different sections of a page.

Working with links

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

• Attachment links – allow you to create links to the attachments of the page that you are currently editing.
• 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 – allow you to create links to content stored in media libraries.
• Web links – allow you to create links to different websites.
• 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 – 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.

   

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.

   

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.

   

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 treeunderneath, 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.

   

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.

   

3. Switch to the Media libraries tab.

4. In the Siteand 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.

   

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.

   

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.

   

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.

   

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.

   

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.

2. In the editor toolbar, click the Insert/Edit link button. An Insert link dialog opens.

   

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.

   

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.

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.

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.

1. On the editor toolbar, click the spell checker icon.

2. Click Enable SCAYT (Spell Check As You Type)

   

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.

   

6. Click a suggestion and the editor automatically corrects the text.

Analyzing text sentiment

When editing the content of rich text fields, you can utilize an integration with Microsoft Azure Text Analytics to analyze text and look for clues about positive or negative sentiment.

See Using text analytics to learn more.