The content editor tool set in Moodle is available in most locations where adding text or images is expected (i.e. forum posts, online text, labels, assignment description fields, page resources, and more.) [NOTE: You may need to click on the square in the left corner to reveal all of the features (the tool pallette) in the content editor.] Sometimes called a WYSIWYG (pronounced wizzy-wig) editor, which stands for 'What You See Is What You Get', this tool allows people to create web content without having to know HTML - a standard language in web page creation. Here are the first five things we think you should know about using this editor:

1. Insert Link (URL)
2. Resizing the Editor Window
3. Insert or Edit an Image
4. HTML Mode
5. Copy and Paste from Word? - Be Aware!

1) Insert link (URL)
A web page can be linked by defining some text or other content as a clickable link in the editor.

• Select a word or phrase that will be the clickable link to the web page.
• Click the Link button from the tool palette.
  
  
  
  
• Enter the 'Link URL' which is the web address of the web page and starts with http:// .
• (Recommended) Set the Target to be 'Open in new window (_blank)'. This tells web browsers to open the destination in a new window or tab, leaving the originating page loaded and available to the user.
• Click 'Insert'
  
  You may also want to create a stand-alone resource that points to a web page.
  Learn about creating a URL resource with this article: http://go.augsburg.edu/moodlelink

top

2) Resizing the Editor Window
If you are planning to spend some time in the editor or have a large amount of content to work with, resizing the editor window can be beneficial. You can change the size of the editor window in two ways:

• Option 1) Click and drag the lower-right corner of the editor window to resize the region.
  
  
  
  
• Option 2) Click the 'Full screen mode' button in the upper-right corner of the tool palette. This opens a new window that shows just the editor in a full screen mode. When you are finished editing your content, click the 'Full screen' button again to return to the normal editing page. Make sure to scroll to the bottom of this page and save your changes!
  
  

top

3) Insert or Edit an Image
The content editor is able to import and display images as well as text and web links. You can place images inline with text or positioned away from text. Here's how:

• Click the 'insert/edit image' button in the editor tool palette. This button looks like a landscape painting.
  
  
  
  
• Upload an image:
  
  • Choose 'Find or upload an image…', then click 'Browse' in the File picker window.
  • Locate and select the image file from your computer and click 'Open', then click 'Upload this file'.
  • You will see a preview of the image in the insert/edit image dialog box.
• Enter a descriptive value in the image description field. This makes the image accessible to screen readers and is considered best practice.
• To modify the alignment of the image with other content, select the 'Appearance' tab. Select from the Alignment pulldown menu to choose the desired setting. You can look at the preview box to the right to see how each setting affects the layout before making your choice.

top

4) HTML mode
One popular example of using HTML mode in the editor is for adding content that will be embedded in the resource, (such as a YouTube video, VoiceThread, Library database resources or other embeddable content). Use this mode to paste in embed code provided by these tools.

• Copy the embed code from your source content to your clipboard
• Click the HTML button in the tool palette (it looks like a set of angle brackets) - a HTML source editor window will appear
  
  
• Paste the embed code and click 'Update'. The HTML code will render in the WYSIWYG editor window.

top

5) Copy and Paste from Word? - Be Aware!
Because the WYSIWYG editor is designed to create web content, there are inherent limitations to how content not designed to be used as a webpage is interpreted by the editor. When copying and pasting from, for example, a Microsoft Word document which can use a large amount of Word-specific formatting features behind the text you select, all of this information can get translated into alternate characters, funky formatting, or outright incompatible code that creates unnecessary gibberish in the background or worse yet, a dysfunctional webpage.

How to navigate this limitation:

• Option 1: Create your content directly into the editor. Nearly all the standard formatting tools (text color, size, alignment, font formatting) are available in the editor tool pallette and anything you create will inherently be using code design for the web pages. Take a moment to consider this. In this day and age is there anything you would create now that wouldn't be applicable for use on the web. I might just want to begin using the editor from the start instead of having to translate content from Word later when you are ready to distribute it.
• Option 2: If you are not creating content from scratch and you must use existing content from a Word document, use the 'Paste from Word' button (clipboard icon with a 'W') found in the editor tool palette and paste your content into this window. This cleans out most of the unusable code found in Word and for easier integration into Moodle.
  
  Note: This button does not exist in the ATTO editor.
  
  Alternatively, paste your word content into a more basic text editor (such as TextEdit on a Mac or Notepad in Windows). Then, copy this content from that file and paste it into the editor window.

top

Here is a video that demonstrates some of the features of the Atto editor

To switch between the TinyMCE/Atto editors, see the instructions—Moodle: How to change your content editor.

1. Select the first button to toggle open the second row on the toolbar. Click the first button again to hide the second row of tools. Point your mouse arrow over a button to see a screen tip with its name.
   
   
   
   
2. Going in order from left to right, the next buttons on the top row of toolbar are:
   -Heading Styles
   
   -Bold
   -Italics
   
   
   -Bullets (unordered list)
   -Number list (ordered list)
   
   
   -Link (select text, then click the chain link button to paste in a link)
   -Unlink
   
   
   -Insert/edit image
   -Insert media, such as a video file
   
   
   -Record audio  (these embed and play directly in Moodle)
   -Record video  (these embed and play directly in Moodle)
   
   
   -File Manager (uploads files to be stored on Moodle, does not embed the file in the content editor)
   Not recommended for use as an additional place to store files is not necessary. Storing files in Google Drive offers versatility.
   
   
