Relocation Horizons Website

Getting Started

Editing Content

Working with the Rich Text Editor

The Rich Text Editor (RTE) is a field where you, can be creative. You can select how much you want to do yourself. You can work on text content and format the text. You can insert images, create tables, links, or embedded content.

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:

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

Select the text you want to apply the style.
Choose the style from the Format drop-down list.

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:

Select the text you want to apply the formatting.
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:

Select the text you want to remove the style from.
Click the relevant formatting button to remove the formatting rule.

Links

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

For the different types of links you can add to your website, follow the links below to the Working with Links article

Link to a Page on Another Website

Link to a Page in the Same Website

Link to a Media File in Umbraco

Link to an Email Address

Link to an Anchor on the Same Page

Create a Link from an Image

Removing a Link

^{Remove Link Button}

To remove a link:

Select the link in the Rich Text Editor.
For text links, click the cursor anywhere withing the link text. For an image, click the image itself.
Click the Remove Link button which will remove the hyperlink.
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 the images must be uploaded to your 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

Place the cursor in the Rich Text Editor where you want to insert your image.
Click the Media Picker button from the toolbar.
Select the folder in which the image is.
Click the thumbnail of your chosen image to open the image properties menu.
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.
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

Place the cursor in the Rich Text Editor where you want to insert your image.
Click the Media Picker button from the toolbar.
Click the Upload button which is located in the top right-hand corner of the menu.
Select the chosen image from the pop-up window.
Enter a name/description for the image in the Caption (optional) field.
Click Select.

Deleting an Image from the Page

To delete an image from the page:

Select the image.
Press the Delete button on your keyboard.
The image disappears from the page but is not deleted from the Umbraco Media library.

Tables

In modern web design, it is recommended to not build pages with tables unless necessary for presenting information. Do not use tables for structure (example: image on the left and text on the right)

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

If an option here is not available in your Rich Text Editor, contact your system administrator to learn more about your Rich Text Editor