Adding a Tag to Dreamweaver’s Insert Panel

I usually use Dreamweaver to author blog posts and Adobe Developer Center articles, and since I’m usually writing about code, I frequently need the <code> tag. However, for some reason, the <code> tag isn’t included in Dreamweaver’s insert panel, and as far as I can tell, there’s no way to add it from inside Dreamweaver itself.

But there is a way to add it if you don’t mind working behind the scenes. The instructions below explain how to add the <code> tag to the "Text" menu of Dreamweaver’s Insert panel, but this process can obviously be adapted for any tag or menu you want.

  1. Create an 18×18 gif called Code.gif to use as the menu icon. Make sure to use a transparent background or you’ll end up with a box around it. (I made this icon, but I’m sure most of you can do better.)
  2. Place the icon in "/Applications/Adobe Dreamweaver CS5/Configuration/Objects/Text" (or whatever the corresponding directory is on your machine). If you don’t want your tag in the "Text" menu, place it in a different directory inside the "Objects" directory.
  3. Open the terminal and change into the "/Applications/Adobe Dreamweaver CS5/Configuration/Objects/Text" directory (the directory where you just put your icon file). Copy one of the htm files already there and rename it to Code.htm.
  4. Modify it accordingly. If you have any JavaScript or ActionScript experience, it should be obvious how to modify it to insert a <code> tag rather than what it was originally designed to insert. In this case, be sure to use dom.applyCharacterMarkup("code") rather than dom.setTextFormat("code").
  5. Change into the next highest directory ("/Applications/Adobe Dreamweaver CS5/Configuration/Objects") and modify the insertbar.xml file accordingly. Again, it should be obvious how to insert your new tag just by looking at the contents of this file. Be sure to set the MMString:label attribute to the actual name of the tag as you want it to appear in the insert panel (in this case, "Code").
  6. Restart Dreamweaver, then enjoy the convenience of having your tag readily available.

If you’re thinking that this seems like a lot of work to add such a common tag, I agree, so if you know of a better way of doing it, please post in the comments.

2 Responses to Adding a Tag to Dreamweaver’s Insert Panel

  1. Randy Edmunds says:

    Great post! I also use the tag a lot, but I guess I’m more of a keyboard person because this is how I insert then in DW:First, I select the text I want to wrap with the tag, press Ctrl+T (to invoke Quick Tag Editor), type “co” to select “code” from the tag list, then press Enter twice.Randy

  2. Christian Cantrell says:

    Thanks, Randy. That’s a great tip. I’m going to start using that one myself.Christian