CKEditor 3.x/Users Guide/Interface/Toolbar - Revision history

Anna: /* Using the Toolbar */ Article updated to CKEditor 3.6

2011-05-12T08:35:32Z

‎Using the Toolbar: Article updated to CKEditor 3.6

Anna: Typo corrected

2010-12-13T07:54:14Z

Typo corrected

Anna: Toolbar keyboard navigation + subtitles and TOC added

2010-12-09T10:05:13Z

Toolbar keyboard navigation + subtitles and TOC added

Anna: Links added, minor rewording

2010-12-09T09:53:09Z

Links added, minor rewording

Anna: Keyboard shortcuts added

2010-12-09T08:18:12Z

Keyboard shortcuts added

Anna: Tooltip example added

2010-12-07T14:21:00Z

Tooltip example added

Anna: Button tooltip added

2010-11-05T09:09:25Z

Button tooltip added

Anna: Punctuation corrected

2010-10-25T09:41:50Z

Punctuation corrected

Anna: Minor rewording

2010-10-21T13:55:10Z

Minor rewording

Anna: Article rewrite, alt attributes and new icon added.

2010-10-21T13:47:45Z

Article rewrite, alt attributes and new icon added.

@@ Line 17: / Line 17: @@
 In order to perform an operation assigned to a button, click the button once. In most cases it will either immediately perform some predefined action or open a dialog window with further configuration options for a feature.
-Remember that the toolbar can also be used with your keyboard. To enter the toolbar, use the ''Alt+F10'' keyboard shortcut. To move to the next button, use the ''Tab'' or ''Right Arrow'' key. To go back to the previous button, use the ''Shift+Tab'' combination or the ''Left Arrow'' key. To activate a selected toolbar button, press ''Enter'' or ''Space''.
+Remember that the toolbar can also be used with your keyboard. To enter the toolbar, use the ''Alt+F10'' keyboard shortcut. To move to the next or previous button group, use the ''Tab'' and ''Shift+Tab'' keys, respectively. Within a button group, use the ''Left Arrow'' and ''Right Arrow'' keys to move between buttons of this group. To activate a selected toolbar button, press ''Enter'' or ''Space''.
 Some of the buttons serve as placeholders giving you access to further options placed in a drop-down list. They are easily recognizable thanks to a small [[Image:CKEditor_menu_list_arrow.png|arrow]] icon on their right. Clicking the name or the arrow icon of such button expands the list and lets you choose one of its options via the left mouse button. To select a drop-down list option you can also use the ''Tab'' or the ''Down Arrow'' key and then accept your choice by pressing ''Enter'' or ''Space'' on your keyboard. To hide the list, use the ''Esc'' key or click anywhere in the browser window.

