Chunk30:TinyMCE

TinyMCE is the default editor for both 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

• Set 2 is assigned to 'Public'.
• Set 1 is assigned to the 'Manager' and 'Registered'.
• Set 0 is the most extended toolbar and is by default assigned to the 'Administrator', 'Editor' and 'Super Users'.

Toolbars

Set Two

The set provides one row of buttons as shown below.

• Buttons allow you to make text bold, italic, underlined, or strikethrough.
• Undo (Ctrl+Z) and Re-do (Ctrl+Y).
• Unordered list, Ordered list.
• 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.
• Insert 'Field', 'Image', 'Read More'. Learn more about Editor Buttons.

Set One

The set provides a 3-row (depending your screen) toolbar as shown below:

This is the default setting for Manager and Registered. The 3-row toolbar provides many standard editing commands, as follows:

First Row

• Buttons in the upper left allow you to make text bold, italic, underlined, or strikethrough. Next to that are buttons for align left, right, center, and full.
• Format. Select pre-defined formats for Paragraph, Address, Heading1, and so on.
• Unordered List, Ordered list, Outdent (move left) and Indent (indent right).
• Undo (Ctrl+Z) and Re-do (Ctrl+Y).

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.
• Unlink. To remove a link, highlight the linked text and press this button.
• Insert/Edit 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.
• Edit HTML Source. A popup displays showing the HTML source code, allowing you to edit the HTML source code.
• Insert Horizontal Ruler.
• 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, Insert Custom Character.
• Paste as Plain Text. 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.
• Preview text in popup
• Insert Module, Menu, Contact, Field. In a popup you can choose the item you want to insert.

Third Row

• Insert 'Article', 'Image', 'Page Break', 'Read More'. Learn more about Editor Buttons.

Set Zero

---

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 (Advanced) Toolbar above. In addition, the following options are available:

First Row

• Styles. Caption and System Pagebreak styles can be set. Highlight the desired text and select the style. This will allow this text to be formatted based on CSS rules.
• 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.
• 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. 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.

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.

This is set as an option in Plugins for Editor - TinyMCE.

Editor Buttons

8 buttons are located at the bottom row of the editor toolbar and one below the content, as shown below:

Module: This button opens a modal window that allows you to easily create a link to any module on the current site. The link is created using the module's title as the link text.

To create a link to the desired module:

• Place the cursor at the point in the article where you want the linked module title to be inserted.
• Click on the Module button to open the modal window.
• Click on the title to select the desired module in the modal window. You can use the filters and search to help find the desired module.
• A link with the module's title will be inserted at the current cursor location.
• If needed, you can edit the link text.

Menu: This button opens a modal window that allows you to easily create a link to any menu on the current site. The link is created using the Menu's title as the link text.

To create a link to the desired menu:

• Place the cursor at the point in the article where you want the linked menu title to be inserted.
• Click on the Menu button to open the modal window.
• Click on the title to select the desired menu in the modal window. You can use the filters and search to help find the desired menu.
• A link with the menu's title will be inserted at the current cursor location.
• If needed, you can edit the link text.

Contact: This button opens a modal window that allows you to easily create a link to any contact on the current site. The link is created using the Contacts title as the link text. The modal window is the same as for selecting a contact for a Single Contact Menu Item.

To create a link to the desired contact:

• Place the cursor at the point in the article where you want the linked contact title to be inserted.
• Click on the Contact button to open the modal window.
• Click on the title to select the desired contact in the modal window. You can use the filters and search to help find the desired contact.
• A link with the contacts title will be inserted at the current cursor location.
• If needed, you can edit the link text.

Fields: This button opens a modal window that allows you to easily create a link to any field on the current site. The link is created using the fields title as the link text. Note: The button is shown if at least one field is created.

To create a link to the desired field:

