Extending Dreamweaver: Getting Started

Dreamweaver was designed to be highly extensible. After deciding that you’d like to add or streamline some functionality in Dreamweaver, how do you get started?
The extension may have already been written by someone else, so first, check the Adobe Exchange. Also, search the internet because there are many third party extensions that are not uploaded to the Adobe Exchange.
The easiest way to create your first extension is to open the History Panel (Window > History), select 1 or more steps, right-click and select “Save as Command…”. This creates a Command in the User Configuration folder Commands sub-folder which on WinXP is usually something like:
C:\Documents and Settings\[username]\Application Data\Adobe\Dreamweaver CS4\en_US\Configuration\Commands
Note that the “Application Data” folder is hidden by default, so you may need to enable displaying of hidden folders in the Folder Options of the File Explorer.
Next, look around in the Application Configuration folder for code samples. On WinXP, it’s usually here:
C:\Program Files\Adobe\Adobe Dreamweaver CS4\en_US\Configuration
Some tools provide an interface for users to extend it, but don’t actually use it themselves. Dreamweaver uses it’s own extensibility layer extensively (warning: pun attempt), so you’ll find an example of almost all thousand or so JS API calls.
DW extensibility UIs are written in HTML, CSS, and JavaScript, so you already know how to do it. They are rendered with our proprietary rendering engine, so not all HTML/CSS/DOM is supported, and the rendering maybe different from current browsers, so you have to play around with it a bit.
Some aspects of the extensibility UI rendering is controlled by the DOCTYPE. Our proprietary rendering engine (note to wikipedia: it’s not Opera) has evolved over the years, so be sure to target the desired DW version number in your DOCTYPE. So, to create a Property Inspector to target Dreamweaver Version 8 and above, use:
<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 8.0//pi">
Note that starting with version 10, the DOCTYPE was changed to use “Adobe”:
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//dialog">
There are online Extending and API docs here:
http://help.adobe.com/en_US/Dreamweaver/10.0_Extending/index.html
http://help.adobe.com/en_US/Dreamweaver/10.0_API_Ref/index.html
Finally, be sure to upload your extension to the Exchange if you’d like to share it with others.

9 Responses to Extending Dreamweaver: Getting Started

  1. Andres Cayon says:

    Hi Randy!
    Are you planning to update the SDK toolkit available at the Exchange? It could be a great help for starters.

  2. Randy Edmunds says:

    Andres,
    While the SDK has not been updated in several releases, Dreamweaver has done a very good job of maintaining backward compatibility, so (most?) everything in there is still valid. I am not aware of anyone actively updating the SDK, but please let us know what you would most like it to have in the next update.
    Thanks for the feedback,
    Randy

  3. Andres Cayon says:

    Agreed, but one problem though: It won’t install properly on DW CS4 :(
    And a feature request: Adding some samples of translators edml files would be welcome! :)
    Thanks Randy!

  4. Randy Edmunds says:

    Yes, those warnings are because some menu commands could not be installed in the desired locations as directed by the extension because some ids were moved or changed in menus.xml, so they were placed in the Commands folder instead. That’s kinda lame, but it should not affect any functionality.
    Regards,
    Randy

  5. Billy says:

    I have noticed some ‘for sale’ Dreamweaver extensions incorporate Flash, for example in the creating of drop down menus. Is that permissible?

  6. Randy Edmunds says:

    Billy,
    Yes, you can use Flash in the UI of your Extensions. Sorry, I forgot to mention that. Here’s some info in the DW Help:
    http://help.adobe.com/en_US/Dreamweaver/10.0_API_Ref/WS4FB61645-9C4E-4667-B6D4-0E5F553BEF4F.html

  7. David says:

    Can you post a link to the documentation for extending Dreamweaver CS5 please? I can’t find one in the CS5 docs, only Extending Dreamweaver CS4. Thanks!
    The CS5 Docs have not yet been posted. They should be available in next month.

  8. Randy Edmunds says:

    Sorry for the late response. The extensibility docs for CS5 have been posted here:

    http://help.adobe.com/en_US/dreamweaver/cs/extend/index.html
    http://help.adobe.com/en_US/dreamweaver/cs/apiref/index.html

    Randy

  9. Randy Edmunds says:

    I would also like to mention that there is a User Forum for discussing DW Extensibility here:

    http://forums.adobe.com/community/dreamweaver/dreamweaver_extensions

    Randy