Da gestione immagini ASP a TinyMCE tramite la "fileBrowserCallBack" Javascript

A

ale1kids

Nuovo Utente
7 Mar 2008
11
0
0
Ciao ragazzi sono davvero disperato..premetto che di Javascript e ASP me ne intendo poco, ma il sito che devo realizzare deve avere queste specifiche..

Cmq ho il problema è il seguente:

Ho realizzato una struttura perfettamente funzionante per la modifica e creazione di contenuti web salvati su DB access con codice ASP.
Per le modifiche del testo, immagini, e via dicendo ho utilizzato il blasonatissimo TinyMCE, e infatti tutto funziona alla grande.
Come saprete sicuramente questo componente Javascript non viene fornito con FileManager o ImageManger, quindi ne ho trovato gratuito realizzato in ASP per l'upload e la gestione di pagine web.
Il FileManger funziona alla grande e riesco anche a caricarlo tramite la procedura "fileBrowserCallBack" che preventivamente avevo settato.

Ma ecco che sorge il problema, quando clicco sull'imagine il FilmeManager mi carca l'URL dell'immagine in un form, ma poi questo URL quando clicco su pulsante OK nel FileManager non riesco a passarlo a TinyMCE, praticamente è come se il FileManager in ASP non riuscisse a comunicare con TinyMCE..

Qui di seguito l'impostazione Javascript di TinyMCE:

Codice: 
	...
		file_browser_callback : "fileBrowserCallBack",
		paste_use_dialog : false,
		theme_advanced_resizing : true,
		theme_advanced_resize_horizontal : false,
		theme_advanced_link_targets : "_something=My somthing;_something2=My somthing2;_something3=My somthing3;",
		apply_source_formatting : true
	});

var URLdiRitorno = "";
var finestraBrowser;
var nomeCampoBrowser;
function fileBrowserCallBack( field_name, url, type, win ){
window.open('<%=root%>jscripts/wiz/popup_adv_image.asp',
'', 'width=800,height=500');finestraBrowser = win;
nomeCampoBrowser = field_name;
}

function ritornoBrowser(url) {
finestraBrowser.document.forms[0].elements[nomeCampoBrowser].value = url;
}
</script>

E qui diseguito il contenuto del fileManager "popup_adv_image.asp";

Codice: 
...
'If this is Gecko based browser or Opera link to JS code for Gecko
If enabled = "Gecko" OR enabled = "opera" Then Response.Write(vbCrLf & "<script language=""JavaScript"" src=""javascript_gecko.asp"" type=""text/javascript""></script>")
	
%>
<script language="JavaScript">

