Customizing the Web Author Toolbar

Note that the modifications described in this section are not supported by Microsoft Professional Support Services (PSS).

Another customization option for the Web Author is to insert custom commands into the Web Author toolbar. These commands allow for client-side manipulation of the code in the standard HTML placeholder control. Common examples are to insert commands so that users can insert or delete rows from a table or set the background color on a table cell.

In order to trigger custom client-side actions and manipulate content from the Web Author, you can add custom toolbars and buttons to the ActiveX toolbar. The Web Author toolbar docks to the browser window during authoring. You can modify this toolbar by including custom client-side VBScript in CMS templates.

Example: Altering the Web Author Toolbar

Add the starter file (ActiveXToolbarHooks.vbs) found in C:\Program Files\Microsoft Content Management Server\Server\IIS_CMS\WebAuthor\Client\PlaceholderControlSupport.

In order to see what the standard toolbar does with these calls, you can look in the toolbar code file: <installation drive>\Server\IIS_CMS\WebAuthor\Client\PlaceholderControlSupport \ActiveXEditing.vbs. This file shows you when these hooks are called and what you need to do to add buttons. Do not modify the ActiveXEditing file directly.

You will need to add a client-side reference to the ActiveXToolbar Hooks.vbs file in all authoring templates that require the custom functionality. The reference is only needed in authoring mode. For example, add the following to the template code (this code must be within the Web form):

 <asp:PlaceHolder  runat="server" EnableViewState="False" /> 

Add the following code to the Page_Load method in the code-behind. This addition requires a "using" reference to the Microsoft. ContentManagement.WebControls namespace.

 WebAuthorContext webContext = WebAuthorContext.Current; if ((webContext.Mode == WebAuthorContextMode.AuthoringNew) || (webContext.Mode == WebAuthorContextMode.AuthoringReedit)) {       HtmlGenericControl scriptControl = new HtmlGenericControl("script");       scriptControl.Attributes.Add("language", "vbscript");       scriptControl.Attributes.Add("type", "text/vbscript");       scriptControl.Attributes.Add("src", "../Script/ActiveXToolbarHooks.vbs");       phActiveXScript.Controls.Add(scriptControl); } 

You will need to do the same for any custom JavaScript files where you implement the behavior (i.e., CustomToolbar.js). You may need to change the path that references the VBScript. The path is set to "../Script" in the sample code.

Custom toolbar button images should be copied to <installation drive>\Server\IIS_CMS\WebAuthor\ Client\PlaceholderControlSupport\ToolbarImages.

Refer to the following section for examples on how to add and hook up actions to buttons.

Example: Adding Custom Editing Behavior to the Web Author

To demonstrate this concept, you will add a new button to the Web Author allowing users to add <acronym> tags to text. First, you need to add a button to the toolbar by inserting the following code into the OnToolbarInitialize subroutine in the ActiveXToolbarHooks.vbs file:

 Dim CustomToolbar Set CustomToolbar =       document.ToolbarInterface.Toolbars.CreateToolbar ("CustomToolbar") Call CustomToolbar.AddButton("AcronymButton", "", "acronym.gif", "Insert Acronym") 

This assumes there is a custom toolbar button named acronym.gif available. In the example, AcronymButton is the ID used to identify the button and "Insert Acronym" is the tooltip that will be shown when the user hovers over the button.

You can decide whether your button should be enabled by checking a standard button that has similar properties. For example, we can choose to allow acronyms if the Bold command is allowed by inserting the following code into OnToolbarStateInitialize:

 If (pState.Item("Bold").Allowed = True) Then       pState.Item("AcronymButton").Allowed = True Else       pState.Item("AcronymButton").Allowed = False End If 

You can choose to attach the enabling of the custom button to that of the Bold button because the placeholder must be set to allow TextMarkup. If this setting is not correct, CMS will strip out the <acronym> tag when the page is saved.

The following code should be used in OnToolbarUpdate to ensure that the button cannot be used in HTML source editing mode:

 If bEditingSource Then       pActiveHtmlEditor.ToolbarState.Item("AcronymButton").Enabled = False Else             pActiveHtmlEditor.ToolbarState.Item("AcronymButton"). Enabled = True End If 

Then, using the OnToolbarEvent subroutine, you can hook up the button to a client-side JavaScript function. If you wanted, you could just code the client-side manipulation in VBScript, but it is often easier to code in JavaScript.

 Select Case bstrId       Case "AcronymButton"       Call CreateAcronym(pActiveHtmlEditor.DOM) End Select 

In this case, the CreateAcronym function is defined in Custom Toolbar.js. This file is referenced from your template. You can model the code used to insert the acronym after the code used to create hyperlinks. Refer to the WBC_CreateLink function found in <installation drive>\Server\IIS_CMS\WebAuthor\Client\AuthFormClientIE.js.

The CreateAcronym function is passed a reference to the Document Object Model (DOM) for the placeholder. A list of the functionality available from the DOM is available from http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp. The function inserts the <acronym> tag into the HTML or changes the title if the <acronym> tag already exists.

The user input for the "title" attribute is received using a custom pop-up window that is opened as a modal dialog from the CreateAcronym function. It returns the title input by the user to the CreateAcronym function, using only client-side code. The supporting JavaScript file takes care of initializing the title if an existing acronym is being edited. It also handles passing the value back to the calling window when the user selects OK. The functionality of this pop-up is patterned after the hyperlink dialog found at <installation drive>\Server\IIS_CMS\ WebAuthor\Dialogs\HLink\hlink.aspx. Refer to this file for guidance on how to implement custom client-side pop-up windows.