How to Use Moodle's Text Editor

Transcription

1 How to Use Moodle's Text Editor The text editor has a variety of tools and icons to assist in formatting text, adding links, and inserting images. Many of them will be familiar to anyone who uses word processing software. Editor toolbar The text editor first appears with just one row of buttons. The editor toolbar includes the same basic functions as the toolbar in Microsoft Word or similar word processing software programs. To begin using the editor, simply type directly into the text box area. Use the formatting tools to customize your content, link to files or websites, add images or graphics, etc. as needed. For more options, click the top left Toggle Toolbar icon to expand the toolbar to three rows. How to paste text from other applications You can cut and paste text from other applications such as Microsoft Word into the text editor if you prefer to work offline and then add your content to Moodle. When you are ready to paste text, copy it from from Word or your word processor and click on the Paste from Word icon in the text editor.

2 How to Use Moodle's Text Editor 2 The Paste from Word window will open. Paste your text into the Paste from Word window using Ctrl+V in Windows or Cmd+V in Mac. Click the Insert button and your text will be inserted into the text editor. This process will remove the verbose and unnecessary Word formatting code from your pasted text so that the Moodle page is smaller, cleaner, less complex, and thus will load faster. How to insert a link Type your text and highlight the text that will become the link. Click the Link icon in the toolbar. In the Insert/edit link window type (or paste) the URL in the Link URL field. The URL must be a complete address including You can also click on the browse icon next to the Link URL field to link to an uploaded file. In the Target field, click on the drop-down menu and select Open in a new window (_blank) if you are linking to an external web site outside of Moodle. In the Title field, type the name of the link. Click the Insert button. Your link will be added. To edit the link, return to the text editor, highlight the text that is linked and click on the Insert/edit link icon.

3 How to Use Moodle's Text Editor 3 Other link-related icons Unlink use to remove a link from text. Highlight the text that is the link and click the Unlink icon. Prevent automatic linking use to prevent text from automatically becoming a link from one section of the course to another. If automatic linking is turned on in your course and you type the name of an activity or resource exactly as it appears in the course, the text will automatically become a link when displayed. If you need to prevent this on selected text, highlight the text to select it and click the Prevent automatic linking icon. How to add an image Click in the text area at the beginning of the text where you want the image to display. You will be able to position the image to the left or right side of the paragraph later in the process. Click the Insert/edit image icon on the toolbar. The Insert/edit image window will open. On the General tab, click in the Find or upload an image field.

4 How to Use Moodle's Text Editor 4 1. When the File picker opens, click on Upload a file in the left sidebar. 2. Click the Browse button to select a file from your computer. When you find it, click on it to select it and then click the Open button. The file name will then display next to the Browse button. 3. If you want to save the file with a different file name, type the new file name in the Save as field. Otherwise, leave this field blank. 4. Your name will display in the Author field. If you are the photographer or artist who created the image, leave your name there. If not, type the name of the source of the image. 5. In the Choose license field, select one of the options. Keep the default All rights reserved unless you know the image has a Creative Commons license or is a public domain image. Make sure you understand the use of these licenses before using them. An image you found using a Google search does not necessarily meet the legal definition of public domain. 6. Click the Upload this file button. Moodle will return to the Insert/edit image window and display the image you uploaded in the Preview pane. Type a brief description of the image in the Image description field. This text will display if the image cannot be displayed for any reason.

5 How to Use Moodle's Text Editor 5 Click on the Appearance tab to set the styles for how you want the image to display. Alignment positions the image in relation to the text. Click on the dropdown menu. Select Left if you want the image to display on the left and text to flow around the right side. Select Right if you want the image to display on the right and text to flow around the left side. Note the small visual example will change as you change your choices to show how the image will appear in relation to the text. Vertical space adds space between the top and bottom of the image and any surrounding text; start with 10 and adjust as needed. Horizontal space adds space between the left and right side of the image and any surrounding text; start with 20 and adjust as needed. Border the number in this field will determine the width of the border; use 0 for no border, 1 for a thin border, or larger numbers for thicker borders. Style this field will be filled in automatically based on the choices you make in the other fields; you do not need to type anything in this field. Click the Insert button to insert your image. Your image will now be displayed in the text editor. Continue adding any text as needed. To edit the image or the image's appearance settings, click on the image to select it and click on the Insert/edit image icon.

6 How to Use Moodle's Text Editor 6 How to embed video Videos can be embedded in a Moodle book, forum, lesson, page, quiz and anywhere the text editor is available. Embedding a video, rather than simply linking to it, enables the video to play inside Moodle so people don't have to leave the course to view it. For videos hosted on YouTube Find the video you want to embed. 1. Click on Share 2. Click on Embed 3. If the "Share with playlist starting from..." check box displays, uncheck it. 4. Select the video size. A maximum width of 640 is suggested (width is the first number listed in the size). 5. If the "Show suggested videos when the video finishes" check box displays, uncheck it. To get the embed code, click anywhere in the box with the code that begins with "<iframe..." The code will be highlighted. Copy that code using Control + C (on a PC) or Command + C (on a Mac) or right click with the mouse and select Copy. Go to the In Moodle directions below to add the embed code to your Moodle course.

7 How to Use Moodle's Text Editor 7 For videos hosted on Vimeo Find the video you want to embed. Hover your mouse over the video and click on the Share icon in the upper right corner. When the Share this Video window opens, click on Show options. Scroll down below the video and make any changes you would like to the Size, Color, Intro, and Special stuff sections. A maximum width of 640 is suggested (width is the first number listed in the size). Be sure the "Autoplay this video" box is not checked. Scroll up above the video and click anywhere in the box with the embed code that begins with "<iframe..." The code will be highlighted. Copy that code using Control + C (on a PC) or Command + C (on a Mac) or right click with the mouse and select Copy. Go to the In Moodle directions below to add the embed code to your Moodle course.

8 How to Use Moodle's Text Editor 8 In Moodle In the text editor, type any text you want to display above and/or below the video, such as a title, short introduction, and source. Apply any formatting to the text if needed. Click on the Edit HTML source icon in the toolbar. This will open the HTML source editor and display the HTML code. If <p> </p> or <p> </p> display below the text you added, highlight it and delete it. If you leave it there, it will create a blank empty line between your text and your video. Click in the text editor below all the code currently displayed or on a blank line where you want the video to display. Paste the code you just copied from YouTube or Vimeo using Control + V (on a PC) or Command + V (on a Mac) or right click with the mouse and select Paste. Click on the Update button to return to the text editor WYSIWYG mode (WYSIWYG = What You See Is What You Get). Scroll down to the bottom of the page and save, post, or submit your work.