CKSource

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.
  • Creating Plugin Dialog Windows – this tutorial shows 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.