Introduction to CKEditor 3.X User's Guide

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.

m (Minor rewording)
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
The '''User's Guide''' is a documentation regarding all the features of CKEditor. It explains how the program works and gives an opportunity to learn about all its functions.<br>
+
{{#CUSTOMTITLE:Introduction to CKEditor 3.X User's Guide}}
 +
__TOC__
 +
The '''User's Guide''' contains information about [http://ckeditor.com CKEditor] intended for end-users. It describes all features and options available in the application and shows how to use it to change the style and layout of the document as well as add media objects like images or Flash objects.
  
== Navigation<br> ==
+
== Navigation ==
 +
The User's Guide is divided into several sections accessible through the [[CKEditor 3.x/Users Guide|Table of Contents]].
  
The guide is divided into several sections, mainly accessible through the [[CKEditor_3.x/Users Guide|Table of Contents]].<br>
+
Each section outlines a problem area and gives its detailed description. To return to the main User's Guide page or to the pages from the same section, use the breadcrumb links located at the top of the page over the page title.
  
Each section represents a group of functions or tasks and their detailed explanation. By using the links situated at the top of the page User can easily return back to the main page or to the page.
+
[[Image:CKEditor_UG_breadcrumbs.png|frame|center|CKEditor User's Guide breadcrumbs navigation]]
  
Example:
 
  
[[Image:CKEditor_goback_example.png]]
+
Some User's Guide pages, like this one, may be divided into sections. If this is the case, a '''Contents''' sidebar will appear in the upper right-hand corner of the page. Clicking one of the section title links from the sidebar will lead you to a selected article section.
  
Some of the pages are divided into subsections regarding a function or a group of functions. All available subsections are listed at the top of the pages.<br>
+
== Screenshots and Walkthroughs ==
 +
Most problem areas explained in the User's Guide include screenshots that illustrate in detail how to perform an action described in the guide. The screenshots along with walkthrough descriptions will guide you through all steps necessary to achieve the desired result.
  
Example:
+
[[Image: CKEditor_bulletedlist_properties.png|frame|center|An example of a CKEditor screenshot]]
  
[[Image:CKEditor_content_example.png]]<br>
 
  
Clicking one of the items moves the page to the related subsection.<br>
+
== Typographic Conventions ==
 +
Menu and option names, program commands and buttons as well as other captions from CKEditor that are visible on the screen are written in '''bold'''.
 +
* Example:
 +
*: The '''Upload''' tab of the '''Flash Properties''' dialog window allows you to send your own Flash objects to the server.
  
== Examples ==
+
Keyboard shortcuts are written in ''italics''.
 +
* Example:
 +
*: ''Page Up'' and ''Page Down'' let you jump up and down the text.
  
Every function explained in the guide usually includes a screenshot and an example. The examples are always placed in a framed box with the "Example:" word before it.
+
URLs, file names, command line commands, and program code fragments are written in <code>fixed-width font</code>.
 +
* Example:
 +
*: <code><nowiki>http://example.com/about.html</nowiki></code>
  
Example:
+
== Important Notes ==
 +
Additional important information is inserted into the User's Guide text as a note displayed with a gray background and a blue exclamation mark icon.
  
[[Image:Example window.png|Image:Example_window.png]]
+
<note>Important notes describe problems that are essential to the understanding of the product.<br />These excerpts should not be skipped.</note>
  
== Important Notice<br> ==
 
  
Because CKEditor is extremelly configurable and its functions are customized by the developer or system administrator, not all of the functions explained in the User's Guide may be available at your installation. Other functions may not be found in the guide due to your system customizations.
+
== CKEditor Version ==
 +
Latest CKEditor is always greatest CKEditor. We are continuously improving our product, adding new features and fixing bugs that inevitably appear from time to time. This documentation covers CKEditor 3.X, in its latest version. If you find that some features do not work as described, please check what version of CKEditor you are using.
  
Have notice that the editor interface can be different in its colors, icons and formats as well. This guide is based on the default editor interface.'''<br>'''
+
To check the CKEditor version, press the [[File:CKEditor_about.png|About CKEditor]] toolbar button. The '''About CKEditor''' dialog window that will open displays version information along with revision number, product website, licensing link and copyright notice.
 +
 
 +
[[Image: CKEditor_about_popup.png|frame|center|About CKEditor dialog window]]
 +
 
 +
 
 +
== CKEditor Configuration ==
 +
Because CKEditor is highly configurable, its features can be customized by a developer or a system administrator. This is the reason why not all of the functions described in the User's Guide may be available in your CKEditor instance.
 +
 
 +
Also note that CKEditor interface can be customized and displayed with a different skin &mdash; colors, icons, or size. This guide is based on the default editor interface that can also be seen on the [http://ckeditor.com/demo demo] site.

Latest revision as of 09:43, 13 December 2010

The User's Guide contains information about CKEditor intended for end-users. It describes all features and options available in the application and shows how to use it to change the style and layout of the document as well as add media objects like images or Flash objects.

Navigation

The User's Guide is divided into several sections accessible through the Table of Contents.

Each section outlines a problem area and gives its detailed description. To return to the main User's Guide page or to the pages from the same section, use the breadcrumb links located at the top of the page over the page title.

CKEditor User's Guide breadcrumbs navigation


Some User's Guide pages, like this one, may be divided into sections. If this is the case, a Contents sidebar will appear in the upper right-hand corner of the page. Clicking one of the section title links from the sidebar will lead you to a selected article section.

Screenshots and Walkthroughs

Most problem areas explained in the User's Guide include screenshots that illustrate in detail how to perform an action described in the guide. The screenshots along with walkthrough descriptions will guide you through all steps necessary to achieve the desired result.

An example of a CKEditor screenshot


Typographic Conventions

Menu and option names, program commands and buttons as well as other captions from CKEditor that are visible on the screen are written in bold.

  • Example:
    The Upload tab of the Flash Properties dialog window allows you to send your own Flash objects to the server.

Keyboard shortcuts are written in italics.

  • Example:
    Page Up and Page Down let you jump up and down the text.

URLs, file names, command line commands, and program code fragments are written in fixed-width font.

  • Example:
    http://example.com/about.html

Important Notes

Additional important information is inserted into the User's Guide text as a note displayed with a gray background and a blue exclamation mark icon.

important note
Important notes describe problems that are essential to the understanding of the product.
These excerpts should not be skipped.


CKEditor Version

Latest CKEditor is always greatest CKEditor. We are continuously improving our product, adding new features and fixing bugs that inevitably appear from time to time. This documentation covers CKEditor 3.X, in its latest version. If you find that some features do not work as described, please check what version of CKEditor you are using.

To check the CKEditor version, press the About CKEditor toolbar button. The About CKEditor dialog window that will open displays version information along with revision number, product website, licensing link and copyright notice.

About CKEditor dialog window


CKEditor Configuration

Because CKEditor is highly configurable, its features can be customized by a developer or a system administrator. This is the reason why not all of the functions described in the User's Guide may be available in your CKEditor instance.

Also note that CKEditor interface can be customized and displayed with a different skin — colors, icons, or size. This guide is based on the default editor interface that can also be seen on the demo site.

This page was last edited on 13 December 2010, at 09:43.