CKEditor Interface

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.

(Open Office -> OpenOffice.org)
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
CKEditor provides clear and simple user’s interface. These Users who have ever worked on common desktop text editors like MS Word or Open Office will recognize that CKEditor’s interface is not much different.  
+
{{#CUSTOMTITLE:CKEditor Interface}}
 +
__TOC__
 +
CKEditor provides a clean and simple user interface. If you are familiar with desktop word processors like Microsoft Word or OpenOffice.org Writer, you will quickly see that using an online text editor is just as easy and intuitive.
  
[[Image: CKEditor_interface.png]]
+
== Interface Structure ==
 +
The figure below shows main building blocks of CKEditor:
  
It contains four primary elements:
+
[[Image: CKEditor_interface.png|frame|center|The interface of CKEditor]]
  
* [[CKEditor_3.x/Users Guide/Interface/Toolbar|Toolbar]] <sup>(1)</sup> - the section at the top of the editor, which contains many different buttons, used to activate the program’s functions.<br>
+
 
* [[CKEditor_3.x/Users Guide/Interface/Editing Area|Editing Area]] <sup>(2)</sup> - the area below the toolbar where user types the text in.<br>
+
The editor consists of five main parts:
* [[CKEditor_3.x/Users Guide/Interface/Context Menu|Context Menu]]<sup>(3)</sup> - a menu with functions which appears after clicking the right button of the mouse inside the editing area. <br>
+
* [[CKEditor_3.x/Users Guide/Interface/Toolbar|Toolbar]] <sup>(1)</sup> &ndash; the section at the top of the editor containing grouped menu buttons that give you access to various functions of CKEditor.
* [[CKEditor_3.x/Users Guide/Interface/Dialogs|Dialogs]] - small windows that appear when some of the functions are activated.<br>
+
* [[CKEditor_3.x/Users Guide/Interface/Editing Area|Editing Area]] <sup>(2)</sup> &ndash; the space below the toolbar where you type your text and add media.
 +
* [[CKEditor_3.x/Users Guide/Interface/Context Menu|Context Menu]] <sup>(3)</sup> &ndash; 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.
 +
* [[CKEditor_3.x/Users Guide/Interface/Elements Path|Elements Path]] <sup>(4)</sup> &ndash; the section at the bottom of the editor displaying information about the HTML elements of the document (advanced feature).
 +
* [[CKEditor_3.x/Users Guide/Interface/Dialog Windows|Dialog Windows]] &ndash; 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 [[File:CKEditor_resizer.png|Drag to resize]] 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 [[File:CKEditor_maximize.png|Maximize]] 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.

Latest revision as of 16:55, 23 August 2011

CKEditor provides a clean and simple user interface. If you are familiar with desktop word processors like Microsoft Word or OpenOffice.org 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 Drag to resize 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 Maximize 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.

This page was last edited on 23 August 2011, at 16:55.