Trimming Trailing Whitespace in Adobe DreamWeaver
Bronze Option, Search and Replace
My co-worker Brian Hall and I have long wanted to have a “delete trailing whitespace” feature for Dreamweaver. I’ve Googled, used the Adobe forums, looked in the Adobe Dreamweaver Marketplace, and nothing. We thought we had the answer in using regular expression search and replace, but my experiments with that were failures. Until today! Although it seems that the following search:
\s+$
to be replace with nothing would work, Dreamweaver (on Windows, at least), treats $ as end of file, not end of line. No good. We got closer with looking for carriage returns, but still didn’t have it. The breakthrough came today when Brian had the “aha” moment with capturing. Here’s the regex you want to use for your find:
[ \t]+([\r\n]+)
and what you want to replace that with is:
$1
Make sure that you have the checkbox for “Use regular expression” turned ON. Just to provide explanation, what we’re doing is looking for one or more spaces or tabs (in any order), following by one or more newlines or carriage returns (in any order). We use parentheses to capture the string of newlines / carriage returns, and then put that captured string (the $1) back.
Et voila, you retain the newlines (whether UNIX style or DOS style) that previously existed, don’t delete wanted blank lines in your code, but do delete all spaces and tabs at the end of lines.
Here’s a screenshot to help (it’s linked to larger version, follow link to embiggen):
Silver Option, Dreamweaver Command
But wait, there’s more. Brian also discovered the mechanism to add commands to Dreamweaver (those things that appear in the “Commands” menu). Take the following HTML and put it in your Commands directory with the file name “Remove Trailing Whitespace.html” (remove quotes, leave spaces):
<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog">
<html>
<head>
<title>Remove Trailing Whitespace</title>
<script type="text/javascript">
<!--
function canAcceptCommand() {
// Only enable this command if a document is active
var theDOM = dw.getDocumentDOM();
if (theDOM) return true;
else return false;
}
function runCommand() {
// Get the DOM again
var theDOM = dw.getDocumentDOM();
// Get the outerHTML of the HTML tag (the
// entire contents of the document)
var theDocEl = theDOM.documentElement;
var theWholeDoc = theDocEl.outerHTML;
// Get tabs and spaces preceding newlines and carriage returns
// Use submatch for the newlines and carriage returns, and put those back into document
var fixedString = theWholeDoc.replace(/[ \t]+([\r\n]+)/g, "$1");
theDocEl.outerHTML = fixedString;
}
// -->
</script>
</head>
<body onLoad="runCommand()"></body>
</html>
In my installation of Dreamweaver 5.5 on Windows, that’s:
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5.5\configuration\Commands
If you find the top level of your Adobe installation, look for the Dreamweaver directory, then configuration, then Commands (which might be commands). Create the file as “Replace Trailing Whitespace.htm” (including spaces in the file name). If you have Dreamweaver running, close it and restart. Your Commands menu should now contain a new entry of “Remove Trailing Whitespace”. If you have no open files, the option will be grayed out. Open any file. The menu option should now be enabled. Add some trailing whitespace such as spaces or tabs. Verify you have them in your file by using View -> Code View Options -> Hidden Characters. Go to Commands -> Remove Trailing Whitespace. Your file should show it is edited, and the trailing whitespace should be removed.
Gold Option, Dreamweaver Extension
But wait, there’s even more!
We investigated the possibility of packaging this as a bona-fide Dreamweaver extension. To do so, you need an MXI file that describes the properties of your extension. The best resource we could find is an Adobe PDF describing the format. Using that, plus information from Dreamweaver Fever on creating Dreamweaver extensions, we were able to create this XML. Create a new directory, named anything you want. This will be used to hold the HTML, the MXI, and store the rsulting MXP file. Save the following XML as RemoveTrailingWhitespace.mxi:
<macromedia-extension id=""
name="Remove Trailing Whitespace"
version="1"
type="object">
<!-- List the required/compatible products -->
<products>
<product name="Dreamweaver"
version="4" primary="true" />
</products>
<!-- Describe the author -->
<author name="Brian Hall and Tony Miller" />
<!-- Describe the extension -->
<description>
<![CDATA[Takes the entire current document and removes trailing spaces and tabs, preserving new lines and carriage returns.]]>
</description>
<ui-access>
<![CDATA[Click on Remove Trailing Whitespace from Commands menu.]]>
</ui-access>
<files>
<file name="RemoveTrailingWhitespace.htm"
destination="$dreamweaver/configuration/Commands" />
</files>
<!-- Describe the changes to the configuration -->
<configuration-changes>
<menu-insert insertAfter="DWMenu_Commands_SortTable" skipSeparator="true">
<menuitem id="com_carolinamantis_Menu_Commands_Remove_Trailing_Whitespace" name="_Remove Trailing Whitespace" dynamic="true" file="Commands/RemoveTrailingWhitespace.htm" enabled="canAcceptCommand()">
</menu-insert>
</configuration-changes>
</macromedia-extension>
You will also need the HTML/JavaScript that defines the command. Save the following HTML as RemoveTrailingSpace.htm:
<!-- MENU-LOCATION=NONE -->
<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog">
<html>
<head>
<title>Remove Trailing Whitespace</title>
<script type="text/javascript">
<!--
function canAcceptCommand() {
// Only enable this command if a document is active
var theDOM = dw.getDocumentDOM();
if (theDOM) {
return true;
} else {
return false;
}
}
function runCommand() {
// Get the DOM again
var theDOM = dw.getDocumentDOM();
// Get the outerHTML of the HTML tag (the
// entire contents of the document)
var theDocEl = theDOM.documentElement;
var theWholeDoc = theDocEl.outerHTML;
// Get tabs and spaces preceding newlines and carriage returns
// Use submatch for the newlines and carriage returns, and put those back into document
var fixedString = theWholeDoc.replace(/[ \t]+([\r\n]+)/g, "$1");
theDocEl.outerHTML = fixedString;
}
// -->
</script>
</head>
<body onLoad="runCommand()"></body>
</html>
You’ll note that this is exactly the same HTML as the Silver option, just using a file name without space (personal preference) and with an explicit comment that Dreamweaver uses to not automatically create a menu option. We want to suppress the automatic menu because we’re explicitly defining the menu information in our MXI file.
Start your Adobe Extension manager. Choose File -> Package Extension (which seems to now be File -> Package MXP Extension in 5.5). Go to the directory with your RemoveTrailingWhitespace.mxi file. Choose it and click “Open”. You will then be prompted to save your Extension Package as. Call it RemoveTrailingWhitespace.mxp (you don’t have to call it the same thing as the MXI or HTML, but we’re doing so to be consistent). Once it’s successfully created, use File -> Install Extension. Choose your RemoveTrailingWhitespace.mxp. Accept the boilerplate disclaimer, and what it be included in your Dreamweaver extensions list. If you have DW open, close it and restart. You should have a grayed out menu option as described in the for the Silver Option. Open a file, add whitespace at the end of some lines, choose Commands -> Remove Trailing Whitespace, and your document should show that it’s modified and the trailing whitespace should be gone.
If you don’t want to roll your own, then keep reading.
Files and References
- ZIP file containing HTML, MXI, MXP
- RemoveTrailingWhitespace.zip
- MXI Reference from Adobe
- http://download.macromedia.com/pub/exchange/mxi_file_format.pdf
- Dreamweaver Fever Extension Information
- http://dreamweaverfever.com/extensions/
- Macromedia Dreamweaver Support Center – Extending Dreamweaver
- http://www.adobe.com/support/dreamweaver/extend/creating_simple_cmmd_ext/index.html
- Extending Dreamweaver CS5 and CS5.5
- http://help.adobe.com/en_US/dreamweaver/cs/extend/dreamweaver_cs5_extending.pdf
- Extending Dreamweaver – Types of Extensions
- http://help.adobe.com/en_US/Dreamweaver/10.0_Extending/WS5b3ccc516d4fbf351e63e3d117f508c8de-8000.html
Thanks for the DW extension. Works like a charm. No more bogus SVN conflicts (I hope)!
Hope it works for you! Please come back and let me know if you encounter any problems with it.
Thanks for documenting your efforts and making your extension public. This has been driving me nuts and it is very helpful to have a menu command to do this!
A couple of comments:
First, a minor typo: the filename for the html needs to be RemoveTrailingWhitespace.htm rather than RemoveTrailingSpace.htm. Not a big deal if you’re paying attention, but it did get me when I copy/pasted.
Second, CS6 changed from “Package MXP Extension” to “Package ZXP Extension” and, of course the filename extension changes to ZXP as well. CS6 also implements some kind of signing functionality, so when you install the extension, it pops up complaining that the extension is not signed. I ignored the warning and it works fine.
Thanks for the updates, I’ll get those fixed in my blog and files! Also, at the time I posted, I didn’t have CS6. I do now, so I’ll try to get a CS6 version. Maybe I can find the documentation on how to do the signing, too, so that it won’t complain.
Thanks for the information here. I opted for ‘Silver’ and it worked fine as written. Cheer!
This is awesome! Would it be possible to also include a keyboard shortcut? This might work for converting tabs to spaces (or the other way around) since Dreamweaver seems to forget the Code Format settings once in a while and there is no easy way, that I know of, to make it behave. Selecting the whole document and doing right-click > Selection > Convert Tabs to Spaces does this already, but there doesn’t seem to be a way to assign a shortcut key combo to it. Is there a way to make it into a command and assign a shortcut? I don’t mind doing Ctrl+A and then another shortcut for the conversion. It seems to execute much faster than Find and Replace with a regular expression although the Regex can be executed on multiple files.
I think you can. We didn’t use it, but the MXI XML format allows for the definition of a shortcut list to insert. I haven’t tried it, but if you try it and it works for you please post back for everyone.
This is exactly what I was looking for and works superbly. Thank you for documenting it and making it available.
Will this work in Dreamweaver CC 2015??
I have edited and repacked the extension for Dreamweaver CC 2017, just made a minor edit to accommodate the fact Adobe hid the commands menu! I was going to send it to you but couldn’t find your email address
Argh, bad blogger, no biscuit. Send to tonymiller@carolinamantis.com