CLEditor allows you to extend its base features and functionality by providing properties and methods to add new toolbar buttons, replace existing toolbar buttons, create custom popups and respond to both button and popup click events. This added functionality can be bundled up into a single javascript plug-in file.

Plug-in writing basically consists of creating or redefining buttons and popups, handing click events and performing some action on the document.

Here's a simple hello world plug-in that adds a new button and displays a popup prompting for a name. When the submit button is clicked, some html is inserted into the document at the current caret position and the popup is dismissed.

(function($) {

  // Define the hello button
  $.cleditor.buttons.hello = {
      name: "hello",
      image: "hello.gif",
      title: "Hello World",
      command: "inserthtml",
      popupName: "hello",
      popupClass: "cleditorPrompt",
      popupContent: "Enter your name:<br><input type=text size=10><br><input type=button value=Submit>",
      buttonClick: helloClick

  // Add the button to the default controls before the bold button
  $.cleditor.defaultOptions.controls = $.cleditor.defaultOptions.controls
  .replace("bold", "hello bold");

  // Handle the hello button click event
  function helloClick(e, data) {

      // Wire up the submit button click event
      .bind("click", function(e) {

          // Get the editor
          var editor = data.editor;

          // Get the entered name
          var name = $(data.popup).find(":text").val();

          // Insert some html into the document
          var html = "Hello " + name;
          editor.execCommand(data.command, html, null, data.button);

          // Hide the popup and set focus back to the editor



The following demos are a great source for code samples and examples of how to use plug-ins.
Simple Demo Multiple Editor Demo Table Plug-in Demo Icon Plug-in Demo XHTML Plug-in Demo BBCode Plug-in Demo

For a complete discussion on the various CLEditor objects, properties, methods and events,
please visit the Getting Started page.


Help support CLEditor with your PayPal donation:


To request new features or just get some help with CLEditor, please visit our discussion group.

You can also visit our open source project hosted on Google Code to report bugs.