Working with Rich Text Editor

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.

Editor Buttons

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.

Editor Bar

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:

  • Space between paragraphs - press ENTER.

  • Line breaks - press SHIFT + ENTER.

Shortcut Keys

To make your work easier, there are shortcut keys for certain editor functions. Use the following shortcut keys to carry out certain commands:

ShortcutAction

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

View Source Code

View Source Code

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.

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

Format Dropdown

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

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

Formatting Buttons

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

When you write content in another editor and copy it into a Rich Text Editor, you may encounter style issues on your website.

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.

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.

Remove Formatting

Remove Format Button

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

Link Button

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:

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.

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

Inserting an Image from your Computer

  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.

  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

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

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

Table Properties

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

Last updated