//Function intilise page
function initilzeElements(){
<%

'If an image has been uploaded update the form
If lngErrorFileSize = 0 AND blnExtensionOK = True AND strImageName <> "" Then
	
	'See if we are to use the full URL for file
	If blnUseFullURLpath Then
		Response.Write(vbCrLf & "	document.getElementById('URL').value = '" & strFullURLpathTofiles & Replace(strImageUploadPath, "\", "/", 1, -1, 1)  & "/" & strImageName & "'")
		Response.Write(vbCrLf & "	document.getElementById('prevWindow').contentWindow.document.getElementById('prevFile').src = '" & strFullURLpathTofiles & Replace(strImageUploadPath, "\", "/", 1, -1, 1)  & "/" & strImageName & "'")
	Else
		Response.Write(vbCrLf & "	document.getElementById('URL').value = '" & Replace(strImageUploadPath, "\", "/", 1, -1, 1)  & "/" & strImageName & "'")
		Response.Write(vbCrLf & "	document.getElementById('prevWindow').contentWindow.document.getElementById('prevFile').src = '" & Replace(strImageUploadPath, "\", "/", 1, -1, 1)  & "/" & strImageName & "'")
	End If
	Response.Write(vbCrLf & "	document.getElementById('Submit').disabled = false;")

'Else no image has been uploaded so just initilise the form
Else
	Response.Write(vbCrLf & "	document.getElementById('URL').value = 'http://'")
	Response.Write(vbCrLf & "	document.getElementById('Submit').disabled = true;")
End If
%>
}

<%
'If this a post back write javascript
If blnInsertImage Then
	
	Response.Write(vbCrLf & vbCrLf & "	editor = window.opener.document.getElementById('WebWiz');")
	
	'Tell that we are an image
	Response.Write(vbCrLf & vbCrLf & "	img = editor.contentWindow.document.createElement('img');")
	
	'Set image attributes
	Response.Write(vbCrLf & vbCrLf & "	img.setAttribute('src', '" & strImageURL & "');")
	Response.Write(vbCrLf & "	img.setAttribute('border', '" & intBorder & "');")
	If strImageAltText <> "" Then Response.Write(vbCrLf & "	img.setAttribute('alt', '" & strImageAltText & "');")
	If lngHorizontal <> "" Then Response.Write(vbCrLf & "	img.setAttribute('hspace', '" & lngHorizontal & "');")
	If intWidth <> "" Then Response.Write(vbCrLf & "	img.setAttribute('width', '" & intWidth & "');")
	If intHeight <> "" Then Response.Write(vbCrLf & "	img.setAttribute('height', '" & intHeight & "');")
	If lngVerical <> "" Then Response.Write(vbCrLf & "	img.setAttribute('vspace', '" & lngVerical & "');")
	If strAlign <> "" Then Response.Write(vbCrLf & "	img.setAttribute('align', '" & strAlign & "');")
	 
     
     	'If this is Mozilla or Opera then we need to call insertElementPosition to find where to place the image
     	If enabled = "Gecko" OR enabled = "opera" Then 
		
		Response.Write(vbCrLf & vbCrLf & "	try{" & _
					vbCrLf & "		insertElementPosition(editor.contentWindow, img);" & _
					vbCrLf & "	}catch(exception){" & _
					vbCrLf & "		alert('" & strTxtErrorInsertingObject & "');" & _
					vbCrLf & "		editor.contentWindow.focus();" & _
					vbCrLf & "	}")
	
	'Else this is IE so placing the image is simpler
	Else
		Response.Write(vbCrLf & vbCrLf & "	try{" & _
					vbCrLf & "		editor.contentWindow.focus();" & _
					vbCrLf & "		editor.contentWindow.document.selection.createRange().pasteHTML(img.outerHTML);" & _
					vbCrLf & "	}catch(exception){" & _
					vbCrLf & "		alert('" & strTxtErrorInsertingObject & "');" & _
					vbCrLf & "		editor.contentWindow.focus();" & _
					vbCrLf & "	}")
	End If
		
	'Set focus
	'If Opera change the focus method
	If enabled = "opera" Then
		
		Response.Write(vbCrLf & "	editor.focus();")
	Else
		Response.Write(vbCrLf & "	editor.contentWindow.focus();")
	End If
		
	'Close window
	Response.Write(vbCrLf & "	window.close();")
End If

%>

//Function to preview image
function getImage(URL){
	document.getElementById("prevWindow").contentWindow.document.getElementById("prevFile").src = URL
}

//Function to change image properties
function changeImage(){
	document.getElementById("prevWindow").contentWindow.document.getElementById("prevFile").alt = document.getElementById('Alt').value
	document.getElementById("prevWindow").contentWindow.document.getElementById("prevFile").align = document.getElementById('align').value
	document.getElementById("prevWindow").contentWindow.document.getElementById("prevFile").border = document.getElementById('border').value
	document.getElementById("prevWindow").contentWindow.document.getElementById("prevFile").hspace = document.getElementById('hoz').value
	document.getElementById("prevWindow").contentWindow.document.getElementById("prevFile").vspace = document.getElementById('vert').value
	//Check a value for width and hieght is set or image will be deleted
	if (document.getElementById('width').value!=''){
		document.getElementById("prevWindow").contentWindow.document.getElementById("prevFile").width = document.getElementById('width').value
	}
	if (document.getElementById('height').value!=''){
		document.getElementById("prevWindow").contentWindow.document.getElementById("prevFile").height = document.getElementById('height').value
	}
}

<%
'If image upload is enabled then have the following function
If blnImageUpload Then	
%>
//Function to check upload file is selected
function checkFile(){
	if (document.getElementById('file').value==''){
	
		alert('<% = strTxtErrorUploadingImage %>\n<% = strTxtNoImageToUpload %>')
		return false;
	}else{
		alert('<% = strTxtPleaseWaitWhileImageIsUploaded %>');
		return true;
	}
}<%
End If
%>
</script>
<link href="<% = strCSSfile %>default_style.css" rel="stylesheet" type="text/css" />
</head>
<body style="margin:0px;" OnLoad="self.focus(); initilzeElements();">
<table>
            <tr>
              <td class="text"><% = strTxtFileName %>:<iframe src="file_browser.asp?look=img" id="fileWindow" width="98%" height="180px" style="border: #A5ACB2 1px solid;backgroundColor: #FFFFFF;"></iframe></td>
            </tr>
            <form method="post" action="_popup_adv_image.asp?PB=Y" name="frmUpload" enctype="multipart/form-data" onsubmit="return checkFile();" >
             <tr>
              <td class="text"><% = strTxtImageUpload %></td>
            </tr>
            <tr>
              <td class="smText"><% Response.Write(strTxtImagesMustBeOfTheType & ", " & Replace(strImageTypes, ";", ", ", 1, -1, 1) & ", " & strTxtAndHaveMaximumFileSizeOf & " " & intMaxImageSize & "KB")  %></td>
            </tr>
            <tr>
              <td><input id="file" name="file" type="file" size="35" /></td>
            </tr>
            <tr>
              <td>
              	<input name="upload" type="submit" id="upload" value="Upload">
              </td>
            </tr>
           </form><%
           
'Else file uploading is disabled so show a larger file browser window
Else

%>
	    <tr>
              <td class="text"><% = strTxtFileName %>:<iframe src="file_browser.asp?look=img" id="fileWindow" width="98%" height="278px" style="border: #A5ACB2 1px solid;backgroundColor: #FFFFFF;"></iframe></td>
            </tr>
<%
End If

%>
          </table></td>
          <td width="58%" valign="top">
          <form method="post" action="popup_adv_image.asp" name="frmImageInsrt">
            <table width="100%" border="0" cellspacing="0" cellpadding="2">
              <tr>
                <td width="25%" align="right" class="text"><% = strTxtImageURL %>:</td>
                <td colspan="5"><input name="URL" type="text" id="URL" value="" size="38" onChange="document.getElementById('Submit').disabled=false;" onkeypress="document.getElementById('Submit').disabled=false;">
                  <input name="preview" type="button" id="preview" value="<% = strTxtPreview %>" onClick="getImage(document.getElementById('URL').value)">
                </td>
              </tr>
              <tr>
                <td align="right" class="text"><% = strTxtAlternativeText %>:</td>
                <td colspan="5"><input name="Alt" type="text" id="Alt" size="38" onBlur="changeImage()"></td>
              </tr>
              <tr>
                <td align="right" class="text"><% = strTxtWidth %>:</td>
                <td width="4%"><input name="width" type="text" id="width" size="3" maxlength="3" onkeyup="changeImage()" autocomplete="off" /></td>
                <td width="22%" align="right" class="text"><% = strTxtHorizontal %>:</td>
                <td width="6%"><input name="hoz" type="text" id="hoz" size="3" maxlength="3" onkeyup="changeImage()" autocomplete="off" /></td>
                <td width="20%" align="right" class="text"><% = strTxtAlignment %>:</td>
                <td width="30%"><select size="1" name="align" id="align" onChange="changeImage()">
                  <option value="" selected >Default</option>
                  <option value="left">Left</option>
                  <option value="right">Right</option>
                  <option value="texttop">Texttop</option>
                  <option value="absmiddle">Absmiddle</option>
                  <option value="baseline">Baseline</option>
                  <option value="absbottom">Absbottom</option>
                  <option value="bottom">Bottom</option>
                  <option value="middle">Middle</option>
                  <option value="top">Top</option>
                </select></td>
              </tr>
              <tr>
                <td align="right" class="text"><% = strTxtHeight %>:</td>
                <td><input name="height" type="text" id="height" size="3" maxlength="3" onkeyup="changeImage()" autocomplete="off" /></td>
                <td align="right" class="text"><% = strTxtVertical %>:</td>
                <td><input name="vert" type="text" id="vert" size="3" maxlength="3" onkeyup="changeImage()" autocomplete="off" /></td>
                <td align="right" class="text"><% = strTxtBorder %>:</td>
                <td><input name="border" type="text" id="border" size="3" maxlength="2" onKeyUp="changeImage()" autocomplete="off" /></td>
              </tr>
              <tr>
                <td align="right" valign="top" class="text"><% = strTxtPreview %>:</td>
                <td colspan="5"><iframe src="popup_image_preview.asp" id="prevWindow" width="98%" height="215px" style="border: #A5ACB2 1px solid;backgroundColor: #FFFFFF;"></iframe></td>
                </tr>
          </table></td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td width="38%" valign="top" class="tableBottomRow">&nbsp;<%
      
      %></td>
      <td width="24%" align="right" class="tableBottomRow">        <input type="hidden" name="postBack" value="true">
        <input type="submit" name="Submit" id="Submit" value="OK-Invia-a-TinyMCE">&nbsp;<input type="button" name="cancel" value=" <% = strTxtCancel %> " onClick="window.close()">
        <br /><br />
       </td>
    </tr>
</table>
</body>
</html>
<%
'If the file upload has failed becuase of the wrong extension display an error message
If blnExtensionOK = False Then
	Response.Write("<script language=""JavaScript"">")
	Response.Write("alert('" & strTxtErrorUploadingImage & ".\n" &strTxtImageOfTheWrongFileType & ".\n" & strTxtImagesMustBeOfTheType & ", "  &  Replace(strImageTypes, ";", ", ", 1, -1, 1) & "');")
	Response.Write("</script>")

'Else if the file upload has failed becuase the size is to large display an error message
ElseIf lngErrorFileSize <> 0 Then
	Response.Write("<script language=""JavaScript"">")
	Response.Write("alert('" & strTxtErrorUploadingImage & ".\n" & strTxtImageFileSizeToLarge & " " & lngErrorFileSize & "KB.\n" & strTxtMaximumFileSizeMustBe & " " & intMaxImageSize & "KB');")
	Response.Write("</script>")
End If
%>

Devo settare qualcosa nel fileManager ASP nel tasto "OK-Invia-a-TinyMCE" oppure devo settare meglio la "fileBrowserCallBack"..

Ragazzi sono proprio in alto mare..se riuscite ad illuminarvi ve ne sarei grato..attendo vostre notizie..

Grazie a tutti quanti!
 
Allora ho abbandonato TinyMCE e sono passato al FCKeditor molto più versatile per ASP..
Ora funziona tutto quanto a parte il fatto che nel file/image manager non vi sono le preview..

Vorrei inserirlo, ma come faccio?Ho pensato di inserire io un frame con le previw nel file manager di fckEditor ma non ci riesco, non riesco a modificare minimamente il file manager..

Quello che mi piacerebbe ottenere è questo : http://www.ckfinder.com/demo

Peccato che sia un plugin di FCKeditor a pagamento..

Se mi date una mano poi possiamo pubblicare questo nuovo plugin, rendendolo openSource..

Se c'è qualche volenteroso che se ne intenda di javascrip e ASP si faccia avanti..

Io attualmente sono riuscito a far caricare il mio filemanager in ASP, che permette di caricare immagini sul server e di vedere anche una preview, direttamente dal pulsante "carica immagini->cerca nel server" di FCK editor..
Il problema è che selezionata l'immagine non so come pasare l'indirizzo immagine al form URL in "carica immagine" di FCKeditor..

Chi mi da una mano gli offro un caffè!

Attendo vostre news!
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

booklisa
Compressione immagini e gestione media
Risposte
1
Visite
1K
CMS (Content Management System)
borgo italia
borgo italia
A
gestione immagini server-database
Risposte
2
Visite
962
PHP
akp
A
G
gestione immagini
Risposte
4
Visite
1K
PHP
criric
criric
P
Piccolo problema con gestione immagini.
Risposte
9
Visite
2K
PHP
borgo italia
borgo italia
P
Problema gestione immagini in PHP
Risposte
12
Visite
3K
PHP
Ppz@OdC
P
R
Cerco programmatore per piccolo software di gestione delle immagini
Risposte
1
Visite
2K
Offerte e Richieste di Lavoro e/o Collaborazione
borgo italia
borgo italia
M
Gestione Immagini
Risposte
25
Visite
3K
PHP
Monumentale
M
A
gestione immagini
Risposte
2
Visite
1K
PHP
Alexssander88
A
D
gestione immagini in primo piano
Risposte
3
Visite
2K
Javascript
lukeonweb
lukeonweb
A
Gestione array multidimensionale
Risposte
6
Visite
1K
PHP
zorro
zorro
andreas88
Gestione Profilo OnlyFans
Risposte
0
Visite
3K
Leggi, Normative e Fisco
andreas88
andreas88
A
Creazione cookie e gestione accessi
Risposte
0
Visite
880
PHP
antonio corizzo
A
B
form gestione input
Risposte
2
Visite
1K
PHP
Max 1
Max 1
sbolde91
Consiglio gestione Hosting
Risposte
2
Visite
2K
Hosting
sbolde91
sbolde91
E
Gestione profilo utente tramite Form
Risposte
3
Visite
1K
PHP
ettorpa66
E
S
cerco esperto gestione ecommerce
Risposte
0
Visite
1K
Offerte e Richieste di Lavoro e/o Collaborazione
StefanoCole
S
P
Curiosità su grandi aziende e la gestione delle grafiche.
Risposte
1
Visite
1K
Discussioni Varie
MarcoGrazia
MarcoGrazia
M
Consiglio sulla gestione di Gerarchie
Risposte
0
Visite
1K
Database
Marco_1999
M
A
attributo "min" per input gestione date
Risposte
8
Visite
2K
PHP
MarcoGrazia
MarcoGrazia
L
Gestione DB
Risposte
2
Visite
2K
ASP.NET
lucavalentino
L
Alto Basso