Plugin 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 plugin file.

Plugin 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 plugin 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.

Hello World Plugin

(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 more samples, check out the source for the table and icon plugins. They are both very small and should be just as easy to follow as this sample.

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