Chunk

TinyMCE: Difference between revisions

From Joomla! Documentation

← Older edit
No edit summary
m Undo revision 874953 by Franz.wohlkoenig (talk)
 
(19 intermediate revisions by 9 users not shown)
Line 1: Line 1:
==TinyMCE editor==
<noinclude><languages /></noinclude>
 
<translate>
<!--T:1-->
The default editor for both front-end and back-end users in Joomla! is the TinyMCE editor.
The default editor for both front-end and back-end users in Joomla! is the TinyMCE editor.


<!--T:2-->
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. The 3-row toolbar below provides many standard editing commands:
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. The 3-row toolbar below provides many standard editing commands:
[[Image:article_tinymce_buttons.png|center]]
</translate>
*'''Top Row.'''  
<section begin="toolbar" />
**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.
[[Image:article_tinymce_buttons-<translate><!--T:3-->
**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.
en</translate>.png|center]]
**Format. Select pre-defined formats for Paragraph, Address, Heading1, and so on.
<section end="toolbar" />
**Font Family. Select the desired font.
<translate>
*'''Second Row.'''  
 
**Unordered List, Ordered list, Outdent (move left) and Indent (indent right).  
<!--T:4-->
**Undo (Ctrl+Z) and Re-do (Ctrl+Y).
*'''Top Row - Menu''' -  You will find here Menus offering various features and often complementary to those in the buttons below.
</translate>
<translate>
<!--T:8-->
**'''Edit''': Undo, Redo, Cut, Copy, Paste,
**'''Insert''': Picture, Link, Line, Special character,
**'''View''': with Visual aids,
**'''Format''': Bold, Italic, ... and all the different Formats available,
**'''Table''': with an easy way to specify rows and columns,
**'''Tools''': Edit Source Code. A popup displays, showing the HTML source code, allowing you to edit the HTML source code.
</translate>
<translate>
<!--T:5-->
*'''Second Row'''
**Buttons on the left allow you to make text bold, italic, underlined, or strikethrough.
**Next to that are buttons for align left, center, right and full.
**Paragraph. Select pre-defined formats for Paragraph, Address, Heading 1, and so on.
**List where you can choose between Bullet list or Numbered list.
</translate>
<translate>
<!--T:7-->
*'''Third Row'''
**Decrease and Increase indent.
**Undo and Redo.
**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.
**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.
**Remove link. To remove a link, highlight the linked text and press this button.
**Insert/Edit Image. To insert and image, place the cursor in the desired location and press this button. A popup dialog displays that lets you enter in the Image URL and other information about how the image will display.
**Insert/Edit Image. To insert an image, place the cursor in the desired location and press this button. A popup dialog displays that lets you enter in the Image URL and other information about how the image will display.
**Cleanup Messy Code. This button allows you to clean up HTML code, perhaps from HTML text that you copied in from another source.
**Source code. A popup displays showing the HTML source code, allowing you to edit the HTML source code.
**Edit HTML Source. A popup displays showing the HTML source code, allowing you to edit the HTML source code.
**Horizontal line. To insert a line.
**Find and Find/Replace.
**Table, to insert a new table, 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 Date, Time, or Emotions.
**Subscript, Superscript, Insert Custom Character.
**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.
</translate>
**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.
<translate>
**Insert New Layer, Move Forward, Move Backware, Toggle Absolute Position. For working with layered items.
===Accessibility=== <!--T:9-->
**Select Text Color.
</translate>
*'''Third Row.'''
<translate><!--T:10--> 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:</translate>
**Insert Horizontal Ruler.
 
**Remove Formatting.
* <translate><!--T:11--> [ALT + F9] Move focus and jump to menu bar</translate>
**Toggle Guidelines/Invisible elements.
* <translate><!--T:12--> [ALT + F10] Move focus and jump to toolbar</translate>
**Subscript, Superscript, Insert Custom Character, Horizontal Rule.
* <translate><!--T:13--> [ALT + F11] Move focus and jump to element path</translate>
**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.
* <translate><!--T:14--> [ESC] Close menu/submenu/dialog (also gets you back to editor area)</translate>
**Toggle Full Screen Mode.
* <translate><!--T:15--> [Tab]/[Arrow] Navigate left/right through menu/toolbar</translate>
**Edit CSS Style. A popup dialog box displays that allows you to enter CSS style information for the selected text.
<translate><!--T:16--> See for more information: [https://www.tinymce.com/docs/advanced/accessibility/ TinyMCE - Accessibility]</translate>

Latest revision as of 09:30, 26 January 2022

The default editor for both front-end and back-end users in Joomla! is the TinyMCE editor.

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. The 3-row toolbar below provides many standard editing commands:


  • Top Row - Menu - You will find here Menus offering various features and often complementary to those in the buttons below.
    • Edit: Undo, Redo, Cut, Copy, Paste,
    • Insert: Picture, Link, Line, Special character,
    • View: with Visual aids,
    • Format: Bold, Italic, ... and all the different Formats available,
    • Table: with an easy way to specify rows and columns,
    • Tools: Edit Source Code. A popup displays, showing the HTML source code, allowing you to edit the HTML source code.
  • Second Row
    • Buttons on the left allow you to make text bold, italic, underlined, or strikethrough.
    • Next to that are buttons for align left, center, right and full.
    • Paragraph. Select pre-defined formats for Paragraph, Address, Heading 1, and so on.
    • List where you can choose between Bullet list or Numbered list.
  • Third Row
    • Decrease and Increase indent.
    • Undo and Redo.
    • 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.
    • Insert/Edit Image. To insert an image, place the cursor in the desired location and press this button. A popup dialog displays that lets you enter in the Image URL and other information about how the image will display.
    • Source code. A popup displays showing the HTML source code, allowing you to edit the HTML source code.
    • Horizontal line. To insert a line.
    • Table, to insert a new table, 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.

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

Retrieved from "https://docs.sandbox.joomla.org/index.php?title=Chunk:TinyMCE&oldid=874959"