Working in the text editor
The text editor appears in various places within Drupal, where you need to do a bit more with your text than you can in a standard text field. Much of what you can do will be familiar to you from a standard word processor such as Word.
Here below are som short guides and explanations for the tools in the text editor called "Body".
B makes the text bold; I makes the text italic.
Make characters superscript or subscript.
You can add a horizontal line to separate paragraphs.
Ω Special characters
Here is a list of various special characters that you may not have on your keyboard.
Remove formatting
Use the TX button to remove formatting.
If you come across text written in a language other than the website’s default language, you can select the text and choose the language from the ‘Choose language’ list. This is for accessibility purposes and ensures that screen readers can read the text correctly.
Numbered lists and bulleted lists
Lists make things easier to follow and are useful for listing items or links. Select the text you want to turn into a list and tap the button for either a numbered list or a bulleted list. We recommend that you always use bulleted lists when listing items comprising three or more words, elements or links. Use numbered lists only when the items in the list appear in a specific order.
If you want to add a new line to a bulleted list without creating a new paragraph – and therefore a new bullet point – you can press Shift + Enter.
Block quote
The large quotation mark symbolises a block quote, i.e. a slightly longer quote that you want to highlight. Place the cursor in the paragraph you want to turn into a block quote and click the button. The result will only be visible once you have saved. If you have a short quote, you may need to insert an extra blank line afterwards to make it look neat.
Undo and repeat
The arrow on the left is the undo function. It’s useful if, for example, you accidentally delete something and then change your mind. The arrow on the right is for undoing, so you can undo something you’ve regretted.
Anchors and linking
Anchors are used to create links to text within the same page. The link button is used to create external links, to create anchor links or to link to other pages within the website, with the option to search for and select pages
Links within and outside the website
Anchor links
To create anchor links, start by creating an anchor using the function with the flag icon. Name the anchor something simple that you can easily remember, such as “anchor”.
Next, create some link text, select it and click on the link icon (a chain).
In the URL field, start by typing “#” followed by the name of the anchor, for example “#anchor”. The search function cannot pick up anchors from the page (even though it says it can) – that is why you need to enter the anchor name manually. Confirm by clicking the green tick.
Create anchor links in the text editor
Import media
Here you can add images, videos (we recommend Canvas Studio for video files) and files to the body of the text.
Tables
The table tool allows you to easily insert tables directly into the text editor, without having to switch to HTML mode and paste in your own code. The tables are flexible and automatically format correctly on the page. The tables will be made accessible if you follow the instructions below.
To create a table, place the cursor where you want the table to appear in the text and click once on the table tool.
In the drop-down menu, select the desired size from the table.
With the cursor on the top row, click the Row icon and select Header row. Enter the column headings.
If applicable in your table: With the cursor in the left-hand column, click the Column icon and select ‘Header column’. Enter the row headings.
With the cursor somewhere in the table, click the ‘Toggle caption on’ icon.
Enter a table header. Fill in the rest of the table with the relevant data.
Please note the following:
- Tables should be used with great care and only to present structured data.
- Avoid large tables – if possible, split the data into several smaller tables instead.
- Never use tables as a layout tool.
If you have any old tables that you’ve inserted using HTML code, please replace them with tables created using the table tool.
The table tool in the text editor
Abbreviations
As usual, you should avoid using abbreviations in the body of the text; however, if they are used, they must be explained, and there is a specific method for doing so, as set out in the accessibility guidelines.
Select the abbreviation
Click the Abbreviation button on the toolbar.
In the 'Add title' field, enter what the abbreviation stands for.
Confirm by clicking the green tick.
The abbreviation is now underlined in the text, and the user can hover the mouse pointer over the text to see the explanation.
Formatting
In the formatting menu, you can divide your text into headings and body text by selecting the text and choosing a format from the menu.
Use "Normal" for standard text. Heading 2 and Heading 3 are different levels of subheadings. There is no Heading 1 – that is the heading level for the page itself. Use these to structure your page logically and help visitors find their way around. Many visitors tend to skip over text that lacks subheadings entirely.
You should not use bold or italic text to create additional levels of heading structure in your text. Italics on web pages are difficult to read, and bold text is not interpreted as headings by screen readers, for example. If the structure is so deep that you need additional levels, it might be better to split the content across several pages instead; and if the paragraphs under heading 3 are short, a bulleted list can work well.
Abbreviations
As usual, you should avoid using abbreviations in the body of the text; however, if they are used, they must be explained, and there is a specific method for doing so, as set out in the accessibility guidelines.
Select the abbreviation
Click the Abbreviation button on the toolbar.
In the 'Add title' field, enter what the abbreviation stands for.
Confirm by clicking the green tick.
The abbreviation is now underlined in the text, and the user can hover the mouse pointer over the text to see the explanation.
Formatting
In the formatting menu, you can divide your text into headings and body text by selecting the text and choosing a format from the menu.
Use "Normal" for standard text. Heading 2 and Heading 3 are different levels of subheadings. There is no Heading 1 – that is the heading level for the page itself. Use these to structure your page logically and help visitors find their way around. Many visitors tend to skip over text that lacks subheadings entirely.
You should not use bold or italic text to create additional levels of heading structure in your text. Italics on web pages are difficult to read, and bold text is not interpreted as headings by screen readers, for example. If the structure is so deep that you need additional levels, it might be better to split the content across several pages instead; and if the paragraphs under heading 3 are short, a bulleted list can work well.
Styles
The Styles tool allows you to change the appearance of links. Start by ensuring your links are in a bulleted list, then select the text and click on Styles. There you will find two options for link styles.
List with links
The links are listed one below the other, with a line between each one.
Links as buttons
The links are displayed as buttons. If you use buttons, make sure the text in the links is brief, and only use buttons for shorter lists.
Text format
If you have higher permissions on the website, you also have the option to switch between Basic HTML and Full HTML. Basic HTML is selected by default. If you choose Full HTML, you will see a few additional options in the toolbar. You can align the content to the left, centre or right. You will also see the option to edit the source code (Source).
When working with HTML, you may encounter issues that we in the support team might not be able to resolve, so this is a case of ‘freedom with responsibility’ – but of course you should make use of this option if you know how to do so.
Miscellaneous
The following functions do not have buttons on the toolbar but are useful when working with the text editor.
Cut, paste and copy
There are no buttons for cutting, pasting or copying; instead, you need to use keyboard shortcuts. These vary depending on the operating system.
For Microsoft Windows, the shortcuts are Ctrl + X (cut), Ctrl + V (paste) and Ctrl + C (copy).
On a Mac, the shortcuts are ⌘ Command + X (cut), ⌘ Command + V (paste) and ⌘ Command + C (copy).
Wash text
If you copy text from another source and paste it into the text editor, the formatting may carry over from the original source, such as fonts, bullet points and so on.
All text formatting should be done in the text editor. This ensures that the text looks the same across the entire website and that it does not appear differently in different browsers. This is also important for accessibility reasons – formatting such as headings and lists should always be created in the text editor so that assistive technologies, such as screen readers, can read the content correctly.
When you paste formatted text, Drupal will ask if you want to "clean it before pasting"; you can then click OK. However, it is not certain that this will completely clean up the text, so the safest method is to do the 'clean-up' yourself.
There are various ways to do this. You can paste unformatted text using the keyboard shortcuts Shift + Ctrl + V on Windows and ⌘ Command + Shift + V on a Mac.