Joomla! Documentation™

TinyMCE

TinyMCE is the default editor for Frontend and Backend users. TinyMCE is a 'WYSIWYG' (what you see is what you get) editor that allows users a familiar word-processing interface to use when editing Articles and other content.

TinyMCE can be configured with 3 different sets of toolbar buttons. This is set in the Editor - TinyMCE plugin.

Toolbar Set 2: Simple Preset

The toolbar provides one row of buttons as shown below. The set is default assigned to the Public usergroup.

• Buttons allow you to make text: bold, underlined, or strikethrough.
• Undo and Re-do.
• Unordered list, Ordered list.
• Paste as Text: Often when copying and pasting text from other sources, such as PDF files, Text documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the 'Paste as Text' will strip out all formatting from the text.

Toolbar Set 1: Medium Preset

The toolbar provides a 2-row toolbar as shown below. The set is default assigned to the Manager and Registered usergroup.

This option provides all of the same buttons as documented in the Set 2 Toolbar above. In addition, the following options are available.

Top Row

• CMS Content: The CMS Content dropdown list provides for access to link to an Article, Contact, Field, Media, Menu, Module and insert an Page Break or Read More.
• Buttons in the upper left allow you to make text: italic. Next to that are buttons for align left, right, center, and full.
• Paragraph: Select pre-defined formats for Paragraph, Address, Heading1, and so on.
• Outdent (move left) and Indent (indent right).
• 3 dots: Show second Toolbar row.

Second Row

• Insert/edit Link: To insert or edit a link, select the linked text and press this button. A popup dialog displays that lets you enter details about the link.
• Remove Link: To remove a link, highlight the linked text and press this button.
• Anchor: An anchor is a bookmark inside an article that lets you link directly to that point in the article. To insert an anchor, move the cursor to the desired location within the article and click this button. A window will display. Enter the name of the Anchor and press Insert. A small anchor icon will show in the location of the anchor. You can edit the name of the anchor by clicking on it and pressing this button. You can delete the anchor just by selecting it and pressing the Delete key.
• Source code: A popup displays showing the HTML source code, allowing you to edit the HTML source code.
• Insert a horizontal line: To insert a horizontal line, move the cursor to the desired location within the article and click this button.
• Table: Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.
• Subscript, Superscript, Special Character.
• Preview text in popup.

Toolbar Set 0: Advanced Preset

The set 0 toolbar provides the most extensive editing options, as shown below.

This option provides all of the same buttons as documented in the Set 1 Toolbar above. In addition, the following options are available.

Top Row

• Font Family. Select the desired font.
• Font Size. Select the desired font size.
• Find and Find/Replace.

Second Row

• Select Text Color or Background Color.
• Toggle Full Screen Mode.
• Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.
• Insert Emotions.
• Insert Embedded Media. To insert embedded media (such as Flash), place the cursor at the desired location and press this button. A popup dialog will display that allows you to enter the Type, File or URL, and other information about the media.
• Insert horizontal line.
• Direction Left to Right and Direction Right to Left. These buttons allow you to enter or change the text direction, for example for languages that read right to left.
• Cut, Copy, Paste, Paste as Plain Text, Paste from Word. Often when copying and pasting text from other sources, such as PDF files, Word documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the Paste as Plain Text will strip out all formatting from the text. Paste as Word tries to preserve some of the formatting while stripping out unnecessary formatting.

Third Row

• Show/Hide Visual Control Characters (like paragraph endings).
• Show/Hide Block Elements.
• Insert Non-Breaking Space Character.
• Block Quote.
• Insert Predefined Template Content.

Accessibility

TinyMCE is compatible with screen readers such as JAWS and NVDA. You can use it effectively even if you don't use the mouse. To use the editor's toolbar, use the following keyboard shortcuts:

• [ALT + F9] Move focus and jump to menu bar
• [ALT + F10] Move focus and jump to toolbar
• [ALT + F11] Move focus and jump to element path
• [ESC] Close menu/submenu/dialog (also gets you back to editor area)
• [Tab]/[Arrow] Navigate left/right through menu/toolbar

See for more information:

• TinyMCE - Accessibility
• A list of available keyboard shortcuts (pc, mac) within the editor body.

CodeMirror

The CodeMirror editor is designed to make it easy to enter HTML code in an article or description. CodeMirror supports syntax highlighting and auto-completion, as shown in this screenshot.

CodeMirror offers some of the same advantages of using No Editor, but makes it somewhat easier to work with raw HTML code.

No Editor

If 'No editor' is selected for a User, then a simple text editor displays. This allows you to enter in raw, unformatted HTML. You can use the toolbar 'Preview' button to preview how the HTML will display.

Note that the 'No Editor' option can be useful if you are entering in 'boilerplate' or custom HTML, for example to create a PayPal link. TinyMCE automatically re-formats and strips some HTML when a file is saved. This can cause complex HTML to not work correctly.

If this happens, you can temporarily change the editor to 'No Editor' and create the desired content. Note that if you wish to edit this content in the future, you should be careful to change your editor to 'No Editor'. Otherwise, if you open and save the content with TinyMCE, you may lose your custom HTML.