• Place the cursor at the point in the article where you want the linked field title to be inserted.
• Click on the Field button to open the modal window.
• Click on the title to select the desired field in the modal window. You can use the filters and search to help find the desired field.
• A link with the fields title will be inserted at the current cursor location.
• If needed, you can edit the link text.

Article: This button opens a modal window that allows you to easily create a link to any article on the current site. The link is created using the article's title as the link text. The modal window is the same as for selecting an article for a Single Article Menu Item.

To create a link to the desired article:

• Place the cursor at the point in the article where you want the linked article title to be inserted.
• Click on the Article button to open the modal window.
• Click on the title to select the desired article in the modal window. You can use the filters and search to help find the desired article.
• A link with the article's title will be inserted at the current cursor location.
• If needed, you can edit the link text.

Image. This button provides an easy way to insert an image into an Article. Images may be inserted from the 'images' folder and may also be uploaded. When you click the Image button, a window pops up, as shown below:

• Folder. The current directory on the host server. This is the 'images' directory under your Joomla! home directory. Use the drop-down list box to select a subdirectory.
• Up. Navigate to the parent directory. Note that the top directory for this function is 'images'. You can not navigate to a higher directory.
• Insert. Insert the selected image. The insert point will be the current cursor position. You will see the image display inside the edit window.
• Cancel. Cancel the operation and close the popup window. You can cancel also in clicking the X at right top corner.
• Thumbnail Browse Area. Click on an image thumbnail to select the image. Click on a folder icon to navigate to that subdirectory.
• Image URL. Click on one of the image thumbnails and the URL for the image will be entered for you.
• Image Description. Enter a description for the image.
• Caption. If entered, this will displayed as a caption below the image.
• Image Float. This will apply the classes 'pull-left', 'pull-center' or 'pull-right' to the '<figure>' or '<img>' element.
• Image Title. Enter a Title for this image. This displays when a User hovers the mouse on the image.
• Caption Class. This will apply the entered class to the '<figcaption>' element. For example: 'text-left', 'text-center'.
• Upload file. Click this button to browse to an image file to upload from your local computer. A file dialog will open allowing you to select a file.
• Start Upload. Once you have selected a file, press this button to upload the file to your Joomla! 'images' folder. The thumbnail for the new image will now show in the thumbnail area.

Pagebreak. This button allows you to insert a pagebreak inside an Article. A pagebreak allows for page navigation when the article is displayed on a layout. This is useful for long articles. When this button is pressed, a popup window is displayed as shown below:

• Page Title. Enter the title to display for the new page (for example, 'Page 2').
• Table of Contents Alias. Optional field to display in the table of contents for this page. In a multi-page article, Joomla! displays a 'table of contents' for the page that allows the user to select any page. If this field is blank, the Page Title will be used. If you want a different title in the table of contents, enter it here.
• Insert Page Break. Click this button to insert the pagebreak with the entered fields. The Pagebreak will display as a gray dashed line across the Article. Note that a pagebreak cannot be edited. If you need to change a field in the pagebreak, click on the Article just past the pagebreak, press Backspace until the pagebreak is deleted, then insert a new pagebreak with the desired information.

---

• Read More. This button inserts a 'Read more...' break in the Article. This shows as a red dotted line across the Article. If an Article has a 'Read more...' break, only the text before the break, called the Intro Text, will initially display, along with a 'Read more...' link.
  If the User clicks this link, either the entire Article or just the part after the 'Read more...' link is displayed. This depends on the setting of the 'Intro Text' parameters for the Article and in the Global Configuration. The 'Read more...' break allows you to save space on pages by just showing the Intro Text.
  Note: The 'Read more...' break only shows in the Frontend, and Category Blog layouts. If you want to insert breaks for an Article shown in an Article Layout, use the Page Break button.

• Toggle editor. If you are using the TinyMCE editor, a Toggle editor button will show just below the edit window. This button allows you to toggle between the TinyMCE editor and No Editor.

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

For more information, see: TinyMCE - Accessibility