HowToMoodle Blog

How to fix formatting issues to create great courses in your e-learning site

Do you struggle to format your content in Books within your Moodle or Totara Learn site? You may find that you are copying your existing content from your word-processed documents into the editor, only to find its formatting looks wrong or your images are missing from the page once your book has been saved and viewed. We're here to show you why this may happen, and what you can do to bring back that fantastic content for your Moodle or Totara Learn site.

So, why is my content not formatting correctly?

Modern word processors do not just store the words and images, they also store data that controls how Text and Images are formatted and displayed on the page. This means that if you copy content directly from the word processor into the book editor window, you will also be bringing with it most of the hidden formatting control information and this information is not always compatible. This particularly applies to images, often resulting in broken image links.

1 Copied from Word Processor.pngThe above image is copied from a Word Processor document 2 Pasted into Book Editor Result.png

The above image is the result when pasted into the Book Editor

The below HTML code shows what actually gets pasted into the Book Editor:

<h1>This is a Car</h1>
<p>A car is much smaller than a lorry and is used primarily to transport people from one place to another.</p>
<h1 align="center"><!--[if !vml]--><img width="265" height="176" src="file:///C:/Users/ Temp/msohtmlclip1/01/clip_image002.jpg" v:shapes="Picture_x0020_1"><!--[endif]--></h1>
<h1>This is a Lorry</h1>
<p>A lorry is much larger than a car and is most often used to transport goods from one place to another.</p>
<p align="center"><!--[if !vml]--><img width="265" height="189" src="file:///C:/Users/ Temp/msohtmlclip1/01/clip_image004.jpg" v:shapes="Picture_x0020_2"><!--[endif]--></p>

3 How the page would display.png

This image shows how the page will be displayed once saved

How do I fix this?

For text:

In order to get clean text that displays properly, we would recommend copying text from your existing word-processed document and then pasting it into a text editor such as 'Notepad', then reselecting the text from Notepad, copying it again from there and paste it into your book editor window. This will remove the hidden formatting, leaving only your desired text, which you can then format within the book editor windows as you wish.

For Images:

Do not copy and paste images into the editor window, even if it appears to display properly initially, it will often result in broken file links and missing images when you later view the new page you have created. Instead use the Image control and its controls to upload and format your images.

4 Editor controls.png

The image upload control button is highlighted above. Click the area in your text that you would like to insert an image and select the Image Button.

5 Image properties.png

The ‘Image properties’ control will enable you to Upload, Link and Format your required images.

6 File picker.png

Clicking on the ‘Upload a File’ option and then selecting ‘Choose File’ opens the file selector dialogue window which allows you to navigate your file system and find the file you wish to upload.

Highlight the image you wish to upload and select the 'Open' button. Then in the ‘File Picker’ window click the ‘Upload this file’ button. This will upload the file to your site’s storage where it can be properly linked to the Book.

7 Image properties.png

In the ‘Image properties’ window you can then:

  • add a description if desired (or select the ‘Description not necessary’ option);
  • set the screen position for the image;
  • set its display size if you do not want it to remain Automatic.

Once done, click the ‘Save image’ button.

8 Media content.pngYou will need to repeat this process for any media content you wish to use in your book.

If you wish to change the settings for the uploaded image, simply double click on the image in the Books editor window and this will reopen the ‘Image Properties’ control.

This method of copying, pasting and formatting text and especially uploading and displaying images can be used anywhere that the ATTO editor is used within your LMS to better enable you to control over what is displayed and how it is presented.

Images taken from,

What Next

If you would like to get more out of your Moodle or Totara Learn site, we want to help. Call us on 0330 660 1111 or contact us via

Develop your Moodle skills further with our online Moodle Training 

Share this: