Plug-In Authoring

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
      $(data.popup).children(":button")
      .unbind("click")
      .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
          editor.hidePopups();
          editor.focus();

      });

  }

})(jQuery);

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