Creating Custom Buttons in ActivEdit 2.5

Many developers have asked me how to create a toolbar button in ActivEdit and bind it to a function. This tutorial will step you through the process using the example of creating a superscript and subscript button. the instructions in the tutorial are specific to the ColdFusion version of ActivEdit 2.5, but the structure of ActivEdit for ASP, JSP and PHP is very similar.

Step 1: Create an image

Start by creating an image for your button. The image should be 23 pixels high and 22 pixels wide. My superscript and subscript buttons for this example are displayed below. You can right-click on them and save them to your local drive.

Step 2: Add your button to the Stockbuttons section of activedit.cfm

Open activedit.cfm in a text editor and add the following assignments to the stockbuttons structure found at line 45.

The attributes for each stockbuttom are "[Command ID], [Button Name], [Tool Tip], [Image Location]"

When the user clicks a button the Command ID is selected from a list of Command ID assignments in dhtml.js which is used in the switch statement at line 262 of editjs.cfm. The tool tip attribute is displayed when a user mouses over a button and the image location attribute is used to load the image for your toolbar button when ActivEdit is loaded in the browser.

Save your changes to activedit.cfm in your application directory or in the Custom Tags directory. If you save to the Custom Tags directory, you will need to restart ColdFusion for the changes to take effect. ColdFusion caches custom tags.

Step 3: Add your Command IDs to dhtml.js

Open dhtml.js from the inc directory in a text editor. Add the following two lines in the custom section. Command IDs consist of a string and a unique integer. 6000 through 6008 are used in ActivEdit, so I chose 6009 and 6010.

DECMD_SUPERSCRIPT = 6009;
DECMD_SUBSCRIPT = 6010;

Save your changes to dhtml.js in the inc directory.

Step 4: Bind your button to a function

Open editjs.cfm and add the following case statements to the switch statement at line 262.

case DECMD_SUPERSCRIPT:
             sel = DHTMLSafe.DOM.selection.createRange();
             sel.pasteHTML("<sup>" + sel.htmlText + "</sup>");
             doFocus=false;
             break;
case DECMD_SUBSCRIPT:
             sel = DHTMLSafe.DOM.selection.createRange();
             sel.pasteHTML("<sub>" + sel.htmlText + "</sub>");
             doFocus=false;
             break;

In each case statement, I've assigned a text range to the variable named sel and used the DHTML method pasteHTML(). This inserts the needed HTML tags before and after the selected text and HTML. htmlText is one of the properties of the selection object. You could also use the text property, but that would effectively erase any other HTML tags that were present in the selection.

You should notice from other case statements here that you can call a function from your case. This function does not need to be in editjs.cfm. It could be placed in the head of your form page since those functions will also be available when ActivEdit is loaded in the browser.

Save your changes to editjs.cfm in the inc directory.

Step 4: Add the button name to the toolbar attribute in your form page

Edit the toolbar attribute in your HTML form to include the new buttons as in the example below.

  <cf_activedit
   name="content"
   width="95%"
   height="400"
   tabview="0"
   inc="/inc/"
   imageurl="/images/"
   baseurl="http://www.mysite.com"
   imagepath="c:\inetpub\wwwroot\web\images\"
  toolbar="cut,copy,paste,|,redo,undo,|,font,bold,italic,underline,
superscript,subscript,|,outdent,indent,|,justifyleft,justifycenter,
justifyright,bullets,|,table,image,hyperlink,|,find,help,spellcheck,
specialchars,||,quickformat,quickfontsize,quickfont">
   #content#
  </cf_activedit>

Congratulations! You've created a pair of custom buttons! Try adding the save button to the toolbar next. This is handy when ActivEdit is the only field in a form. It eliminates the need for a submit button. The image and all of the code still exists in ActivEdit 2.5, but hasn't been supported since version 1.2, so you might need to make some slight modifications to the function call. All you really need to do in version 2.5 is call ae_onSubmit() and form.submit() in that order.