> For the complete documentation index, see [llms.txt](https://salsa-digital.gitbook.io/govcms-content-administration/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://salsa-digital.gitbook.io/govcms-content-administration/rich-text-editing-with-ckeditor-5/overview.md).

# Overview

{% hint style="info" %}
The page has a video that explains the information located at the bottom of the page.
{% endhint %}

The Rich text editor provides a number of buttons/tools that are similar to those used in word-processing software like Microsoft Word. The screenshot below shows you the WYSIWYG\* editor bundled with GovCMS called **CKEditor**.

<figure><img src="/files/aJigsxNgn0e6LOOe0WFs" alt=""><figcaption></figcaption></figure>

Some tools may look familiar, such as **Bold**, *Italics*, Underline[^1] and ~~Strikethrough~~.

However, there are also some additional controls and features.

{% hint style="info" %}
\*Stands for **what you see is what you get**
{% endhint %}

### 🎥 Video

{% embed url="<https://player.vimeo.com/video/488351696?h=801a003ab4>" %}

<details>

<summary>Video transcript</summary>

Welcome to the GovCMS Introduction to Content Management series.

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.

The Rich text editor on the Body field, is where you'll spend most of your time writing and formatting content. The buttons in the editor toolbar are mostly self-explanatory. If you've used a word processor most of these buttons should look familiar.

So let's 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 add headings by selecting the desired heading from the Heading drop-down. Simply select some text and then from the "heading drop-down" you can format it as an h2 or h3.

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. If you cannot see this autocomplete widget, it means the LinkIt module may not be configured for your GovCMS website. Please get in touch with your service provider to have them set this up for you.

You can link to internal pages by entering the page's title, so let's start typing in "event", select the page we want, and click on Save.

If you need to edit the link simply click on it and click on the pencil icon.

You can also link to other websites by adding a full URL into the autocomplete field. So if we want to link to govcms.gov.au, simply enter the URL in, click on the URL in the results section, and click on the green tick.

And finally, if you want to remove the link, simply click on the link and click on the unlink icon.

Another task you'll do a lot in the editor is embedding media assets such as images. You can embed an image by clicking on the "Insert media" button. If you cannot see this button in your editor, please get in touch with your service provider to have them set this up for you.

To embed an image, place the cursor in the location where you want the image embedded and click on the "Insert media" button. From the "Add or select media" pop-up, you can see all the media assets on the site, where you can upload, filter, and insert images.

You can search by media name by entering a keyword into the Name field. You can also sort the list by selecting an option from the "sort by" drop-down.

And you can also change the display between a table or grid view.

Let's search for an image with the keyword event. Enter "event" into the Name field and click on "Apply Filters".

Select the image, ensure its checkbox is ticked, and click on 'Insert Selected'.

Now you should see the inserted image in the editor. When you click on the image, you'll see a floating toolbar. From this toolbar, you can add a caption by clicking the icon and entering your text.

You can also override the alternative text by clicking on the eye icon and entering text into the "Alternative text override" field. By default, the image uses the alternative text that was added when it was first uploaded.

From the view mode drop-down, you can select how the image will be displayed. View modes are often used to show images at different pre set sizes.

For example, if I select 'Square', the image is displayed as a square. If I select 'Wide', it's displayed in a wide format. On this website, 'Thumbnail' is the default view mode.

The list of view modes will likely be different on your website. This is because view modes are specifically created when a website is built. If you have requirements for specific image sizes, you can work with your service provider to create custom view modes for you.

And finally, you can change the image's alignment by clicking on one of these buttons. You can choose the standard alignment, align left with wrapped text, centred, or align right with wrapped text.

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.

</details>

[^1]: Underlined


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://salsa-digital.gitbook.io/govcms-content-administration/rich-text-editing-with-ckeditor-5/overview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.