Partager via

Create a custom toolbar to insert HTML tags

  • Article

In my opinion, one of the coolest features in FrontPage is the VBA object model.  I think it's cool because with it I can create macros and add-ins to extend FrontPage. If FrontPage doesn't have a feature that does what I want it to do, I can create a macro or add-in that does it, or someone else has.

For example, I think IntelliSense in FrontPage is awesomely cool.  When I hand code, I can easily type the first few characters of the element name and then press tab, and I get the opening and closing tags for the element.  But when I'm coding after the fact -- the text is already written and I just need to insert the appropriate tags -- it's less cool.  I end up having to move the closing tag to where I want it.

I end up finding all kinds of tricks to fool FrontPage, like putting in the closing tag first so that when I go to enter the opening tag, I don't get the closing tag also, but it's kind of hokey.  Therefore, in today's tip, I wanted to give you a macro that inserts a tag around the selected text.  With it, you can create a host of macros, a custom toolbar and buttons, and make hand coding much easier.

Before I get started, I want to tell you that this isn't possible in versions earlier than FrontPage 2003.  You see, it wasn't possible in those earlier versions to modify the HTML while a page was displayed in HTML view.  You would end up getting a "Permission Denied" error.  In FrontPage 2003, the product team made some changes to make this possible.  While it's not problem free, which I'll explain later, it does get FrontPage closer to allowing us to create tools that directly manipulate the HTML code.

SurroundText macro

Okay, here's the code:

 Private Sub SurroundText(TagName As String)
    Dim objRange As IHTMLTxtRange
    Dim strText As String
    
    On Error GoTo ErrorHandler
    
    ActiveDocument.parseCodeChanges
    Set objRange = ActiveDocument.Selection.createRange
    strText = objRange.htmlText
    strText = "<" & TagName & ">" & strText & "</" & TagName & ">""
    
    objRange.pasteHTML strText
    ActiveDocument.parseCodeChanges
    
ExitSub:
    Exit Sub
    
ErrorHandler:
    MsgBox "You need to save your document before you can insert the tag."
    GoTo ExitSub
    
End Sub

Explanation of the Code:

The SurroundText macro is relatively simple.  The parseCodeChanges method will generally work in most cases to prepare the code to allow FrontPage to insert code programmatically.  However, it doesn't work in all cases.  Therefore, the error handler allows the code to catch cases where the parseCodeChanges method doesn't work.  (I'd like to give you specifics on this, but I only know it doesn't work problem free.)  The best solution is to save the page (although I've been told that switching to Design view and then back to Code view also works, but this doesn't work for me all the time), so the message that is displayed to the user tells them to save the page first.

Note   You could potentially modify this code to check to see if the page had been saved first, and then run the code only if the page was ready.

In the SurroundText macro, you'll notice that I use the createRange method of the IHTMLSelection object (Selection property) to create an IHTMLTxtRange object.  This allows me to grab the text contained in the range.  I used the htmlText property, which is a read-only property that contains both the text and the HTML contained in the selection.  Otherwise, if I had used the text property, I would effectively undo any work that a user may have previously done to their page.

The SurroundText macro takes a single parameter, a string that represents the name of the element.  After concatenating the existing selection with the opening and closing tags for the named element, the code uses the pasteHTML method to replace the selected text.

Using the SurroundText macro

This macro all by itself doesn't do a whole lot.  You need another subroutine to call it.  So, let's say you want to surround text with the opening and closing tags for a P element.  Here's a macro that will do that:

 Public Sub PTag()
    SurroundText "p"
End Sub

This simple macro just calls the SurroundText macro and passes in a string that contains a "p".  You can create any number of macros that call the SurroundText macro, but who wants to switch to the Visual Basic Editor every time they want to run the appropriate macro?  I don't.  So I created a toolbar that contains buttons so that all I have to do is select the text and click the button for the tag I want to insert.  Here's how you can create your own toolbar to insert tags around selected text.

Creating a Toolbar

Creating a toolbar in FrontPage is no different than creating one in say Word or Excel.  Here are the steps:

  1. Right click on the toolbar area (anywhere will do), and click Customize.
  2. In the Customize dialog box, click on the Toolbars tab.
  3. Click New.
  4. Type the name of the new toolbar.  For my toolbar, I just called it "Tags", but you can name yours whatever you want.
  5. Click Ok.  You will now see a small toolbar with no buttons.

Now that you have a new toolbar, you need to do a couple things: (1) add some buttons, and (2) make sure you have macros to attach to the buttons.  Let's do the macros first.

  1. Start the Visual Basic Editor (VBE) (press Alt-F11).
  2. Copy the SurroundText macro and paste it into the Module1 module in the VBE.  (If you don't have a Module1, you may need to add it by clicking the Insert menu, and then Module.)
  3. Copy the PTag macro and create several more like it for other tags for which you may want to create buttons on your toolbar.

Now that you have the macros, switch back to FrontPage, add the buttons to the toolbar, and attach the macros to the buttons.  Here's how:

  1. Right click on the toolbar area, and click Customize.
  2. In the Commands tab, scroll down in the Categories list and select Macros.
  3. In the Commands list, you will see two items: one called "Custom Menu Item" and one called "Custom Button".  Drag the Custom Button item onto your toolbar.  Your toolbar will now look like the one in the following image.
  4. Right click on the smiley face and change the Name property to <P>, and then click Text Only (always) .
  5. Right click on the <P> button and click Assign Macro.
  6. You will see a list of all the public macros that are in your Microsoft_FrontPage project.  Click "PTag" from the list of macros.
  7. Click Ok.
  8. Repeat steps 2 through 7 for as many buttons as you want to add, changing the Name property and the macro appropriately.
  9. Click Close to close the Customize dialog box.

After you do all the steps, you should have a toolbar that has buttons for one or more tags.  You can use it in either Design view or Code view.  Here's a picture of my toolbar.  I put them in alphabetical order so that as I add more, I can easily find them.

Have fun creating your own toolbars.  With FrontPage VBA you can do all sorts of very cool things.

Comments

  • Anonymous
    July 22, 2006
    The comment has been removed
  • Anonymous
    August 07, 2006
    The comment has been removed
  • Anonymous
    August 07, 2006
    The comment has been removed