CKEditor 3.x Tutorials

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.

(Creating a Simple CKEditor Plugin, Part 2 added)
(Introduction added)
Line 1: Line 1:
 
{{#CUSTOMTITLE:CKEditor 3.x Tutorials}}
 
{{#CUSTOMTITLE:CKEditor 3.x Tutorials}}
  
This section of the CKEditor 3.x documentation contains tutorials that present various aspects of CKEditor in a step-by-step manner, along with code samples, screenshots, and downloadable code.
+
This section of the CKEditor 3.x documentation contains tutorials that present various aspects of CKEditor in a step-by-step manner, along with code samples, screenshots, and downloadable code.  
  
 
* Plugins
 
* Plugins
** [[CKEditor_3.x/Tutorials/Timestamp Plugin|Creating a CKEditor Plugin in 20 Lines of Code]]
+
** [[CKEditor_3.x/Tutorials/Timestamp Plugin|Creating a CKEditor Plugin in 20 Lines of Code]] – this introductory article explains how to create your very first basic CKEditor plugin in just 20 lines of code. It shows things like:
** [[CKEditor_3.x/Tutorials/Abbr Plugin Part 1|Creating a Simple CKEditor Plugin, Part 1]]
+
*** Plugin file structure and naming conventions.
** [[CKEditor_3.x/Tutorials/Abbr Plugin Part 2|Creating a Simple CKEditor Plugin, Part 2]]
+
*** Adding a new CKEditor plugin.
 +
*** Creating an editor command.
 +
*** Creating a plugin toolbar button.
 +
** [[CKEditor_3.x/Tutorials/Abbr Plugin Part 1|Creating a Simple CKEditor Plugin, Part 1]] – this tutorial shows how to create a basic CKEditor plugin that contains a dialog window and is designed to insert abbreviation elements into the document. It shows things like:
 +
*** Creating a plugin dialog window.
 +
*** Building a dialog window structure, including tabs and UI elements.
 +
*** Defining plugin behavior based on user's actions.
 +
*** Creating new DOM elements and adding them to the document.
 +
** [[CKEditor_3.x/Tutorials/Abbr Plugin Part 2|Creating a Simple CKEditor Plugin, Part 2]] – this tutorial shows how to extend the existing Abbreviation plugin from [[CKEditor_3.x/Tutorials/Abbr Plugin Part 1|Part 1]] to add context menu support and possibility to edit previously added elements. It shows things like:
 +
*** Adding custom context menu items.
 +
*** Selecting CKEditor contents.
 +
*** Using the setup and commit functions to add and edit document elements.

Revision as of 17:39, 17 May 2011

This section of the CKEditor 3.x documentation contains tutorials that present various aspects of CKEditor in a step-by-step manner, along with code samples, screenshots, and downloadable code.

  • Plugins
    • Creating a CKEditor Plugin in 20 Lines of Code – this introductory article explains how to create your very first basic CKEditor plugin in just 20 lines of code. It shows things like:
      • Plugin file structure and naming conventions.
      • Adding a new CKEditor plugin.
      • Creating an editor command.
      • Creating a plugin toolbar button.
    • Creating a Simple CKEditor Plugin, Part 1 – this tutorial shows how to create a basic CKEditor plugin that contains a dialog window and is designed to insert abbreviation elements into the document. It shows things like:
      • Creating a plugin dialog window.
      • Building a dialog window structure, including tabs and UI elements.
      • Defining plugin behavior based on user's actions.
      • Creating new DOM elements and adding them to the document.
    • Creating a Simple CKEditor Plugin, Part 2 – this tutorial shows how to extend the existing Abbreviation plugin from Part 1 to add context menu support and possibility to edit previously added elements. It shows things like:
      • Adding custom context menu items.
      • Selecting CKEditor contents.
      • Using the setup and commit functions to add and edit document elements.