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.

  • 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.
This page was last modified on 20 May 2011, at 14:14.