Archives for February, 2012

16
Feb
Posted by Tony » 12 Comments »

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