make marketing affordable now!

Printing Hosting Email Marketing

CKEditor Interface

CKEditor provides a clean and simple user interface. If you are familiar with desktop word processors like Microsoft Word or Writer, you will quickly see that using an online text editor is just as easy and intuitive.

Interface Structure

The figure below shows main building blocks of CKEditor:

The interface of CKEditor

The editor consists of five main parts:

  • Toolbar (1) – the section at the top of the editor containing grouped menu buttons that give you access to various functions of CKEditor.
  • Editing Area (2) – the space below the toolbar where you type your text and add media.
  • Context Menu (3) – a small pop-up menu with shortcuts to most common operations available for the object, visible after a right mouse button click or pressing the Application/Menu key on your keyboard.
  • Elements Path (4) – the section at the bottom of the editor displaying information about the HTML elements of the document (advanced feature).
  • Dialog Windows – small pop-up windows that appear when you use some of the editor's functions and are opened by clicking the toolbar buttons.

Resizing and Maximizing CKEditor

CKEditor is usually embedded in a website, as one of its parts. If, however, you would like to resize its interface, you can easily do it by clicking and dragging the resizing grip in the bottom right-hand corner of CKEditor interface.

To make writing more convenient, you can also maximize the CKEditor interface in the browser window. When you press the Resizing and Maximising CKEditor toolbar button, the CKEditor interface will fill the browser window and stretch to its borders. If you want to return to the default view and minimize CKEditor, press the same button again.

CKEditor Toolbar

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.

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.


Editing Area

Editing Area Characteristics

The Editing Area is the empty space below the editor toolbar where you type your text. All formatting applied using the toolbar buttons as well as all inserted media appear immediately in this area.

This is what the editing area looks like after you type some text:

The CKEditor editing area

If the document contents span beyond the limits of the editing area, a standard scrollbar will appear. To view the text that exceeds the size of the editing area you can either scroll it using the scrollbar or maximize the editor in the browser window using the Maximize button.


CKEditor is a WYSIWYG editor, which means that the text edited in it looks as similar as possible to the results end users will see after the document gets published. When you format your text using the editor features, the formatting can be immediately seen in the editing area.

Formatting seen immediately in the editing area

Navigating the Editing Area

To easily move around the text you can use the keyboard.

Page Up and Page Down let you jump up and down the text. The Home and End keys can be used to go to the beginning and end of line, respectively, or combined with the Ctrl key — to the beginning and end of the document. You can also move inside the text using the Arrow keys.


Context Menu

The Context Menu is a pop-up menu that appears whenever you click inside the CKEditor editing area with the right mouse button, use the Menu/Application key on your keyboard, or the Shift+F10 keyboard shortcut. It serves as a shortcut for most common operations available for a given type of object.

The image below presents the context menu for a link embedded in the document:

CKEditor's context menu for links

The menu is context-sensitive which means that the options displayed in it depend on the object that you click.

If, for example, you press the right mouse button while inside a table, you will see some table-specific options available in its context menu.

CKEditor's context menu for tables

Note that for some more complex objects, like a table, the context menu might include sub-menus with further options. To open the sub-menu, go to the menu option containing a small right-pointing arrow (arrow) and either click it with your mouse or use the Right Arrow key on your keyboard. To return to the parent menu, use your mouse or the Left Arrow key.

To perform an operation listed in the context menu, click it with the left mouse button. You can also move up and down the context menu with the Up and Down Arrow keys or the Tab and Shift+Tab combinations. Once an option is highlighted, you can activate it with the Space or Enter button. If an option is grayed out, like the Cut and Copy operations in the first screenshot, it is unavailable unless some pre-conditions are met (e.g. an element is selected).

important note
In some environments and browsers clicking the right mouse button results in the browser context menu covering CKEditor context menu. If this is the case, press the Esc key once to close the browser context menu and reveal the CKEditor menu hidden below.


Elements Path

The Elements Path is the section at the bottom of the editor displaying information about the HTML elements of the document for the position of the cursor. It is an advanced feature aimed at users who want to have more control over the source code of their document.

The elements path always shows a hierarchy of HTML elements for the currently selected element of the document.

This is what the elements path looks like:

The elements path of CKEditor

The mouse cursor is now located inside the word "Second", so the elements path shows the following hierarchy of HTML elements: body (main document element), ol (ordered list), li (list item) and strong (bold font).

Note that most of the same information can also be deduced from the state of the main CKEditor toolbar since the formatting options that were applied to the active element are highlighted.

CKEditor elements path can also be used to select elements. To achieve this, click an element's name on the elements path with your mouse. You can also use the Alt+F11 keyboard shortcut to enter the elements path, and then navigate between the elements with the Tab and Shift+Tab (or Left and Right Arrow) keys. To select an element with your keyboard, use the Enter or Space keys.


Dialog Windows

Dialog windows are small pop-up windows that are displayed when you use some CKEditor functions like Find and Replace or Insert Image. These windows display various configuration options related to a particular feature and often give you access to more advanced settings.

Dialog Window Structure

As an example, the Anchor dialog window is presented below:

Anchor dialog window in CKEditor

When a dialog window is open, the main editor window including the toolbar is blocked.

All dialog windows contain the OK button that lets you confirm the settings and return to the main editor window as well as the Cancel button that closes the pop-up window without introducing any changes to the document.

Another way to close the dialog window and return to the editing area is to use the X button located in the top right-hand-side corner of the window or to press the Esc key on your keyboard.

Depending on the options available for a particular feature the dialog window may contain different elements. Some windows may also contain tabs with additional configuration options. To navigate between the tabs simply click their labels. You can also move between tabs with your keyboard. To enter the tabs list, press the Alt+F10 shortcut while in the dialog window. To move to the next tab, use the Tab or Right Arrow key. To go back to the previous tab, press Shift+Tab or the Left Arrow key.

Reopening a Dialog Window

Some dialog windows can be used to insert an element, such as an image or a table, into the document. After an element is added to the document, in most cases it can be edited at any time by double-clicking or selecting it and clicking the appropriate toolbar button again. The dialog window will re-open and you will be able to introduce changes to the element's configuration options.

If you attempt to close the dialog window without saving the changes, you will be prompted to do so:

An alert window prompting to save the changes made to an element

You can either proceed without saving your changes by choosing OK or close the alert window with the Cancel button and save the changes.

Resizing a Dialog Window

CKEditor dialog windows all open with some default size. If, however, you would like to resize a dialog window, you can easily do it by clicking and dragging the resizing grip in the bottom right-hand corner of a dialog window.

The image below presents a default size of the Advanced tab in the Link dialog window.

Advanced tab of the Link dialog window in its default size

Since the text entered into some text fields (particularly the Style field) might be longer than their default size, you may wish to resize the dialog window. Use the Drag to resize feature to change the width and height of a dialog window as needed.

Advanced tab of the Link dialog window after resizing





Return to email user guide contents