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.

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:

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
  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 Insert. 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 Insert. 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 Insert. The system places the media file.
  7. Save the editing form.

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 displayed when the image is not loaded correctly.
  • 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.

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

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

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

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

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

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.

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 <i class="icon-paragraph-o"></i>. Empty tags are removed by the editor when the source HTML is saved. A workaround is to add a &nbsp; character entity (a non-breaking space) between the tags.

Using the spell checker

The Editor comes with a spell checker. You can check your spelling in two ways:

Note that the spell checker is available in the full editor toolbar.

Using the spell checker to check an already typed text

  1. Click in the text area that you want to spell check.
  2. Use the spell checker icon in the editor toolbar and click Check Spelling. A Spell Check dialog appears.
  3. Make adjustments to the text based on the suggestions.
  4. Click on Finish Checking to close the dialog. 

Using the spell checker to check text as you type

  1. On the editor toolbar, click on the spell checker icon.
  2. Click on Enable SCAYT (Spell Check As You Type)
  3. (Optional) Click on 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.

Adding links to underlined words

It is not currently possible to add links 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.


Was this page helpful?