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 added)
(Minor rewording)
 
(3 intermediate revisions by the same user not shown)
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.
 +
*** 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 explains 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 explains 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.
 +
** [[CKEditor_3.x/Tutorials/SimpleLink Plugin Part 1|Creating Plugin Dialog Windows]] – this tutorial explains how to build a plugin dialog window that contains different types of UI elements. It shows things like:
 +
*** Creating a plugin dialog window.
 +
*** Using various types of elements to build a dialog window UI.
 +
*** Setting default values for dialog window fields.

Latest revision as of 14:14, 20 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 explains 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 explains 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.
    • Creating Plugin Dialog Windows – this tutorial explains how to build a plugin dialog window that contains different types of UI elements. It shows things like:
      • Creating a plugin dialog window.
      • Using various types of elements to build a dialog window UI.
      • Setting default values for dialog window fields.
Retrieved from "https://docs-old.ckeditor.com/index.php?title=CKEditor_3.x/Tutorials&oldid=6305"
This page was last edited on 20 May 2011, at 14:14.