Adding a Custom Toolbar Item to Dojo Rich Text Edit

As mentioned in a previous blog post, dojo's rich text editor includes a plugin mechanism to add custom toolbar items. In this post I will explore how I accomplished this, details of how to integrate into WPF can be found here.

My goal is to be able to click on a toolbar button and have a modal dialog box with a lightbox effect appear. The contents of the dialog is a custom search result where individual result items can be selected, causing the dialog to close and inserting a link to that item in the rich text edit.

Create a New Plugin

Since writing code from scratch is tedious (I am impatient) I always prefer to start with something that works and then modify it to meet my needs. In this case I've taken the plugin named factory\dojo\dijit\_editor\plugins\ToggleDir.js since it's nice and short, and re-purposed it to create a modal popup window when clicked. I'm going to copy it into a new file named SearchPopup.js.

dojo.provide("dijit._editor.plugins.SearchPopup");
dojo.require("dijit._editor._Plugin");
dojo.declare("dijit._editor.plugins.SearchPopup",
    dijit._editor._Plugin,
    {
        // summary:
        //        This plugin provides a popup window to search and select content
        //
        // description:
        //        The commands provided by this plugin are:

    _initButton: function(){
        // summary:
        // This is the button that will appear on the toolbar
        this.button = new dijit.form.Button({
            label: "Search and add content",
            showLabel: false,
            iconClass: this.iconClassPrefix + " " + this.iconClassPrefix + "CreateLink",
            tabIndex: "-1",
            onClick: dojo.hitch(this, function(){popupSearch()})
        });
        }
        
    }
);

// Register this plugin.
dojo.subscribe(dijit._scopeName + ".Editor.getPlugin",null,function(o){
    if(o.plugin){ return; }
    switch(o.args.name){
    case "searchPopup": 
        o.plugin = new dijit._editor.plugins.SearchPopup();
    }
});

This is probably the most basic plugin that can be created. All it does is invoke a javascript function named popupSearch() when the button is clicked:

onClick: dojo.hitch(this, function(){popupSearch()})

The code to pick an icon is a little tricky, it refers to factory\dojo\dijit\themes\tundra\images\editor.gif which is an image containing a long strip of icons like this:

and finally the iconClass can be tracked down in factory\dojo\dijit\themes\tundra\Editor.css:

Code:
iconClass: this.iconClassPrefix + " " + this.iconClassPrefix + "CreateLink",

Matching CSS:
.tundra .dijitEditorIconCreateLink { background-position: -90px; }

If I wanted to use my own icon I'd have to edit the icon strip and add a new image, but since I can't draw to save my life I decided to just reuse the one for creating a link. The rest of the code is just boilerplate, and we can add our newly minted plugin to the toolbar with some javascript:

dojo.addOnLoad(function(){
 dojo.require("dijit._editor.plugins.SearchPopup");
 var widget = dijit.byId(gcps.assessmentWidget);
 widget.addPlugin('searchPopup');
});

EDIT 2/14/2012: I found a pretty good developerworks article on this topic. Check it out.