Using: CuteEditor for ASP 6
Goal:
- Create a Custom Button on the Toolbar,
- Custom Button will open a Custom Dialog Box,
- Custom Dialog Box will list all pre-built webpages for linking,
- Selected link will be returned to the calling editor formatted as a <a href=...,
- If text was selected in the calling editor prior to pressing the Custom Button, it will remain as the text between the <a> and the </a>,
- If an image was selected in the calling editor prior to pressing the Custom Button, it will remain as the image between the <a> and the </a>,
- If nothing was selected in the calling editor prior to pressing the Custom Button, the selected webpage link's name (supplied via a db qry) will be returned between the <a> and the </a>.
So far I have created the
Custom Button: editor.CustomAddons = "<img title=""Add a Standalone Page Link"" style=""margin-left: 10px; class=""CuteEditorButton"" onmouseover=""CuteEditor_ButtonCommandOver(this)"" onmouseout=""CuteEditor_ButtonCommandOut(this)"" onmousedown=""CuteEditor_ButtonCommandDown(this)"" onmouseup=""CuteEditor_ButtonCommandUp(this)"" ondragstart=""CuteEditor_CancelEvent()"" onclick=""ShowMyDialog(this)"" src=""/modules/images/standalone_page_link.gif"" />"
Code for opening the Custom Dialog Box:
<script type="text/javascript">
function ShowMyDialog(button) {
var editor = CuteEditor_GetEditor(button);
var newwin=editor.ShowDialog(null,"/modules/manage/addStandalonePageLink.asp?dpt=<%=Request.QueryString("dpt")%>&_rand="+new Date().getTime(),editor,"dialogWidth:292px;dialogHeight:140px");
}
</script>
Custom Dialog Box:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Standalone Pages</title>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.1)" />
<link href="http://cutesoft.net/modules/CuteEditor_files/style/dialog.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<link href="http://cutesoft.net/modules/CuteEditor_Files/style/IE.css" type="text/css" rel="stylesheet" />
<![endif]-->
<script type="text/javascript" src="http://cutesoft.net/modules/CuteEditor_Files/Scripts/Dialog/DialogHead.js"></script>
<script language="javascript" type="text/javascript">
function button_click() {
var editor = Window_GetDialogArguments(window);
var selectedPage = document.getElementById('allPages');
var selectedText = editor.GetSelection().createRange();
editor.PasteHTML('<a href="http://cutesoft.net/websites/index.asp?dpt=<%=Request.QueryString("dpt")%>&pageID='+selectedPage.options[selectedPage.selectedIndex].value+'">'+selectedText+'</a>'); //selectedPage.options[selectedPage.selectedIndex].text
window.close();
}
function Window_GetDialogArguments(win) {
var top = win.top;
var opener = top.opener;
if(top.dialogArguments) {
return top.dialogArguments;
}
if(opener == null) {
return top.document._dialog_arguments;
}
return opener.document._dialog_arguments;
}
</script>
<style type="text/css">
.btn {
border: 1px solid buttonface;
padding: 1px;
cursor: default;
width:14px;
height: 12px;
vertical-align: middle;
}
select,input,td {
font-family: MS Sans Serif;
font-size: 9pt;
vertical-align: top;
cursor: hand;
}
</style>
</head>
<body style="margin:0px;border-width:0px;padding:4px;">
<form name="frmStandalonePageLinks" id="frmStandalonePageLinks" method="post" action="" onSubmit="">
<div>
<fieldset style="padding: 2px;">
<legend>Insert Standalone Page Link</legend>
<select size="3" name="allPages" id="allPages" style="width: 255; margin: 10px;">
<%=strPageLinks%>
</select>
</fieldset>
</div>
<div style="margin: 10px 7px 0 0; width: 100%; text-align: right;">
<input class="inputbuttoninsert" type="button" value=" Insert " style="width: 80px;" onClick="button_click();" />
<input class="inputbuttoncancel" type="button" value=" Cancel " style="width: 80px;" onClick="window.close();" />
</div>
</form>
</body>
<script type="text/javascript" src="http://cutesoft.net/modules/CuteEditor_Files/Scripts/Dialog/DialogFoot.js"></script>
</html>
Returned Link: I have it to the point of returning the page link with the db qry name between the <a> and the </a>.
My question then, is how do I grab the selected text from within the Custom Dialog Box?
After reading several posts, I've tried:
var selectedText = editor.GetSelection();
and
var selectedText = editor.GetSelection().createRange();
The returned value is [object]
Thoughts?
Work Hard! Play Harder!!