Convert Plain Text to HTML List with Dreamweaver Object
I commonly need to convert blocks of plain text into bulleted lists. The task involves highlighting each list item and enclosing it with <li> tags. The process doesn't take long to complete, but it could be streamlined. So I took the opportunity to create my first Dreamweaver Object.
Background
Before getting to the object, I wanted to provide a better idea of how I use Dreamweaver. It is very rare for me to use the Design view (aka WYSIWYG interface). I primarily use Code view for writing PHP, HTML, JavaScript, etc.
As far as I'm aware, Dreamweaver does not have a way to properly convert my text blocks into lists. I tried both Code and Design view. Both surrounded the entire block with a single pair of <li> tags. And, in case it matters, I currently use Dreamweaver CS5.5.
So the object discussed in this post streamlines the process. Now I just highlight the text block and click the new object's icon.
Build Object
To build the Dreamweaver Object, create an HTML document and add the following tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add List Tags</title>
<script type="text/javascript">
function objectTag() {
}
</script>
</head>
<body>
</body>
</html>
Note the JavaScript code, between the <script> tags, that is the driver behind the object. Since we are generating a list based on an existing block of text, we will be highlighting some text for the object to process. So the first thing the objectTag() function needs to do is get the selected text.
<script type="text/javascript">
function objectTag() {
//GET SELECTED TEXT
var dom = dw.getDocumentDOM();
var selectionPoints = dom.getSelection();
var selectedText = dom.documentElement.outerHTML.slice(selectionPoints[0],selectionPoints[1]);
}
</script>
If nothing is selected, the object will display an error.
<script type="text/javascript">
function objectTag() {
//GET SELECTED TEXT
var dom = dw.getDocumentDOM();
var selectionPoints = dom.getSelection();
var selectedText = dom.documentElement.outerHTML.slice(selectionPoints[0],selectionPoints[1]);
//IF NOTHING IS SELECTED, THROW ERROR
if(selectionPoints[0] == selectionPoints[1]) {
alert('Please select the text you want <li> tags added to');
//ELSE...CONTINUE PROCESSING
} else {
}
}
</script>
Otherwise, the function breaks apart the selected text to process each line individually. Any leading or trailing white space should be removed from each line. Then the <li> tags are added.
<script type="text/javascript">
function objectTag() {
//...
//IF NOTHING IS SELECTED, THROW ERROR
if(selectionPoints[0] == selectionPoints[1]) {
alert('Please select the text you want <li> tags added to');
//ELSE...CONTINUE PROCESSING
} else {
//ENCLOSE EACH LINE WITH <li> TAGS
var listItems = selectedText.split("\r\n");
for(var i=0; i<listItems.length; i++) {
listItems[i] = "\t<li>" + listItems[i] + '</li>';
listItems[i] = listItems[i].replace(/\t<li>\s+/, "\t<li>");
listItems[i] = listItems[i].replace(/\s+<\/li>/, '</li>');
}
}
}
</script>
Note that JavaScript's trim() function doesn't seem to work, at least not in my version of Dreamweaver. So the spaces were removed using regular expressions.
Now we just need to replace the selected text with the newly formatted text.
<script type="text/javascript">
function objectTag() {
//...
//ELSE...CONTINUE PROCESSING
} else {
//ENCLOSE EACH LINE WITH <li> TAGS
var listItems = selectedText.split("\r\n");
for(var i=0; i<listItems.length; i++) {
listItems[i] = "\t<li>" + listItems[i] + '</li>';
listItems[i] = listItems[i].replace(/\t<li>\s+/, "\t<li>");
listItems[i] = listItems[i].replace(/\s+<\/li>/, '</li>');
}
//REPLACE SELECTED TEXT WITH THE MODIFIED VERSION
dom.source.replaceRange(selectionPoints[0], selectionPoints[1], listItems.join("\n"));
}
}
</script>
Final Code
To help give you a better sense on how the pieces fit together, the entire script can be found below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add List Tags</title>
<script type="text/javascript">
function objectTag() {
//GET SELECTED TEXT
var dom = dw.getDocumentDOM();
var selectionPoints = dom.getSelection();
var selectedText = dom.documentElement.outerHTML.slice(selectionPoints[0],selectionPoints[1]);
//IF NOTHING IS SELECTED, THROW ERROR
if(selectionPoints[0] == selectionPoints[1]) {
alert('Please select the text you want <li> tags added to');
//ELSE...CONTINUE PROCESSING
} else {
//ENCLOSE EACH LINE WITH <li> TAGS
var listItems = selectedText.split("\r\n");
for(var i=0; i<listItems.length; i++) {
listItems[i] = "\t<li>" + listItems[i] + '</li>';
listItems[i] = listItems[i].replace(/\t<li>\s+/, "\t<li>");
listItems[i] = listItems[i].replace(/\s+<\/li>/, '</li>');
}
//REPLACE SELECTED TEXT WITH THE MODIFIED VERSION
dom.source.replaceRange(selectionPoints[0], selectionPoints[1], listItems.join("\n"));
}
}
</script>
</head>
<body>
</body>
</html>
Install Object
There are a few different ways to install the object. The script could be added to your Dreamweaver's Common folder. You can also create an .mxi or .mxp file and use Dreamweaver's Module Manager. More information about these methods can be found in the article titled "Making of a Simple, but Useful Dreamweaver Extension."
When installing the object, be sure close Dreamweaver. Otherwise, the object may not be recognized by Dreamweaver or it may even corrupt the objects folder.
0 Comments
There are currently no comments.
Leave a Comment