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);

The 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.

Donations

Help support the CLEditor project with your PayPal donation:

Support

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.

I see you're using ad-blocking software.
In order to keep CLEditor free and support future development efforts, this site is sponsored exclusively by advertisements.
Please consider a small PayPal donation or disabling your ad-blocker for this site.