Note: You are currently viewing documentation for Moodle 1.9. Up-to-date documentation for the latest stable version is available here: HTML editor.

HTML editor: Difference between revisions

From MoodleDocs
No edit summary
 
(83 intermediate revisions by 18 users not shown)
Line 1: Line 1:
The Richtext HTML editor provides a word-processor interface embedded in your web page to allow you to edit text in an intuitive way, and produces normal HTML code.
<p class="note">'''Note:''' There is a new HTML editor in Moodle 2.0 onwards. See [[HTML editor 2.0]] for details.</p>


In addition to formatting text, this editor provides a number of extra features you may find useful.


When you choose many functions a new small window will open. Unfortunately it can often open BEHIND the window you are in so you may miss that anything has happened. You can check new windows with [Alt]+[Tab].
Moodle has a standard toolbar that serves as an HTML interface. Many of the icons on the tool bar can be found on most text editing (word processing) programs. This page will cover some of the icons/tools which may not be as familiar to a new user of Moodle.


Note: The HTML editor does not work in all browsers. If you are using a Mac OS X and for some reason it does not appear, try using Firefox instead of Safari as a browser.
For example, you can cut/copy and paste text from other applications into this editor and formatting will be preserved. There is the usual [[Image:Ed paste.gif]] clipboard icon which is for pasting text that has been copied or cut. Or use the usual short cut keys  of Control+C  and Control+V .  


==HTML editor toolbar features==
[[Image:HTMLeditor_tools_M2_1.png|frame|center|HTML editor toolbar in 2.0. See [[HTML editor 2.0]]]]
[[Image:Course Lesson Page Content Toolbar.GIF|frame|center|HTML editor toolbar in a 1.9.5 Lesson page, other modules will look similar.]]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


strict.dtd">
__TOC__


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
===Font and background colours===
<head>
There are two icons to change the [[Image:Ed color fg.gif]] font and the [[Image:Ed color bg.gif]] colour behind text. Clicking on the icon will bring up a color pallet.  Note the HTML color code is displayed.
[[Image:HTML toolbar Color pallet.JPG|center]]


<title>Kamloops Centre for Therapy - Services</title>
===Anchor===
[[Image:Ed anchor.gif]] An HTML anchor identifies text within a page which can be referenced by a link. To use the Anchor, highlight the word, then click on the Anchor icon. Give the anchor a name. Anywhere on the page, highlight the word you would like to link to the Anchor. Use the Link icon and the pull down menu to find the correct anchor.
[[Image:HTML toolbar anchor tool.JPG]]


<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
===Inserting links===
<link rel="stylesheet" type="text/css" href="style.css" />
[[Image:Ed link.gif|left|]] An HTML link creates a path to an external, internal or within the current page. The icon saves writing code.  One method is to copy the address bar from the location you want, click on the link icon, then paste the URL. Another method is to press the Browse button, which will display the [[Files]] area of the course, from whence you select an existing file or upload a new file and link to that.
<style type="text/css">