3. The second row of the toolbar contains the following:  I:\www\kb_images\moodle\3\Content_editor\ATTO_8_alignment.png
   
   
   -Underline
   -Strikethrough
   -Subscript
   -Superscript
   -Font color
   
   
   
   -Left alignment
   -Center alignment
   -Right alignment
   -Left indent
   -Right indent
   
   
   -Equation editor
   -Insert character
   -Table
   -Clear formatting
   
   -Undo (or Ctrl + Z)
   -Redo
   
   
   -Accessibility checker  I:\www\kb_images\moodle\3\Content_editor\ATTO_9b_htmlTempFS.png
   -Screenreader helper
   
   
   -HTML (editor - much improved!)
   -Pre-defined template (contains canned instructions for forums, link to Academic Honesty Policy (tip: add to Quiz "description" field), design elements like course banner and specialized headings/bullets
   -Fullscreen (opens the content editor to full screen, click again to go back and Save/Submit
   
   
4. Bring your Word doc into Moodle by following these instructions: 
   1. Click the "W" in the toolbar
   2. Browse to select the document you want to insert
   3. Click "Upload this file"
   4. The file will upload with formatting intact.
   

 http://go.augsburg.edu/matto

Here is a video that demonstrates some of the features of the Atto editor

1.Click your name in the upper right corner of Moodle, then "Preferences"

2. Click "Editor preferences"

3. Select your preferred text editor.  

http://go.augsburg.edu/mdefaulteditor

(Faculty) For additional help with Moodle, visit the Faculty Moodle Resources site at http://go.augsburg.edu/fmr.

(Faculty) For additional help with Moodle, visit the Faculty Moodle Resources site at http://go.augsburg.edu/fmr.

This video demonstrates some of the features of the Atto Editor

Tips for using ATTO:

• If you do not want a YouTube hyperlink to display as embedded in the content editor, then add it as a URL with a unique "descriptive name (length of time)". Then, refer to the URL by the exact name. The autolink will not appear as embedded video, but as a hyperlink.
  
  
• Use descriptive names so you don't end up with auto-linking all over the place. Instead of "Syllabus" name the document "Course Syllabus" or "ML512 Syllabus" and only refer to it as "syllabus" when you do not want to auto-link. [There is no way to break auto-linking in ATTO.] Consider using descriptive names a feature for accessibility. Or, switch back to TinyMCE to remove auto-links.
  
  
• Less is more with formatting (when it comes to accessibility, less formatting code for screen readers to read). The E-Learning team has added two plug-ins to ATTO: font color (has different colors than TinyMCE) and full-screen view.
  
  
• Up your digital skills by learning how to copy/paste HTML code.

Related knowledge base (how-to) articles:

http://go.augsburg.edu/matto

http://go.augsburg.edu/mdefaulteditor  

Shortlink for this article: http:/go.augsburg.edu/mattotips

 Updated: 2020/08/26

This series of screenshots will show you how to insert images in your Moodle course text editor using the free image search tool called Pixabay. Images are free to use and available under Creative Commons licensing.

1. Select the "Insert/Edit image" tool in the Moodle text editor

2. Click "Find or upload an image"

3. Click "Pixabay Media" at left, then type in a search word or phrase 

4. Select an image 

5. Click "Select this file" button

6. Enter a description of the image in the "Image description" field

7. Click the Appearance tab to optionally edit the alignment, size, then click Insert button

8. Click "Save" or "Post to forum" at bottom

 http://go.augsburg.edu/pixabay

• Creating accessible Word documents
• Creating accessible PDF's
• Creating accessible PowerPoint presentations
• Creating accessible Excel workbooks

1. Expand Text Editor Tool Bar: To make full use of the tools in the Moodle Content Editor, you must first expand the toolbar by clicking on the first button at the far left of the toolbar. This will reveal additional tools.
   
   
   
   
2. Use Styles to Establish the Page Structure: Use the "Styles" function in the content editor to format the page text. Use the heading styles to format headings for major sections and subsections (rather than manually changing font size or using "bold" font).
   
   
   
   
3. Hyperlinks: Create hyperlinks with Display Text and avoid pasting in lengthy web addresses.
   1. Type several helpful words that describe the link, then highlight the text.
   2. Click on the link chain icon in the text editor.
   3. Paste the web address into the Enter a URL field.
   4. Check the "open in new window" checkbox.
   5. Click "Create Link."
      
      
4. Check and Retain Text Formatting from Word: If you’ve used styles in Word to add a heading structure to your text, then ensure when the text is pasted into Moodle, the styles and heading structure are preserved. 
   1. Click the "W" in the toolbar
   2. Browse to select the document you want to insert
   3. Click "Upload this file"
   4. File will upload with formatting intact.
      
      
5. Bulleted and Numbered List Buttons: When creating a numbered list or bulleted list, use the bulleted and numbered list buttons in the content editor. Place a period at the end of each list item to indicate the end of the list item.
   
   
   
   
6. Include Text Descriptions of Images and Graphics: Images and graphics should contain Alt Text, a text-based description of the image. Insert the image by:
   
   1. Click the "landscape picture" icon in the toolbar
   2. Browse to select the document you want to insert
   3. Choose the file
   4. Click "Upload this file"
   5. Add the "alt text" description of the image.
   6. Select right alignment
   7. Click "save image"
   
   
   
7. Set Up Table Headers: Create tables using the Moodle text editor or copy and paste a table from Word into the text editor. Once the table is created or pasted, configure the table with headers and a caption (title) to make it accessible.
   1. Right click the first cell in the first row.
   2. In the menu, click on Cell > Table cell properties.
   3. Set the Cell Type to Header.
   4. Adjust the Scope to Column.
   5. Repeat for each additional header.
      
      
8. Add Table Title (Caption)
   1. Click anywhere on the table to select it.
   2. Find the Table button in the text editor and click on it.
   3. Mark the checkbox for Caption.
   4. Click Update to save the changes.
   5. Click above the first row to type the table title.