asked on

Coldfusion file browse CKEDITOR

In the HTML, I have added the below code to enable file browsing in CKEDITOR

CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl: 'program1.cfm',
filebrowserUploadUrl: 'program2.cfm'
});

When I click on the image icon in CKEDITOR, UPLOAD, CHOOSE FILE, I can select pictures from my local PC.

After a picture has been selected and the "Send it To Server" icon pressed, program2.cfm is invoked.

Do you have an example of the code that must be included in program2.cfm to have the "image selected" send to CKEDITOR ?

Pravin Asar

Look at

http://docs.ckeditor.com/#!/guide/dev_file_browse_upload

e.g.

filebrowserImageBrowseUrl: '/browser/browse.php?type=Images'

Errol Farro

ASKER

I read the suggested link but could not get the CF to work

Pravin Asar

The config has two parts one for browse and other for upload.

filebrowserImageBrowseUrl: '/browser/browse.php?type=Images'
filebrowserImageUploadUrl: '/uploader/upload.php?type=Images'

Errol Farro

ASKER

That part I understood.

What is the code which I must use include for the "browse.php" or "upload.php" if these two (browse.php" or "upload.php) were coldfusion.

In other words, what would the code be browser.cfm or upload.cfm ?

This I could not get from any documentation.

Pravin Asar

image will be uploaded via AJAX upload.
In the image upload url; add cfdump to see how file name/path is being passed.

I will try to set up simple example for you.
please give me some time

Thanks

ASKER CERTIFIED SOLUTION

Pravin Asar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pravin Asar

This is even better.

<!DOCTYPE html>
<html>
<head>
<title>A Simple Image File Upload with CKEditor</title>

<script src="/libs/ckeditor/ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
                        CKEDITOR.replace( 'editor1', {
                              filebrowserImageBrowseUrl : 'fileBrowser.cfm',
                               filebrowserUploadUrl: "upload.cfm"
                        } );
</script>
</form>
</body>
</html>



<script type="text/javascript">
function getUrlParam(paramName)
{
var reParam = new RegExp('(?:[\?&]|&)' + paramName + '=([^&]+)') ;
var match = window.location.search.match(reParam) ;
return (match && match.length > 1) ? match[1] : '' ;
}

function SelectFile( fileUrl,fileAlt )
{
      alert (fileUrl);
      var funcNum = getUrlParam('CKEditorFuncNum');
      window.opener.CKEDITOR.tools.callFunction(funcNum,fileUrl);
      window.close();
}
</script>
<table>
      <tr>
            <td>
            <a style="border:0;" href="javascript:SelectFile('http://localhost/test/editor/big.png');"><img src="big.png" width="50" border="0"/>
            </td>
            <td>
            <a style="border:0;" href="javascript:SelectFile('http://localhost/test/editor/about.png');"><img src="about.png" width="50" border="0"/>
            </td>

      </tr>
</table>


<cftry>
<cffile action="upload" fileField="upload"
destination="C:\inetpub\wwwroot\test\editor" nameconflict="overwrite" >
<cfoutput>
      Thankyou, your #form.upload# has been uploaded
</cfoutput>
<cfcatch type="any">
      Error uploading file.
</cfcatch>
</cftry>

Pravin Asar

Glad it works for you.

Errol Farro

ASKER

Appreciate it !!!!