The rich text editor allows you to enter, edit and format content as you would with any word processor such as Microsoft Word, Apple Pages or Google Docs. Here we guide you through the different functions and how they help you create great web pages.
The Rich Text Editor is made up of two sections; at the top is the toolbar and under is the text box. The text content you enter is actually saved as HTML, which is the language used for displaying web pages, giving them structure, style and embed objects such as images and videos. The Rich Text Editor allows you to edit the content and style of your text without needing to know any HTML.
The toolbar in more detail
You can type directly into the rich text editor and the toolbar is where you can access all of the functionality to style your text and insert links, images and videos.
This screenshot shows a common selection of tools. There are a lot more, but we often customise the range for optimum editor experience. Here are the most commonly used ones and what they do:
Highlight some styled text, then click this tool to remove the formatting, leaving it as plain, default text.
This tool reveals a dropdown list of pre-formatted styles you can select from. These styles will have been created by us as part of the design and build process. This means you don’t have to worry about fonts, text sizes or colours, it’s all taken care of so your pages will be consistent.
Bold, Italic, Underline
Highlight the text you wish to format and toggle any of these styles on and off. You can use any combination of these styles together.
Align left, Align centre, Align right
This will take the currently selected block of content and set the alignment.
Bullet list, Numbered list
Either of these options will format the currently selected block as a list. If you apply this to an existing text and only see one bullet, add carriage returns after each line to show the bullet. There are further options in the dropdown to the right to change they type of bullet or numbering, but you will usually just use the default.
Insert/edit link, Remove link
To insert a link, you can either select the text you want to make a link first, or just put your cursor in place, then click the ‘Inset/edit link’ tool.
There are four different types of link you can create:
1. Email link – Adds a link to send an email.
In the Link field, you need to type mailto: followed by the email address.
The Link title in the Rich text Editor can be the email address, or any other text, such as “Email us”
For email links, it’s good practice to tick the Target to open in new window or tab.
2. Page on another website – Adds a link to an external website.
In the Link field, you need to enter the full url, including the http at the beginning.
The Link title in the Rich text Editor can be the url, or any other text you wish, such as “Click here”
For external links, it’s good practice to tick the Target to open in new window or tab. This means your website will stay open and the external website will open in another window or tab.
3. Page on your website – Adds a link to another page on your website.
You can leave out the ‘Link’ and ‘Link title’ fields as these will get populated automatically when you select the page.
Always leave the Target unchecked (unless you have a good reason to require a new window).
You can either type to search for the page in the Link to page field or browse to the page by expanding the root of your website in the tree structure and selecting it.
The advantage of using this is that if a page is moved or renamed, the link will still work.
4. Link to a media file (PDF document) – Adds a link to an image or document in your Media library
This is similar to linking to a page on your website, except you need to click the Select media button in the Link to Media field to choose the file from your media library.
It's good practice to tick the Target to open in a new window because the PDF will be opened in a different program and the user will not see website navigation. This way they can just close the PDF when they are finished and come back to the page they were on.
Anchor / query string – This option is beyond the scope of this article but in summary:
Anchor will scroll to a specific part of a page instead of the top. The format is # followed by the Id of the page element (or section). So, for a contact form with an id of “contact-form”, you will enter #contact-form. Querystring will pass additional information on to a dynamic page. The querystring starts with ? followed by property and value. Additional values require and & character. An example would be ?search=articles&year=2020&month=7
This tool inserts an image directly into the rich text editor. When the ‘Select media’ panel opens you will see your Media library folder structure and you have 3 options for selecting an image:
- Type to search – Enter the name of the image you want to filter the list. Make sure you are in the correct folder and/or have the Include subfolders in search box checked.
- Upload – Opens a dialog to browse images on your local computer to upload to the Media Library. The image will be uploaded to the folder you have selected so make sure you have the right one selected before you upload.
- Browse – Finally, you can browse the folders and select the image you want. This is a good option if your images are well organised in folders, or you have few images.
This tool embeds a video from another site such as YouTube or Vimeo into the rich text editor.
To get the Url field value, got to the video on YouTube or Vimeo and click the Share link. Paste it into the Url field in Umbraco and click the Retrieve button. It will automatically enter the Width and Height values. We do not recommend you modify these because we use techniques when presenting the video in the front end to size the video appropriately for the device size.
This tool presents you with a table of special characters that you wouldn’t usually have on your keyboard to insert into your text.
Common uses are for the copyright, trademark a registered symbol. There are also mathematical symbols, arrows and one of our favourites is the right pointing guillement (second in from top right) which is very effective when inserted after a text link.
Inline vs Block
One thing to be aware of is the difference between block level elements and inline elements.
Inline elements appear next to other elements on the same line. Examples would be the individual words in a paragraph, special characters, hyperlinks and images. Some tools can be applied directly to inline element without effecting the whole line, such as bold, italic, underline.
A block level element always has its own line, or block. Examples are any heading, paragraph or bullet list. Some tools can only be used with, or only effect a block level element, such as the Alignment tools. A block level element can also have a margin.
Sometimes when dealing with block level elements, such as a paragraph, you get unwanted margins when you enter a new line. A good example of this is a postal address where you want the different parts of the address on different lines, but don’t want the paragraph margin after each line.
A ‘soft return’ can come to your rescue here and is a very useful technique. Instead of pressing the Enter key after a line, Hold the Shift key and press Enter. The result is your new line is immediately underneath and there is no margin because the soft return exists inside the containing block.
Example of the difference between a standard return (left) and a soft return (right)
Where did that style come from?
One issue we see time and time again with the rich text editor is some unexpected styling that you can’t seem to remove. The cause of this is pasting in content that you’ve copied from another website or document.
Remember at the beginning of this article I said the rich text editor saves the data as HTML, well, HTML code can contain styling information, and the styling information that’s applied directly on text takes precedence over any other styles.
To remedy this, you can try to highlight the text and then click ‘Clear formatting’ in the toolbar, but this doesn’t always do a complete job. The best way to handle this is to paste the information without the styling in the first place.
When pasting, never just use the Ctrl + V keyboard shortcut, instead you should right click and select ‘Paste as plain text’ on Windows or ‘Paste and Match Style’ on Mac. Sometimes you may see Paste Special, choosing this will give you further options and you want Unformatted Text.
Hope this has provided more insight on the usefulness and versatility of the Rich Text Editor – as always, get in touch if you have any questions or want to know more about the Umbraco CMS.