Kopier fra iframe til resten af dokumentet
Jeg har en wysiwyg editor, hvor jeg bruger showModalDialog til at åbne et vindue hvor man skal kunne vælge et billede man vil indsætte.Jeg vil gerne have det lavet på den måde at man fra en liste kan vælge hvilket billede man vil indsætte, men man skal også kunne indstille sådan noget som afstand, ramme osv.
Min tanke er og det jeg har forsøgt at lave, at man i det vindue der popper op, er en iframe, som via fso laver en liste over billeder i en bestemt mappe, man skal så kunne klikke på et af billederne, hvorefter den overfører værdien (Url for billedet) til en skjult textbox, således så man har mulighed for at instille de andre ting for tilsidst at trykke ok for at indsætte billedet!
Grunden til at jeg har lavet en Iframe til at vælge billedet, er at når jeg bruger showModalDialog kan jeg ikke få links til at åbne i samme vindue og så går det galt.
SÅ kort og godt, mit problem er at jeg skal have overført en værdi fra min iframe (test.asp) til et felt i "selve" vinduet (billeder3.asp) (felt navn: txtFileName)
Hvis det kan laves uden et skjult text felt, hvor man fx ligger det valgte billede i en hukommelse af en slags eller lign, er det fint med mig... bare det virker!
-----------------------------------------
---test.asp---
<script language="JavaScript">
function billeder(billed) {
billed2 = 'http://html.sejsgruppe.dk/billeder/'+billed
document.txtFileName.document.value = billed2
window.close()
}
</script>
<% set fs = CreateObject("Scripting.FileSystemObject")
set f = fs.GetFolder(Server.Mappath("../billeder"))
ReDim fileNames(f.files.count)
ReDim fileSize(f.files.count)
ReDim fileType(f.files.count)
i = 0
For Each fldr in f.files
fileNames(i) = fldr.name
i = i + 1
Next
For i = f.files.count - 1 to 0 step -1 %>
<a href="java script:billeder(<%= fileNames(i) %>)"><%= fileNames(i) %></a><br>
<% Next %>
---billeder3.asp---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>test4 - Billeder</TITLE>
<meta name="Generator" content="Stone's WebWriter 4">
<SCRIPT defer>
function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}
function _getTextRange(elm) {
var r = elm.parentTextEdit.createTextRange();
r.moveToElementText(elm);
return r;
}
window.onerror = HandleError
function HandleError(message, url, line) {
var str = "An error has occurred in this dialog." + "\n\n"
+ "Error: " + line + "\n" + message;
alert(str);
window.close();
return true;
}
function Init() {
var elmSelectedImage;
var htmlSelectionControl = "Control";
var globalDoc = window.dialogArguments;
var grngMaster = globalDoc.selection.createRange();
// event handlers
document.body.onkeypress = _CloseOnEsc;
btnOK.onclick = new Function("btnOKClick()");
txtFileName.fImageLoaded = false;
txtFileName.intImageWidth = 0;
txtFileName.intImageHeight = 0;
if (globalDoc.selection.type == htmlSelectionControl) {
if (grngMaster.length == 1) {
elmSelectedImage = grngMaster.item(0);
if (elmSelectedImage.tagName == "IMG") {
txtFileName.fImageLoaded = true;
if (elmSelectedImage.src) {
txtFileName.value = elmSelectedImage.src.replace(/^[^*]*(\*\*\*)/, "$1"); // fix placeholder src values that editor converted to abs paths
txtFileName.intImageHeight = elmSelectedImage.height;
txtFileName.intImageWidth = elmSelectedImage.width;
txtVertical.value = elmSelectedImage.vspace;
txtHorizontal.value = elmSelectedImage.hspace;
txtBorder.value = elmSelectedImage.border;
txtAltText.value = elmSelectedImage.alt;
selAlignment.value = elmSelectedImage.align;
}
}
}
}
txtFileName.value = txtFileName.value || "http://";
txtFileName.focus();
}
function _isValidNumber(txtBox) {
var val = parseInt(txtBox);
if (isNaN(val) || val < 0 || val > 999) { return false; }
return true;
}
function btnOKClick() {
var elmImage;
var intAlignment;
var htmlSelectionControl = "Control";
var globalDoc = window.dialogArguments;
var grngMaster = globalDoc.selection.createRange();
// error checking
if (!txtFileName.value || txtFileName.value == "http://") {
alert("Image URL must be specified.");
txtFileName.focus();
return;
}
if (txtHorizontal.value && !_isValidNumber(txtHorizontal.value)) {
alert("Horizontal spacing must be a number between 0 and 999.");
txtHorizontal.focus();
return;
}
if (txtBorder.value && !_isValidNumber(txtBorder.value)) {
alert("Border thickness must be a number between 0 and 999.");
txtBorder.focus();
return;
}
if (txtVertical.value && !_isValidNumber(txtVertical.value)) {
alert("Vertical spacing must be a number between 0 and 999.");
txtVertical.focus();
return;
}
// delete selected content and replace with image
if (globalDoc.selection.type == htmlSelectionControl && !txtFileName.fImageLoaded) {
grngMaster.execCommand('Delete');
grngMaster = globalDoc.selection.createRange();
}
idstr = "\" id=\"556e697175657e537472696e67"; // new image creation ID
if (!txtFileName.fImageLoaded) {
grngMaster.execCommand("InsertImage", false, idstr);
elmImage = globalDoc.all['556e697175657e537472696e67'];
elmImage.removeAttribute("id");
elmImage.removeAttribute("src");
grngMaster.moveStart("character", -1);
} else {
elmImage = grngMaster.item(0);
if (elmImage.src != txtFileName.value) {
grngMaster.execCommand('Delete');
grngMaster = globalDoc.selection.createRange();
grngMaster.execCommand("InsertImage", false, idstr);
elmImage = globalDoc.all['556e697175657e537472696e67'];
elmImage.removeAttribute("id");
elmImage.removeAttribute("src");
grngMaster.moveStart("character", -1);
txtFileName.fImageLoaded = false;
}
grngMaster = _getTextRange(elmImage);
}
if (txtFileName.fImageLoaded) {
elmImage.style.width = txtFileName.intImageWidth;
elmImage.style.height = txtFileName.intImageHeight;
}
if (txtFileName.value.length > 2040) {
txtFileName.value = txtFileName.value.substring(0,2040);
}
elmImage.src = txtFileName.value;
if (txtHorizontal.value != "") { elmImage.hspace = parseInt(txtHorizontal.value); }
else { elmImage.hspace = 0; }
if (txtVertical.value != "") { elmImage.vspace = parseInt(txtVertical.value); }
else { elmImage.vspace = 0; }
elmImage.alt = txtAltText.value;
if (txtBorder.value != "") { elmImage.border = parseInt(txtBorder.value); }
else { elmImage.border = 0; }
elmImage.align = selAlignment.value;
grngMaster.collapse(false);
grngMaster.select();
window.close();
}
function billeder(billed) {
billed2 = 'http://html.sejsgruppe.dk/billeder/'+billed
txtFileName.value = billed2
}
</SCRIPT>
</HEAD>
<body id=bdy onload="Init()">
<table width="590" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="147"><center>
<a class="lille_sort" href="java script:billeder('fil')">
<img class="<%=border%>" src="../billeder/fil" alt="" border="0" width="100" height="80"><BR>fil</a></center></td>
</table><p>
<DIV id=divFileName>Image URL:</DIV>
<iframe id="brugere_billede" width="120" height="170" frameborder="1" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" src="test.asp"></iframe>
<INPUT type=text name="txtFileName" ID=txtFileName tabIndex=15 onfocus="select()">
<DIV id=divAltText>Alternate Text:</DIV>
<INPUT type=text ID=txtAltText tabIndex=15 onfocus="select()">
<DIV id=divAlign>Alignment:</DIV>
<SELECT size=1 ID=selAlignment tabIndex=20>
<OPTION id=optNotSet value=""> Not set </OPTION>
<OPTION id=optLeft value=left> Left </OPTION>
<OPTION id=optRight value=right> Right </OPTION>
<OPTION id=optTexttop value=textTop> Texttop </OPTION>
<OPTION id=optAbsMiddle value=absMiddle> Absmiddle </OPTION>
<OPTION id=optBaseline value=baseline SELECTED> Baseline </OPTION>
<OPTION id=optAbsBottom value=absBottom> Absbottom </OPTION>
<OPTION id=optBottom value=bottom> Bottom </OPTION>
<OPTION id=optMiddle value=middle> Middle </OPTION>
<OPTION id=optTop value=top> Top </OPTION>
</SELECT>
<DIV id=divHoriz>Horizontal:</DIV>
<INPUT ID=txtHorizontal ime-mode: disabled;" type=text size=3 maxlength=3 value="" tabIndex=25 onfocus="select()">
<DIV id=divBorder>Border Thickness:</DIV>
<INPUT ID=txtBorder style="ime-mode: disabled;" type=text size=3 maxlength=3 value="" tabIndex=21 onfocus="select()">
<DIV id=divVert>Vertical:</DIV>
<INPUT ID=txtVertical style="ime-mode: disabled;" type=text size=3 maxlength=3 value="" tabIndex=30 onfocus="select()">
<BUTTON ID=btnOK type=submit tabIndex=40>OK</BUTTON>
<BUTTON ID=btnCancel type=reset tabIndex=45 onClick="window.close();">Cancel</BUTTON>
</BODY>
</HTML>
