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

ale1kids

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

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..

Comunque 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 ImageManager, 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 FileManager 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:


<script language="javascript" type="text/javascript" src="<%=root%>jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,paste,directionality,fullscreen,noneditable,contextmenu",
        theme_advanced_buttons1_add_before : "save,newdocument,separator",
        theme_advanced_buttons1_add : "fontselect,fontsizeselect",
        theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor,liststyle",
        theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
        theme_advanced_buttons3_add_before : "tablecontrols,separator",
        theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        plugin_insertdate_dateFormat : "%Y-%m-%d",
        plugin_insertdate_timeFormat : "%H:%M:%S",
        extended_valid_elements : "hr[class|width|size|noshade]",
        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";

<% @ Language=VBScript %>
<% Option Explicit %>




<%

'Set the timeout of the page
Server.ScriptTimeout = 1000

'Set the response buffer to true as we maybe redirecting
Response.Buffer = True

'Dimension veriables
Dim strImageURL
Dim strImageAltText
Dim strAlign
Dim intBorder
Dim lngHorizontal
Dim lngVerical
Dim intWidth
Dim intHeight
Dim strErrorMessage 'Holds the error emssage if the file is not uploaded
Dim lngErrorFileSize 'Holds the file size if the file is not saved because it is to large
Dim blnExtensionOK 'Set to false if the extension of the file is not allowed
Dim strMessageBoxType 'Holds the type of message box used or basic
Dim strImageName 'Holds the file name
Dim saryFileUploadTypes 'Holds the array of file to upload
Dim blnInsertImage

'Intiliase variables
blnExtensionOK = True
blnInsertImage = false

'If this is a post back then upload the image (use querysting as it is a multipart/form-data form)
If Request.QueryString("PB") = "Y" AND blnImageUpload Then

'Get the image types to upload
saryFileUploadTypes = Split(Trim(strImageTypes), ";")

'Call upoload file function
strImageName = fileUpload(strImageUploadPath, saryFileUploadTypes, intMaxImageSize, strUploadComponent, lngErrorFileSize, blnExtensionOK)

'If this a normal form post back to insert an image read in the form elements
ElseIf Request.Form("URL") <> "hxxp://" AND Request.Form("URL") <> "" AND Request.Form("postBack") Then

'Initilise variable
intBorder = 0

'Get form elements
strImageURL = Request.Form("URL")
strImageAltText = Request.Form("Alt")
strAlign = Request.Form("align")
If isNumeric(Request.Form("intBorder")) Then intBorder = Request.Form("border")
If isNumeric(Request.Form("hoz")) Then lngHorizontal = LngC(Request.Form("hoz"))
If isNumeric(Request.Form("vert")) Then lngVerical = LngC(Request.Form("vert"))
If isNumeric(Request.Form("width")) Then intWidth = LngC(Request.Form("width"))
If isNumeric(Request.Form("height")) Then intHeight = LngC(Request.Form("height"))

'Escape characters that will course a crash
strImageURL = Replace(strImageURL, "'", "\'", 1, -1, 1)
strImageURL = Replace(strImageURL, """", "\""", 1, -1, 1)
strImageAltText = Replace(strImageAltText, "'", "\'", 1, -1, 1)
strImageAltText = Replace(strImageAltText, """", "\""", 1, -1, 1)

blnInsertImage = true

End If

'Change \ for /
strImageName = Replace(strImageName, "", "/", 1, -1, 1)
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "vvv.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="vvv.w3.org/1999/xhtml">
<head>
<title>Image Properties</title>

<%

'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 = 'hxxp://'")
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 width="100%" border="0" cellpadding="3" cellspacing="0" class="tableTopRow">
<tr class="tableTopRow">
<td colspan="2"><h1><% = strTxtImageProperties %></h1></td>
</tr>
<tr>
<td colspan="2" class="tableRow"><table width="100%" border="0" align="center" cellpadding="1" cellspacing="0">
<tr>
<td width="38%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="88%" class="text"><% = strTxtPath %>: <span id="path"><% = strImageUploadPath %></span></td>
</tr>
<%

'If image upload is enabled then display an image upload form
If blnImageUpload Then

%>
<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: 1px solid;backgroundColor:;"></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: 1px solid;backgroundColor:;"></iframe></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td width="38%" valign="top" class="tableBottomRow"> <%

  %></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
%>


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

Grazie a tutti quanti!

ale1kids

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 : hXXp://VVV.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!

Da gestione immagini ASP a TinyMCE tramite la &quot;fileBrowserCallBack&quot; Javascript

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