body { background-image: url("/images/inner_02.jpg"); background-attachment: fixed }
'''To make a new link'''
*Type the text that you want to serve as the anchor for your link
***For example: "Link to course file in demo.moodle.org"
*Select the text
***For example select "course file" by highlighting it with your mouse.
*Click the [[Image:Ed link.gif]] link button in the toolbar
*Type (or paste, or browse to) the URL you want to link to
***For example we used "browse", and clicked on the file to get our entry
*Type in some text which will appear when the mouse rolls over it
***For example: "Course file in demo moodle."
*Target - What kind of window should be called up -- typically, open a New window.
***[[Image:HTML editor insert link target menu.jpg]]
*Anchors - A pull down list allows you to select an [[HTML_editor#Anchor|anchor]] you previously created on the page
*Click OK


</style>
[[Image:HTML toolbar Hyperlink.JPG|center]]


<!--------------------------End Of CSS Style Definitions ---------------------------->
*After the above steps the student will see:
</head>
**[[Image:HTML toolbar Insert Link result1.jpg|frame|center|This result]]


<div align="left">


* [[Image:Ed unlink.gif]] The unlink, will remove the HTML link from the selected text.


<div align="center"><img src="/images/logo.gif" width="300" height="60" alt="Kamloops Centre for Therapy">
====TIPs - inserting links====
</div>
*This process does '''NOT''' work inside the wiki module where you need to use the Wiki link system (square brackets containing the label and the link separated by a vertical line character)
*A course file has a URL address that can be found via the browse button


<DIV align="left">
===Prevent Automatic Linking===
<ul id="nav">
* [[Image:Ed nolink.gif]] The prevent automatic linking icon prevents the selected text from being linked to [[Glossary]]. For example, this is useful in a quiz question or where the links are distracting in a presentation.
<li><a href="http://kamloopscentrefortherapy.com" title="Home">Home</a></li>
<li><a href="services.html" title="Services">Services</a></li>
  <li><a href="#" onclick="javascript: window.open
('http://www.websitetoolbox.com/guestbook/kamloopscentrefortherapy', '',
'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=820,height=590');
return false"  id="menu437" title="Kamloops Centre for Therapy -
Guestbook"><span>Guestbook</span></a></li>


<li><a href="contact.html" title="Contact">Contact</a></li>
This also prevents automatic linking to activity or resource pages within the same course if the Resource Names Auto-linking filter has been enabled at Site level.
</ul>
<ul id="subnav">
  <li id="subnavfirst"><a href="events.html" title="Events">Events</a></li>
<li><a href="#" onclick="javascript: window.open('login.html', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=900,height=590'); return false"  id="menu437" title="Kamloops Centre for Therapy - Login"><span>Login</span></a></li>


===Inserting images===
[[Image:Ed_image.gif]] Moodle allows you to upload pictures into a course or site folder, then insert that image into the content area.  It is also possible to use an existing image located outside of your Moodle site.


You can include images in the content area by using the [[Image:Ed_image.gif]] button. This will bring up an insert image edit screen to assist you in inserting an picture.  More detailed instructions for [[Insert image|inserting an image can be found here]]. Moodle recognizes JPG, GIF and PNG as image files.
[[Image:HTML Insert Image tool pop-up.JPG|thumb|center|300px|[[Insert image| Insert image page link]] in Moodle Documentation]]


  <li><a href="editnews.htm" title="Edit News">Edit News</a></li>
If you wish to change an image, give the new image a different file name and link to that.   Some servers will cache the file, thus when you review the change it will still show the old image.
  </ul>


<div id="colone">
===Inserting tables===
<h2>Featured <span>Design</span></h2>
* [[Image:Insert table.gif]] To add layout to your texts, you can use the "Insert Tables" button in the toolbar.
<div class="featureimg"><img src="/images/feature_1.gif" width="" height="84" alt="Featured image" /></div>
<ul class="featurelist">


<li><em>Owner:</em> John Doe</li>
[[Image:HTML toolbar table settings.jpg|center]]
 
*Most table editing tools are only visible if you click the '''Enlarge Editor''' button.
<li><em>Company:</em> Nanobytedesign</li>
<li><em>Finished:</em> January 1st, 2006</li>
<li><em>Description:</em> A website for a design firm that is based in Houston, TX. This design firm had no time to make their own website so we did it for them.</li>
 
</ul>
</div>
 
<div id="coltwo">
<h2>Most <span>Recent</span> Client</h2>
<div class="featureimg"><img src="/images/feature_2.gif" width="192" height="84" alt="Featured image" /></div>
<ul class="featurelist">
<li><em>Owner:</em> Dave Bledsoe</li>
<li><em>Company:</em> SleekNetwork</li>
 
<li><em>Finished:</em> January 1st, 2006</li>
<li><em>Description:</em> A website for a network of websites with different opportunities including an arcade website, myspace goodies, and much more.</li>
</ul>
</div>
 
<div id="colthree">
<h2>Newest <span>Website</span></h2>
 
<div class="featureimg"><img src="/images/feature_3.gif" width="192" height="84" alt="Featured image" /></div>
<ul class="featurelist">
<li><em>Owner:</em> Joe Blow</li>
<li><em>Company:</em> Marketing World</li>
<li><em>Finished:</em> January 1st, 2006</li>
 
<li><em>Description:</em> A website for Marketing World which is a company that is used for a software development firm.</li>
</ul>
</div>
 
<h2 class="heading"><font color=#000000 >Newest <span>News</span></font></h2>
<h3 class="heading"><BODY BACKGROUND ="images/bg_lines4.gif"><li><Font color=#000001>This Site</font></li></h3>
 
<Font color=#000009 >
<h4 class="heading">About</h4>
</font>
<Font size = “9” color=#000000 >
<p>Welcome to Kamloops Centre for Therapy. Our site is still under construction. You may click on
 
the links above to view them. If a broken link, please contact us at
 
http://kamloopscentrefortherapy.com/contact.html .</font></p>
</font>
 
<Font color=#000009 >
<h4 class="heading">When is it going to be done?</h4>
</font>
 
<Font size = “9” color=#000000 >
<p>We are currently working hard at this website. Please keep checking back; if you would like
 
updates, just contact us with the subject "Updates" . Make sure you provide you name and
 
email.</font><br />
<br />
</font>
 
<div id="foot">
<BODY BACKGROUND ="/images/bg_lines4.gif">
  <p>Copyright © 2008 - All Rights Reserved<br /><a href="http://www.kamloopscentrefortherapy.com"
 
title="Kamloops Centre for Therapy"><strong>Kamloops Centre for Therapy</strong></a></p>
 
</div>


</body>


</html><!-- Register4less.com -->
===Inserting smilies (emoticons)===


==Inserting images==
The smiley icon [[Image:Smiley.gif]] will allow you to add a small icon (for example [[Image:Cool.gif]] ) in your text. A dialog will pop up that allows you to select from a table of smiley icons. Alternatively, you can just type the corresponding code straight into your text and it will be converted later when your text is displayed.
[[Image:HTML toolbar Smiley icon selections.JPG|center]]


If you have images that are already published on a web site and accessible via a URL, you can include these images in your texts using the "[[Page_content#Image_Insertion|Insert Image]]" button. Moodle recongizes JPG, GIF and PNG as image files.
===Clean Word button===
The clean Word [[Image:Ed wordclean.gif]] button removes some Word formatting from your pasted text so that the page is smaller, less complex and thus loads faster.  The [http://www.microsoft.com/downloads/details.aspx?FamilyID=209ADBEE-3FBD-482C-83B0-96FB79B74DED&displaylang=EN Microsoft Office HTML Filter 2.0] removes all Word code from HTML file far more effectively for Office 2000. This filter is already built into office in Microsoft Office XP onwards.


==Inserting tables==
===Special characters===
The special characters [[Image:special characters button.gif]] button, allows you to enter special characters from a table.
[[Image:HTML_toolbar_Special_character_selections.JPG|center]]


*To add layout to your texts, you can use the "Insert Tables" button in the toolbar.
===Toggle to HTML Code editing===
*Most table editing tools are only visible if you click the '''Enlarge Editor''' button.


==Inserting links==
The [[Image: Ed html.gif]] button changes the display window to raw HTML code. This can be useful for those of you that know how to use it (or want to learn!). Most of the buttons do not work in this view, including many of the hotkeys.


To make a new link,
[[Image:HTML editor HTML code example.png|thumb|center|400px|Example of HTML code for content area in a forum post ]]
*type the text that you want to be a link
*select the text
*click the link button in the toolbar
*Type (or paste, or browse to) the URL you want to link to
*Click OK
NOTE: This process does '''NOT''' work inside the wiki module where you need to use the Wiki link system (square brackets containing the label and the link seperated by a vertical line character)


==Inserting smilies (emoticons)==
===Enlarge editor===
The [[Image:Fullscreen maximize.gif]] button will expand the HTML editor area.


To embed these small icons in your text, click on the smiley icon in the toolbar. A dialog will pop up that allows you to select from the following smiley icons. (Alternatively, you can just type the corresponding code straight into your text and it will be converted later when your text is displayed).
===Clean Word button===
The clean Word [[Image:Ed wordclean.gif]] button removes some Word formatting from your pasted text so that the page is smaller, less complex and thus loads faster.  The [http://www.microsoft.com/downloads/details.aspx?FamilyID=209ADBEE-3FBD-482C-83B0-96FB79B74DED&displaylang=EN Microsoft Office HTML Filter 2.0] removes all Word code from HTML file far more effectively for Office 2000. This filter is already built into office in Microsoft Office XP onwards.


==Shortcut keys==
==Shortcut keys==
Here are some common editing short cut or hot keys which will within the HTML editor in WYSIWYG view.  Different operating systems and browsers may not support all these keys.  The most universal hot keys are in''' bold'''.
{|  border="0" cellpadding="2" cellspacing="0" style="text-align:left"
! width="70"|Keys
! width="300"|Action
! width="10"|
! width="70"|Keys
! width="300"|Action


{| class="wikitable" style="text-align:center"
|-
|-
! Keys
| '''Ctrl-C'''
! Action
|-
| Ctrl-C
| Copy   
| Copy   
 
|
|-
| '''Ctrl-V'''
| Ctrl-V
| Paste
| Paste


|-
|-
| Ctrl-X
| '''Ctrl-X'''
| Cut
| Cut
 
|
|-
| '''Ctrl-F'''
| Ctrl-O
| Find text
| Change the font
 
|-
| Ctrl-P
| Change the font size


|-
|-
| Ctrl-H
| Ctrl-H
| Change text format (headings etc.)
| Find and replace
|
| *
| *


|-
|-
| Ctrl-1
| '''Ctrl-Z'''
| to Ctrl-6 Change heading level
| Undo
|
| '''Ctrl-Y'''
| Redo


|-
|-
| Ctrl-=
| '''Ctrl-B'''
| Change text language for screen readers, or specify language for the Multilang filter
 
|-
| Ctrl-B
| Make text bold  
| Make text bold  
 
|
|-
| '''Ctrl-I'''
| Ctrl-I
| Make text italic  
| Make text italic  


|-
|-
| Ctrl-U
| '''Ctrl-U'''
| Underline text  
| Underline text  
|
| '''Ctrl-S'''
| Strikethrough text


|-
|-
| Ctrl-S
| Ctrl-H
| Strikethrough text  
| Change text format (headings etc.)
|
| Ctrl-1
| to Ctrl-6 Change heading level


|-
|-
| Ctrl-,
| Ctrl-,
| Subscript  
| Subscript  
 
|
|-
| Ctrl-.
| Ctrl-.
| Superscript  
| Superscript  


|-
|-
| Ctrl-O
| Change the font
|
| Ctrl-0
| Ctrl-0
| Clean Word HTML  
| Clean Word HTML  
|-
| Ctrl-Z
| Undo
|-
| Ctrl-Y
| Redo


|-
|-
| Ctrl-L
| Ctrl-L
| Justify left  
| Justify left  
 
|
|-
| Ctrl-E
| Ctrl-E
| Center  
| Center  
Line 242: Line 178:
| Ctrl-J
| Ctrl-J
| Justify full  
| Justify full  
 
|
|-
| Ctrl-/
| Ctrl-/
| Text runs left to right  
| Text runs left to right  
Line 250: Line 185:
| Ctrl-<nowiki>|</nowiki>
| Ctrl-<nowiki>|</nowiki>
| Text runs right to left  
| Text runs right to left  
 
|
|-
| Ctrl-;
| Ctrl-;
| Decrease indent  
| Decrease indent  
Line 258: Line 192:
| Ctrl-'
| Ctrl-'
| Increase indent  
| Increase indent  
 
|
|-
| Ctrl-G
| Ctrl-G
| Change text colour  
| Change text colour  
Line 266: Line 199:
| Ctrl-K
| Ctrl-K
| Change background colour  
| Change background colour  
 
|
|-
| Ctrl-P
| Ctrl-F
| Change the font size
| Search and replace


|-
|-
| Ctrl-`
| Ctrl-`
| Switch to HTML source code view  
| Switch to HTML source code view  
 
|
|-
| Ctrl-M
| Ctrl-M
| Toggle fullscreen editor mode  
| Toggle fullscreen editor mode  
Line 282: Line 213:
| Ctrl-Alt-O
| Ctrl-Alt-O
| Insert ordered list  
| Insert ordered list  
 
|
|-
| Ctrl-Alt-U
| Ctrl-Alt-U
| Insert unordered list  
| Insert unordered list  
Line 290: Line 220:
| Ctrl-Alt-R
| Ctrl-Alt-R
| Insert horizontal rule  
| Insert horizontal rule  
 
|
|-
| Ctrl-Alt-A
| Ctrl-Alt-A
| Create anchor  
| Create anchor  
Line 298: Line 227:
| Ctrl-Alt-L
| Ctrl-Alt-L
| Create link  
| Create link  
 
|
|-
| Ctrl-Alt-D
| Ctrl-Alt-D
| Unlink  
| Unlink  
Line 306: Line 234:
| Ctrl-Alt-N
| Ctrl-Alt-N
| Turn off autolinking  
| Turn off autolinking  
 
|
|-
| Ctrl-Alt-I
| Ctrl-Alt-I
| Insert image  
| Insert image  
Line 314: Line 241:
| Ctrl-Alt-T
| Ctrl-Alt-T
| Insert table  
| Insert table  
 
|
|-
| Ctrl-Alt-S
| Ctrl-Alt-S
| Insert emoticon  
| Insert emoticon  
Line 322: Line 248:
| Ctrl-Alt-C
| Ctrl-Alt-C
| Insert special character  
| Insert special character  
|
| Ctrl-=
| Change text language for screen readers, or specify language for the Multilang filter


|}
|}


==Code editing==
==Tips and Tricks==
*[[Themes|Theme]] settings can control the default fonts in the HTML editor. It is possible to have individual themes for a context (for example, a course may have its own theme).


The [<>] button changes the display window to raw HTML code. This can be useful for those of you that know how to use it (or want to learn!). Most of the buttons do not work there, not even the Search and Replace unfortunately.  
*When you choose many functions a new small window will open. Unfortunately it can often open BEHIND the window you are in so you may miss that anything has happened. You can check new windows with [Alt]+[Tab].
 
*The HTML editor does not work in all browsers. If you are using a Mac OS X and for some reason it does not appear, try using Firefox instead of Safari as a browser.
 
*To make the switch in Safari in Moodle 1.9:
:#With Safari open, go to Preferences in the Safari menu.
:#Select the Advanced tab.
:#At the bottom of the window, check "Show Develop menu in menu bar"
:#The second item in the Develop menu is "User Agent". Select a version of Firefox and possibly Internet Explorer also works.
 
*Cannot make HTML give you the text style you want? Use an image or even an animated gif file.
 
*It is possible to deploy your own custom smiley (emoticon) set. This is [[deploying_custom_emoticons|described here]].


==See also==  
==See also==  


*[[HTML editor FAQ]]
*[[HTML editor 2.0]]
*[[Page content]] - for more assistance on using some of above editing icons
*[[Page content]] - for more assistance on using some of above editing icons
*[[Insert image]] - examples and instructions for inserting and editing images
*[[HTML in Moodle]]
*[[HTML in Moodle]]
*[[Editor settings]]
*[[HTML editor settings]] - change the look of the HTML toolbar
*Using Moodle [http://moodle.org/mod/forum/view.php?id=1035 HTML editor forum]
*Extend HTMLAREA editor with an extra toolbar, full of useful plugins by using [[htmlarea_custom_plugins]] framework (tiny patch).
*Using Moodle [http://moodle.org/mod/forum/discuss.php?d=64354 Question about insert image function in HTML editor] forum discussion, including methods of enabling students to insert images using the HTML editor
 
*Using Moodle [http://moodle.org/mod/forum/discuss.php?d=66805 Need to display english special phonetic symbols for ESL students] forum discussion
Using Moodle forum discussions:
*[http://moodle.org/mod/forum/discuss.php?d=64354 Question about insert image function in HTML editor] including methods of enabling students to insert images using the HTML editor
*[http://moodle.org/mod/forum/discuss.php?d=66805 Need to display english special phonetic symbols for ESL students]
*[http://moodle.org/mod/forum/discuss.php?d=83115 tables in HTML editor]


[[Category:Teacher]]
[[Category:HTML editor]]


[[fr:Éditeur WYSIWYG]]
[[fr:Éditeur HTML]]
[[ja:HTMLエディタ]]
[[ja:HTMLエディタ]]
[[pl:Edytor_HTML]]
[[pl:Edytor_HTML]]

Latest revision as of 17:19, 24 June 2019

Note: There is a new HTML editor in Moodle 2.0 onwards. See HTML editor 2.0 for details.


Moodle has a standard toolbar that serves as an HTML interface. Many of the icons on the tool bar can be found on most text editing (word processing) programs. This page will cover some of the icons/tools which may not be as familiar to a new user of Moodle.

For example, you can cut/copy and paste text from other applications into this editor and formatting will be preserved. There is the usual Ed paste.gif clipboard icon which is for pasting text that has been copied or cut. Or use the usual short cut keys of Control+C and Control+V .

HTML editor toolbar features

HTML editor toolbar in 2.0. See HTML editor 2.0
HTML editor toolbar in a 1.9.5 Lesson page, other modules will look similar.


Font and background colours

There are two icons to change the Ed color fg.gif font and the Ed color bg.gif colour behind text. Clicking on the icon will bring up a color pallet. Note the HTML color code is displayed.

HTML toolbar Color pallet.JPG

Anchor

Ed anchor.gif An HTML anchor identifies text within a page which can be referenced by a link. To use the Anchor, highlight the word, then click on the Anchor icon. Give the anchor a name. Anywhere on the page, highlight the word you would like to link to the Anchor. Use the Link icon and the pull down menu to find the correct anchor. HTML toolbar anchor tool.JPG

Inserting links

Ed link.gif

An HTML link creates a path to an external, internal or within the current page. The icon saves writing code. One method is to copy the address bar from the location you want, click on the link icon, then paste the URL. Another method is to press the Browse button, which will display the Files area of the course, from whence you select an existing file or upload a new file and link to that.

To make a new link

  • Type the text that you want to serve as the anchor for your link
      • For example: "Link to course file in demo.moodle.org"
  • Select the text
      • For example select "course file" by highlighting it with your mouse.
  • Click the Ed link.gif link button in the toolbar
  • Type (or paste, or browse to) the URL you want to link to
      • For example we used "browse", and clicked on the file to get our entry
  • Type in some text which will appear when the mouse rolls over it
      • For example: "Course file in demo moodle."
  • Target - What kind of window should be called up -- typically, open a New window.
      • HTML editor insert link target menu.jpg
  • Anchors - A pull down list allows you to select an anchor you previously created on the page
  • Click OK
HTML toolbar Hyperlink.JPG
  • After the above steps the student will see:
    • This result


  • Ed unlink.gif The unlink, will remove the HTML link from the selected text.

TIPs - inserting links

  • This process does NOT work inside the wiki module where you need to use the Wiki link system (square brackets containing the label and the link separated by a vertical line character)
  • A course file has a URL address that can be found via the browse button

Prevent Automatic Linking

  • Ed nolink.gif The prevent automatic linking icon prevents the selected text from being linked to Glossary. For example, this is useful in a quiz question or where the links are distracting in a presentation.

This also prevents automatic linking to activity or resource pages within the same course if the Resource Names Auto-linking filter has been enabled at Site level.

Inserting images

Ed image.gif Moodle allows you to upload pictures into a course or site folder, then insert that image into the content area. It is also possible to use an existing image located outside of your Moodle site.

You can include images in the content area by using the Ed image.gif button. This will bring up an insert image edit screen to assist you in inserting an picture. More detailed instructions for inserting an image can be found here. Moodle recognizes JPG, GIF and PNG as image files.

Insert image page link in Moodle Documentation

If you wish to change an image, give the new image a different file name and link to that. Some servers will cache the file, thus when you review the change it will still show the old image.

Inserting tables

  • Insert table.gif To add layout to your texts, you can use the "Insert Tables" button in the toolbar.
HTML toolbar table settings.jpg
  • Most table editing tools are only visible if you click the Enlarge Editor button.


Inserting smilies (emoticons)

The smiley icon Smiley.gif will allow you to add a small icon (for example Cool.gif ) in your text. A dialog will pop up that allows you to select from a table of smiley icons. Alternatively, you can just type the corresponding code straight into your text and it will be converted later when your text is displayed.

HTML toolbar Smiley icon selections.JPG

Clean Word button

The clean Word Ed wordclean.gif button removes some Word formatting from your pasted text so that the page is smaller, less complex and thus loads faster. The Microsoft Office HTML Filter 2.0 removes all Word code from HTML file far more effectively for Office 2000. This filter is already built into office in Microsoft Office XP onwards.

Special characters

The special characters special characters button.gif button, allows you to enter special characters from a table.

HTML toolbar Special character selections.JPG

Toggle to HTML Code editing

The Ed html.gif button changes the display window to raw HTML code. This can be useful for those of you that know how to use it (or want to learn!). Most of the buttons do not work in this view, including many of the hotkeys.

Example of HTML code for content area in a forum post

Enlarge editor

The Fullscreen maximize.gif button will expand the HTML editor area.

Clean Word button

The clean Word Ed wordclean.gif button removes some Word formatting from your pasted text so that the page is smaller, less complex and thus loads faster. The Microsoft Office HTML Filter 2.0 removes all Word code from HTML file far more effectively for Office 2000. This filter is already built into office in Microsoft Office XP onwards.

Shortcut keys

Here are some common editing short cut or hot keys which will within the HTML editor in WYSIWYG view. Different operating systems and browsers may not support all these keys. The most universal hot keys are in bold.

Keys Action Keys Action
Ctrl-C Copy Ctrl-V Paste
Ctrl-X Cut Ctrl-F Find text
Ctrl-H Find and replace * *
Ctrl-Z Undo Ctrl-Y Redo
Ctrl-B Make text bold Ctrl-I Make text italic
Ctrl-U Underline text Ctrl-S Strikethrough text
Ctrl-H Change text format (headings etc.) Ctrl-1 to Ctrl-6 Change heading level
Ctrl-, Subscript Ctrl-. Superscript
Ctrl-O Change the font Ctrl-0 Clean Word HTML
Ctrl-L Justify left Ctrl-E Center
Ctrl-J Justify full Ctrl-/ Text runs left to right
Ctrl-| Text runs right to left Ctrl-; Decrease indent
Ctrl-' Increase indent Ctrl-G Change text colour
Ctrl-K Change background colour Ctrl-P Change the font size
Ctrl-` Switch to HTML source code view Ctrl-M Toggle fullscreen editor mode
Ctrl-Alt-O Insert ordered list Ctrl-Alt-U Insert unordered list
Ctrl-Alt-R Insert horizontal rule Ctrl-Alt-A Create anchor
Ctrl-Alt-L Create link Ctrl-Alt-D Unlink
Ctrl-Alt-N Turn off autolinking Ctrl-Alt-I Insert image
Ctrl-Alt-T Insert table Ctrl-Alt-S Insert emoticon
Ctrl-Alt-C Insert special character Ctrl-= Change text language for screen readers, or specify language for the Multilang filter

Tips and Tricks

  • Theme settings can control the default fonts in the HTML editor. It is possible to have individual themes for a context (for example, a course may have its own theme).
  • When you choose many functions a new small window will open. Unfortunately it can often open BEHIND the window you are in so you may miss that anything has happened. You can check new windows with [Alt]+[Tab].
  • The HTML editor does not work in all browsers. If you are using a Mac OS X and for some reason it does not appear, try using Firefox instead of Safari as a browser.
  • To make the switch in Safari in Moodle 1.9:
  1. With Safari open, go to Preferences in the Safari menu.
  2. Select the Advanced tab.
  3. At the bottom of the window, check "Show Develop menu in menu bar"
  4. The second item in the Develop menu is "User Agent". Select a version of Firefox and possibly Internet Explorer also works.
  • Cannot make HTML give you the text style you want? Use an image or even an animated gif file.
  • It is possible to deploy your own custom smiley (emoticon) set. This is described here.

See also

Using Moodle forum discussions:

Retrieved from "https://docs.moodle.org/19/en/index.php?title=HTML_editor&oldid=84658"
Powered by MediaWiki