CKEditor Toolbar

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

(→‎Using the Toolbar: Article updated to CKEditor 3.6)
 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
The '''Toolbar''' is the area in CKEditor where you can activate most of the editor features. Each button in the toolbar access a different function. There are simple functions for basic text formatting and more advanced features like creation of links and tables.
+
{{#CUSTOMTITLE:CKEditor Toolbar}}
 +
__TOC__
 +
== 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]]).
  
−
[[Image:Toolbar.png|frame|center|The FCKeditor Toolbar]]
+
This is what the editor toolbar looks like:
  
−
To use the '''buttons''' in the toolbar you must move your mouse pointer over the button. The button will highlight and a message with name of the button will appear. Click on the button to execute its function. With more experience you will have full control over all CKEditor features and you will not have to read the discription of the buttons. You will just use them intuitively.
+
[[Image:CKEditor_toolbar.png|frame|center|The CKEditor toolbar]]
  
−
Besides the toolbars buttons there are also toolbar '''combos''' (drop down boxes). The combos are the white areas with a little arrow on its side. They can be easily accessed by clicking on the white area or the little arrow. Once clicked the menu will expand so you can choose from one of its available options. To execute one of them, simply click on it.
 
  
−
User may also collapse toolbar by pressing [[Image:CKEditor_rollup.png]]. After pressing this button once more then toolbar will be expanded.
+
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.
 +
 
 +
[[Image:CKEditor_toolbar_tooltip.png|frame|center|The CKEditor toolbar tooltip]]
 +
 
 +
 
 +
== Using the Toolbar ==
 +
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 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''.
 +
 
 +
<note>The accessibility shortcuts for toolbar navigation were modified in [http://ckeditor.com/blog/CKEditor_3.6_released CKEditor 3.6], when the concept of a '''toolbar button group''' was initially introduced. On entering the toolbar you can now use the ''Tab'' and ''Shift+Tab'' shortcuts to navigate between button groups and the ''Arrow'' keys to navigate between the buttons ''within a group''. In CKEditor 3.5.x and before both ''Tab'' and ''Arrow'' keys were used to navigate between the toolbar buttons.</note>
 +
 
 +
 
 +
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.
 +
 
 +
== Collapsing and Restoring the Toolbar ==
 +
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.

Latest revision as of 09:35, 12 May 2011

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 styling or formatting) and more advanced features (like inserting media or forms via a dialog window).

This is what the editor toolbar looks like:

The CKEditor toolbar


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.

The CKEditor toolbar tooltip


Using the Toolbar

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 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.

important note
The accessibility shortcuts for toolbar navigation were modified in CKEditor 3.6, when the concept of a toolbar button group was initially introduced. On entering the toolbar you can now use the Tab and Shift+Tab shortcuts to navigate between button groups and the Arrow keys to navigate between the buttons within a group. In CKEditor 3.5.x and before both Tab and Arrow keys were used to navigate between the toolbar buttons.


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 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.

Collapsing and Restoring the Toolbar

To save on screen estate, you can collapse the toolbar by pressing the 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.

Retrieved from "https://docs-old.ckeditor.com/index.php?title=CKEditor_3.x/Users_Guide/Interface/Toolbar&oldid=6272"
This page was last edited on 12 May 2011, at 09:35.