Adding a dialog box – Adobe Extending Dreamweaver CS4 User Manual
Page 122
116
EXTENDING DREAMWEAVER CS4
Insert bar objects
Adding a dialog box
You can add a form to your object to let the user enter parameters before Dreamweaver inserts the specified code (for
example, the Hyperlink object requests the text, link, target, category index, title, and access key values from the user).
In this example, you add a form to the Strikethrough object from the previous example. The form opens a dialog box
that provides the user with the option to change the text color to red as well as to add the strike-through tag.
This example assumes you have already created a separate JavaScript file called Strikethrough.js.
First, in Strikethrough.js, you add the function that the form calls if the user changes the text color. This function is
similar to the
objectTag()
function for the Strikethrough object, but is an optional function.
Create the function
1
After the
objectTag()
function in Strikethrough.js, create a function called
fontColorRed()
by entering the
following code:
function fontColorRed(){
var dom = dw.getDocumentDOM();
if (dw.getFocus() == 'textView' || dw.getFocus(true) == 'html'){
var upCaseTag = (dw.getPreferenceString("Source Format", "Tags Upper Case", "")
== 'TRUE');
// Manually wrap tags around selection.
if
(upCaseTag){
dom.source.wrapSelection('','');
}else{
dom.source.wrapSelection('','');
}
}else if (dw.getFocus() == 'document'){
dom.applyFontMarkup("color", "#FF0000");
}
// Just return -- don't do anything else.
return;
}
Note: Because
dom.applyCharacterMarkup()
doesn’t support font color changes, you need to find the appropriate
API function for font color changes. (For more information, see
dom.applyFontMarkup()
in the Dreamweaver API
Reference).
2
Save the file as Strikethrough.js.
Next, in the Strikethrough.htm file, you add the form. The form for this example is a simple check box that calls the
fontColorRed()
function when the user clicks on it. You use the
form
tag to define your form, and the table tag for
layout control (otherwise, the dialog box might wrap words or size awkwardly).
Add the form
1
After the
body
tag, add the following code: