Rich text editor overview

Transcript

Introduction

Welcome to the GovCMS Content Administration Training series. Hi, I’m Ivan from Salsa Digital and in this video, you’ll be given a quick overview of the rich text editor. We’ll cover the following three topics: 

• How to use the rich text editor that comes in GovCMS
• How to create a link using the Link button in the editor
• How to embed an image directly into the text editor

Rich text editor in GovCMS

The Rich text editor on the Body field, right here, is where you’ll spend most of your time writing and formatting content. But the Body field isn’t the only field that uses the editor.

If we go and create a content component, you’ll straight away see that there’s an editor in this component as well.

The rich text editor is used in a few places in GovCMS other than just the main Body field so it’s important to get a good understanding of how to use it.

The buttons in the editor toolbar are mostly self-explanatory. If you’ve used any type of word processor most of these buttons should look familiar. So let go ahead and paste in some random text. Using the editor toolbar we can bold the text, make it italics and underline it. We can even add different headings by selecting one from the Format drop-down.

How to create a link

One of the buttons you’ll use the most is the Link button. If you select a bit of text and click on the Link button, you’ll get a pop-up with an autocomplete field.

You can link to internal pages by entering its title, so let’s start typing in “Disclaimer”, select it and click on Save. If you need to edit the link simply double-click on it. 

You can also link off to other websites, you can add a full URL into the autocomplete field. So if we want to link to https://govcms.gov.au, enter the URL in and click on Save. If you want to remove the link, place the cursor on the link and click on the unlink button.

How to embed images

Another thing you’ll do a lot in the editor is embedding media assets such as images.

You can embed an image by clicking on the E button.

In the default View tab you can see all the media assets on the site, and you can filter by name, media type and tags. So let’s go ahead and search for all media assets with the word event in the name. To do that just add “event” into the name field and click on Apply, and this will return all assets with the keyword “event” in their name then if you want to embed an image, simply select it by using the checkbox. Scroll to the bottom and click on Place. Then from this pop-up, you can add an alternate text so let me enter in “event image”. You can align the image and add a caption. Once you’ve configured everything in here, click on Embed. Then if we scroll down we can see the embedded image.

To edit an embedded asset just double-click on it to see the embed pop-up window again. Currently the image is being displayed at full-width and that’s because from the “Display as” drop-down, we have selected Embed.

But we can change the size of the displayed image. If we select Thumbnail, we can select a different “Image style”. Let’s select thumbnail 100x100.

Now I should mention that on your site you may have a different set of image styles. It’s not uncommon for site builders to create a bunch of custom image styles for a specific site.

So make sure thumbnail 100x100 is selected and let’s align it to the right and click Embed. And now, you can see that image is aligned to the right.

Recap

Let’s now recap what we covered in this video. 

We looked at the rich text editor, which is used in a few places.

You learnt how to add basic formatting to text. And how to add and edit links. And you learnt how to embed images into the editor.