Note: You are currently viewing documentation for Moodle 2.9. Up-to-date documentation for the latest stable version of Moodle may be available here: Text editor.

Text editor: Difference between revisions

From MoodleDocs
Main page ► Managing a Moodle course ► Editing text ► Text editor
Editing text
(changing this page to reflect Atto)
Line 1: Line 1:
{{Editing text}}
{{Editing text}}
The text editor (sometimes referred to as the 'HTML editor' or even '[http://www.tinymce.com/ TinyMCE]') has many icons to assist the user in entering content.  Many of these icons and functions should be familiar to anyone who uses a word processor.  Some examples of where you will see the text editor include: Editing Section headings, description of an activity, writing an answer to a quiz question or editing the content of many blocks.
The text editor (sometimes referred to as the 'HTML editor' has many icons to assist the user in entering content.  Many of these icons and functions should be familiar to anyone who uses a word processor.  Some examples of where you will see the text editor include: Editing Section headings, description of an activity, writing an answer to a quiz question or editing the content of many blocks.
'''Note:''' From Moodle 2.7 onwards, [https://docs.moodle.org/dev/Atto Atto] will be the default HTML text editor for new installations. Atto is a javascript text editor built specifically for Moodle. You can change your default editor (return to TinyMCE) by going to ' Administration > Site administration > Plugins > Text editors > Manage editors ' and change the order of priority. It's also possible to disable the TinyMCE editor and only use a plain text editor from ''Administration > Site administration > Plugins > Text editors > Manage editors.''


An individual user can select an editor in their profile from ''Administration > My Profile settings > Edit profile.''
The default text editor in Moodle is the Atto editor, a javascript editor built specifically for Moodle. There is also a version of the [[TinyMCE editor]] and a plain text editor.


==Collapsing and expanding the  editor==
Text editors can be enabled, disabled or a different one set to default from ''Administration>Site administration>Plugins>Text editors>Manage editors''. The order of priority may also be specified here.


The TinyMCE editor first appears with just one row of buttons. Clicking the icon top left will expand it to three rows.
An individual user can select an editor in their profile from ''Administration > My Profile settings > Edit profile.''
 
{|
|[[File:26tinymce1.png|250px|thumb|Collapsed view]]
|[[File:26tinymce2.png|250px|thumb|Expanded view]]
|}
 
==Toolbar buttons==
For those who are not familiar with the tool bar, here are the buttons as grouped in their rows. Remember that the site administrator can edit or provide additional buttons.
 
Row 1
{|
|[[File:26tinymcerow1.png|400px|thumb]]
|}
 
{| class="nicetable"
|-
|-
| 1:Expand
| 2.Formatting
| 3.Bold
| 4.Italic
|-
| 5.Bulleted list
| 6.Numbered list
| 7.Add link
| 8.Unlink
|-
| 9.Stop auto linking
| 10.Add image
| 11.Add emoticon
| 12.Add media
|-
| 13.Manage embedded files
|
|
| 
|}
Row 2
 
{|
|[[File:26tinymcerow2.png|400px|thumb]]
|}
 
{| class="nicetable"
|-
|-
| 1:Undo
| 2.Redo
| 3.Underline
| 4.Strikethrough
|-
| 5.Subscript
| 6.Superscript
| 7.Align left
| 8.Align centre
|-
| 9.Align right
| 10.Decrease indent
| 11.Increase indent
| 12.Text colour
|-
| 13.Background colour
| 14.Left to Right
| 15.Right to Left
|
|-
 
|}
Row 3
 
{|
|[[File:26tinymcerow3.png|400px|thumb]]
|}
 
{| class="nicetable"
|-
|-
| 1:Font family
| 2.Font size
| 3.Edit HTML
| 4.Find
|-
| 5.Find/replace
| 6.Insert non-breaking space
| 7.Insert special character
| 8.Insert table
|-
| 9.Clean up messy code
| 10.Remove formatting
| 11.Paste as plain text
| 12.Paste from MS Word
 
|-
| 13.Toggle full screen
|-
|}
 
===Colour pickers===
*[[Image:26colourpickers.png]]
There are four levels of selecting a font or background colour,
*A quick pick 5x8 matrix of colours
*"More colours" that links to Picker, Pallet and Named tabs
<gallery>
Image:HTML_editor_color_selector_basic_1.png|A quick pick 5x8 matrix of colors
Image:HTML_editor_color_selector_more_picker_1.png|A rainbow color picker tab
Image:HTML_editor_color_selector_more_pallet_1.png|A Pallet tab with a 18x12 matrix of colors
Image:HTML_editor_color_selector_more_named_1.png|A Named tab with custom pallets
</gallery>
 
====Insert table====
<gallery widths="300px">
Image:HTMLeditor_Insert_Table_general_1.png|General tab
Image:HTMLeditor_Insert_Table_advanced_1.png|Advanced tab
</gallery>
 
'''To add borders to a table'''
 
Cell borders are crucial for helping readers to follow the rows across the screen. If they aren’t showing already you can add them as follows:
 
#In the Wiki page containing your table, click its Edit tab
#Carefully select all the cells of the table
#Then right click (Macs: Command+click or Ctrl+Click) over any part of your selection to get a context menu; from it select Cell > Table Cell Properties; the cell properties dialog box then loads.
#Click on its Advanced tab, set Border Color to black (for instance), then click Apply, and then click Update.
#Click Save; the Wiki page containing your table will then load displaying its borders.
 
==Site administration settings==
 
===Manage editors===
 
A site administrator can enable / disable text editors in ''Settings > Site administration > Plugins > Text editors > Manage editors''. By default the TinyMCE HTML editor and plain text area are enabled.
 
===TinyMCE editor settings===
 
The TinyMCE  HTML editor has its own settings page ''Administration>Site administration>Plugins>Text editors>TinyMCE HTML editor>General settings'' with the following options:
 
====Plugins====
*Buttons for equations, emoticons,images, media, automatic linking, and  legacy spell-checking may be enabled, disabled or uninstall here by clicking on their eye.
*Additionally the equation, emoticon and spell check buttons have links to their Settings screens.
 
[[File:26tinymceplugins.png |thumb|none|upright=2.0|alt="The TinyMCE editor plugins screen" | The TinyMCE editor plugins screen]]
 
=====Manage embedded files=====
 
This plugin allows users to add, delete or override files embedded in the current text area, for example in a label or topic summary. (It complements the [[Embedded files repository]])
 
{|
|[[File:26embeddedfiles1.png|thumb|The Manage files button]]
|
|[[File:26embeddefiles2.png|thumb|Managing embedded files from within TinyMCE]]
|}
 
=====Insert equation=====
 
Accessed from ''Administration>Site administration>Plugins>Text editors>TinyMCE HTML editor>Edit equation'', this allows you to enable or disable the  TeX filter in the editor context and thereby display the Dragmath button. If you have a global custom TeX filter, then disable this setting.
 
=====Insert emoticon=====
Accessed from ''Administration>Site administration>Plugins>Text editors>TinyMCE HTML editor>Insert emoticon'', this allows you to enable or disable the emoticon filter in the editor context and thereby display the emoticon button.
 
===== Legacy spell checker=====
The legacy spell checker is visible in IE9 and lower only, but not in other browsers. If you want to disable it and and rely on browser spell checker functionality instead, you can do this by disabling the ''legacy spellchecker'' plugin by clicking its eye in ''Administration > Site administration > Plugins > Text editors > TinyMCE HTML editor > General settings''
 
To spell-check via your browser, type your word (which if incorrectly spelt will have red lines under it) and press right click + CTRL
{|
|[[File:Browserspellcheck.png|thumb|Right-click+CTRL for browser spellcheck]]
|}
 
'''NOTE:'''
While the default spell engine is Google spell which  can be changed in ''Administration>Site administration>Plugins>Text editors>TinyMCE HTML editor'', this is no longer supported by Google and will not work. (Note that it is only visible in IE9 and lower) It is due to  be removed. See MDL-38867. In browser spell check is recommended.
 
If PSpell is selected then aspell 0.50 or later must be installed on your server and the path to aspell set in Administration > Site administration > Server > System Paths.
 
 
You can select a different spell engine from ''Administration> Site administration > Plugins > Text editors > TinyMCE HTML editor>Check spelling'' 
 
 
{|
|[[File:Spellengine.png|thumb|Choosing a different spell engine]]
|}
According to: http://php.net/manual/en/book.pspell.php
 
"As of php 5.3. Pspell is no longer supported/bundled. Instead you can use the enchant which is bundled by default in 5.3."
 
If PSpell is selected then aspell 0.50 or later must be installed on your server and the path to aspell set in Administration > Site administration > Server > System Paths.
 
===Customising the editor toolbar===
 
An administrator can remove or add buttons to the TinyMCE editor toolbar by altering the Editor toolbar box in ''Administration>Site administration>Plugins>Text editors>TinyMCE HTML editor>General settings'' as demonstrated in the screencast [http://youtu.be/vTW1DImro9c Customise the text editor in 2.4]
 
{|
| [[File:editortoolbar.png|thumb|The Editor toolbar box]]
|[[File:horizontalrule.png|thumb|Example of  toolbar with added horizontal rule button]]
 
 
|}
 
====Available fonts list====
 
In addition to the default fonts, a site administrator can add extra fonts by typing their name and string in the box in ''Administration > Site administration > Plugins > Text editors > TinyMCE HTML editor>General settings'' as demonstrated in the screencast [http://youtu.be/udP7Bnur30Y How to add extra fonts].
 
{|
|[[File:comicsans.png|thumb|Example of custom font]]
|}
 
====Custom configuration====
 
A setting in  ''Administration>Site administration>Plugins>Text editors>TinyMCE HTML editor>General settings'' provides  a box in which an administrator can apply custom formats. See MDL-37186 for more details with examples,  and see also the [http://www.tinymce.com/wiki.php/Configuration:formats TinyMCE configuration page]
 
{|
|[[File:bottomtoolbar.png|thumb| Example 1:Toolbar at the bottom]]
|[[File:customstyles.png|thumb| Example 2: Custom styles]]
|}
 
*Example: Moving the toolbar to the bottom:
 
Add the following:
{"theme_advanced_toolbar_location" : "bottom"}
 
*Example: Adding your own custom styles.
(This might be useful for example if you want a "house style" for important notes, key points or similar)
In the editor toolbar, enter "styleselect" and then in the custom box add the following code, changing it to suit your purposes:
{"style_formats" : [
  {"title" : "Bold text", "inline" : "b"},
  {"title" : "Red text", "inline" : "span", "styles" : {"color" : "#ff0000"}},
  {"title" : "Red header", "block" : "h1", "styles" : {"color" : "#ff0000"}} ]}
 
The following will let you use bootstrap CSS classes if you use a bootstrap based theme:
 
    {"style_formats" : [
        {"title" : "Well", "block" : "div", "classes" : "well"},
        {"title" : "Label", "inline" : "span", "classes" : "label"},
        {"title" : "Label - success", "inline" : "span", "classes" : "label label-success"},
        {"title" : "Label - warning", "inline" : "span", "classes" : "label label-warning"},
        {"title" : "Label - important", "inline" : "span", "classes" : "label label-important"},
        {"title" : "Label - info", "inline" : "span", "classes" : "label label-info"},
        {"title" : "Label - inverse", "inline" : "span", "classes" : "label label-inverse"},
        {"title" : "Button", "inline" : "a", "classes" : "btn btn"},
        {"title" : "Button - primary", "inline" : "a", "classes" : "btn btn-primary"},
        {"title" : "Button - info", "inline" : "a", "classes" : "btn btn-info"},
        {"title" : "Button - success", "inline" : "a", "classes" : "btn btn-success"},
        {"title" : "Button - warning", "inline" : "a", "classes" : "btn btn-warning"},
        {"title" : "Button - danger", "inline" : "a", "classes" : "btn btn-danger"},
        {"title" : "Button - inverse", "inline" : "a", "classes" : "btn btn-inverse"}
    ]}
 
*Example: Enabling copy of rich content with styles from MS Word (tm) and paste into TineMCE without removing important styles:
 
{"paste_retain_style_properties" : "margin, padding, width, height, font-size,
  font-weight, font-family, color, text-align, ul, ol, li,
  text-decoration, border, background, float, display"}
 
==See also==


*[https://docs.moodle.org/dev/Atto https://docs.moodle.org/dev/Atto] about the new text editor for Moodle 2.7+
*[https://docs.moodle.org/dev/Editor_2.7 https://docs.moodle.org/dev/Editor_2.7] about the changes in the default Text editor for Moodle 2.7+


===Screencasts===
==Atto HTML editor==
[http://www.youtube.com/watch?v=1m2xkm2EyXA&feature=share&list=SPxcO_MFWQBDe8RRnGjoUDqbcm9PSlIoWn&index=4 TinyMCE text editor improvements.]
{{New features}}


*[http://youtu.be/bBZQYGcDaMg Moodle 2.0 HTML Editor - Row 1]  MoodleBites video on YouTube 
*[http://youtu.be/uS_M6-eHsxE Moodle 2.0 HTML Editor - Row 2]  MoodleBites video on YouTube
*[http://youtu.be/3rRztnWkhuY Moodle 2.0 HTML Editor - Row 3]  MoodleBites video on YouTube


===Other===
===Other===

Revision as of 12:15, 29 April 2014

The text editor (sometimes referred to as the 'HTML editor' has many icons to assist the user in entering content. Many of these icons and functions should be familiar to anyone who uses a word processor. Some examples of where you will see the text editor include: Editing Section headings, description of an activity, writing an answer to a quiz question or editing the content of many blocks.

The default text editor in Moodle is the Atto editor, a javascript editor built specifically for Moodle. There is also a version of the TinyMCE editor and a plain text editor.

Text editors can be enabled, disabled or a different one set to default from Administration>Site administration>Plugins>Text editors>Manage editors. The order of priority may also be specified here.

An individual user can select an editor in their profile from Administration > My Profile settings > Edit profile.


Atto HTML editor

New feature
in Moodle 2.9!


Other

Retrieved from "https://docs.moodle.org/29/en/index.php?title=Text_editor&oldid=112170"
Powered by MediaWiki