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 ?
Errol FarroAsked:
Who is Participating?
 
Pravin AsarConnect With a Mentor Principal Systems EngineerCommented:
Okay.

Here is a sample of how to upload file.

<!--- Editor Page --->
<!DOCTYPE html>
<html>
    <head>
        <title>A Simple Image File Upload with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <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', {
                               filebrowserUploadUrl: "upload.cfm"
                        } );
            </script>
        </form>
    </body>
</html>


<!--- Upload Code upload.cfm ---->

<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>
0
 
Pravin AsarPrincipal Systems EngineerCommented:
Look at

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

e.g.

filebrowserImageBrowseUrl: '/browser/browse.php?type=Images'
0
 
Errol FarroAuthor Commented:
I read the suggested link but could not get the CF to work
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
Pravin AsarPrincipal Systems EngineerCommented:
The config has two parts one for browse and other for upload.



filebrowserImageBrowseUrl: '/browser/browse.php?type=Images'
filebrowserImageUploadUrl: '/uploader/upload.php?type=Images'
0
 
Errol FarroAuthor Commented:
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.
0
 
Pravin AsarPrincipal Systems EngineerCommented:
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
0
 
Pravin AsarPrincipal Systems EngineerCommented:
This is even better.

<!DOCTYPE html>
<html>
    <head>
        <title>A Simple Image File Upload with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <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>

<!--- fileBrowser.cfm example code --->

<script type="text/javascript">
function getUrlParam(paramName)
{
  var reParam = new RegExp('(?:[\?&]|&amp;)' + 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>

<!--- upload file example code --->
<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>
0
 
Pravin AsarPrincipal Systems EngineerCommented:
Glad it works for you.
0
 
Errol FarroAuthor Commented:
Appreciate it !!!!
0
All Courses

From novice to tech pro — start learning today.