@@ Line 1: / Line 1: @@
 {{#CUSTOMTITLE:CKEditor Toolbar}}
 __TOC__
-== Toolbar Characterictics ==
+== Toolbar Characteristics ==
 The '''Toolbar''' is the section located at the top of the editor window. It contains menu buttons that give you access to various functions of CKEditor. All buttons are grouped according to their function and include both simple operations (like basic text [[CKEditor 3.x/Users Guide/Styling|styling]] or [[CKEditor 3.x/Users Guide/Layout|formatting]]) and more advanced features (like inserting media or forms via a [[CKEditor 3.x/Users Guide/Interface/Dialog Windows|dialog window]]).

@@ Line 1: / Line 1: @@
 {{#CUSTOMTITLE:CKEditor Toolbar}}
 The '''Toolbar''' is the section located at the top of the editor window. It contains menu buttons that give you access to various functions of CKEditor. All buttons are grouped according to their function and include both simple operations (like basic text [[CKEditor 3.x/Users Guide/Styling|styling]] or [[CKEditor 3.x/Users Guide/Layout|formatting]]) and more advanced features (like inserting media or forms via a [[CKEditor 3.x/Users Guide/Interface/Dialog Windows|dialog window]]).
@@ Line 12: / Line 14: @@
 In order to perform an operation assigned to a button, click the button once. In most cases it will either immediately perform some predefined action or open a dialog window with further configuration options for a feature.
 Some of the buttons serve as placeholders giving you access to further options placed in a drop-down list. They are easily recognizable thanks to a small [[Image:CKEditor_menu_list_arrow.png|arrow]] icon on their right. Clicking the name or the arrow icon of such button expands the list and lets you choose one of its options via the left mouse button. To select a drop-down list option you can also use the ''Tab'' or the ''Down Arrow'' key and then accept your choice by pressing ''Enter'' or ''Space'' on your keyboard. To hide the list, use the ''Esc'' key or click anywhere in the browser window.
 To save on screen estate, you can collapse the toolbar by pressing the [[Image:CKEditor_toolbar_rollup.png|Collapse Toolbar]] button or using the ''Alt+-'' (''minus'') keyboard shortcut. In order to return to the full toolbar view, press the same button or keyboard shortcut again.

@@ Line 1: / Line 1: @@
 {{#CUSTOMTITLE:CKEditor Toolbar}}
-The '''Toolbar''' is the section located at the top of the editor window. It contains menu buttons that give you access to various functions of CKEditor. All buttons are grouped according to their function and include both simple operations (like basic text formatting) and more advanced features (like inserting media or forms).
+The '''Toolbar''' is the section located at the top of the editor window. It contains menu buttons that give you access to various functions of CKEditor. All buttons are grouped according to their function and include both simple operations (like basic text [[CKEditor 3.x/Users Guide/Styling|styling]] or [[CKEditor 3.x/Users Guide/Layout|formatting]]) and more advanced features (like inserting media or forms via a [[CKEditor 3.x/Users Guide/Interface/Dialog Windows|dialog window]]).
 This is what the editor toolbar looks like:
@@ Line 12: / Line 12: @@
-In order to perform an operation assigned to a button, click the button once.
+In order to perform an operation assigned to a button, click the button once. In most cases it will either immediately perform some predefined action or open a dialog window with further configuration options for a feature.
 Some of the buttons serve as placeholders giving you access to further options placed in a drop-down list. They are easily recognizable thanks to a small [[Image:CKEditor_menu_list_arrow.png|arrow]] icon on their right. Clicking the name or the arrow icon of such button expands the list and lets you choose one of its options via the left mouse button. To select a drop-down list option you can also use the ''Tab'' or the ''Down Arrow'' key and then accept your choice by pressing ''Enter'' or ''Space'' on your keyboard. To hide the list, use the ''Esc'' key or click anywhere in the browser window.
 To save on screen estate, you can collapse the toolbar by pressing the [[Image:CKEditor_toolbar_rollup.png|Collapse Toolbar]] button or using the ''Alt+-'' (''minus'') keyboard shortcut. In order to return to the full toolbar view, press the same button or keyboard shortcut again.

@@ Line 14: / Line 14: @@
 In order to perform an operation assigned to a button, click the button once.
-Some of the buttons serve as placeholders giving you access to further options placed in a drop-down list. They are easily recognizable thanks to a small [[Image:CKEditor_menu_list_arrow.png|arrow]] icon on their right. Clicking the name or the arrow icon of such button expands the list and lets you choose one of its options via the left mouse button or the ''Tab'' key. To hide the list, use the ''Esc'' key or click anywhere in the browser window.
+Some of the buttons serve as placeholders giving you access to further options placed in a drop-down list. They are easily recognizable thanks to a small [[Image:CKEditor_menu_list_arrow.png|arrow]] icon on their right. Clicking the name or the arrow icon of such button expands the list and lets you choose one of its options via the left mouse button. To select a drop-down list option you can also use the ''Tab'' or the ''Down Arrow'' key and then accept your choice by pressing ''Enter'' or ''Space'' on your keyboard. To hide the list, use the ''Esc'' key or click anywhere in the browser window.
-To save on screen estate, the toolbar may be collapsed by pressing the [[Image:CKEditor_toolbar_rollup.png|Collapse Toolbar]] button. In order to return to the full toolbar view, press the button again.
+To save on screen estate, you can collapse the toolbar by pressing the [[Image:CKEditor_toolbar_rollup.png|Collapse Toolbar]] button or using the ''Alt+-'' (''minus'') keyboard shortcut. In order to return to the full toolbar view, press the same button or keyboard shortcut again.

@@ Line 10: / Line 10: @@
 In order to perform an operation assigned to a button, click the button once.
-Some of the buttons serve as placeholders giving you access to further options placed in a drop-down list. They are easily recognizable thanks to a small [[Image:CKEditor_menu_list_arrow.png|alt=arrow]] icon on their right. Clicking the name or the arrow icon of such button expands the list and lets you choose one of its options via the left mouse button or the ''Tab'' key. To hide the list use the ''Esc'' key or click anywhere in the browser window.
+Some of the buttons serve as placeholders giving you access to further options placed in a drop-down list. They are easily recognizable thanks to a small [[Image:CKEditor_menu_list_arrow.png|alt=arrow]] icon on their right. Clicking the name or the arrow icon of such button expands the list and lets you choose one of its options via the left mouse button or the ''Tab'' key. To hide the list, use the ''Esc'' key or click anywhere in the browser window.
 To save on screen estate, the toolbar may be collapsed by pressing the [[Image:CKEditor_toolbar_rollup.png|alt=collapse]] button. In order to return to the full toolbar view, press the button again.

@@ Line 1: / Line 1: @@
-The '''Toolbar''' is the section located at the top of the editor window that contains the menu buttons. The buttons give you access to various functions of CKEditor. They are grouped according to their function and include both simple operations (like basic text formatting) and more advanced features (like inserting media or forms).
+The '''Toolbar''' is the section located at the top of the editor window that contains menu buttons. The buttons give you access to various functions of CKEditor. They are grouped according to their function and include both simple operations (like basic text formatting) and more advanced features (like inserting media or forms).
-This is what the editor's toolbar looks like:
+This is what the editor toolbar looks like:
 [[Image:CKEditor_toolbar.png|frame|center|The CKEditor Toolbar|alt=CKEditor Toolbar]]
-The CKEditor's toolbar buttons are illustrated with meaningful icons. If, however, you are not sure what functions they perform, hover the mouse cursor over the buttons to see a tooltip with the name of the function.
+The CKEditor toolbar buttons are illustrated with meaningful icons. If, however, you are not sure what functions they perform, hover the mouse cursor over the buttons to see a tooltip with the name of the function.
 In order to perform an operation assigned to a button, click the button once.
-Some of the buttons serve as placeholders giving you access to further options placed in a drop-down list. They are easily recognizable thanks to a small [[Image:CKEditor_menu_list_arrow.png|alt=arrow]] icon on their right. Clicking the name or the arrow icon of such button expands the list and lets you choose one of its options via a left mouse button or a ''Tab'' key. To hide the list use the ''Esc'' key or click anywhere in the browser window.
+Some of the buttons serve as placeholders giving you access to further options placed in a drop-down list. They are easily recognizable thanks to a small [[Image:CKEditor_menu_list_arrow.png|alt=arrow]] icon on their right. Clicking the name or the arrow icon of such button expands the list and lets you choose one of its options via the left mouse button or the ''Tab'' key. To hide the list use the ''Esc'' key or click anywhere in the browser window.
-To save the screen estate, the toolbar may be collapsed by pressing the [[Image:CKEditor_toolbar_rollup.png|alt=collapse]] button. In order to return to the full toolbar view, press the button again.
+To save on screen estate, the toolbar may be collapsed by pressing the [[Image:CKEditor_toolbar_rollup.png|alt=collapse]] button. In order to return to the full toolbar view, press the button again.