Solved

Coldfusion file browse CKEDITOR

Posted on 2015-02-03
9
240 Views
Last Modified: 2015-02-12
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 ?
0
Comment
Question by:Errol Farro
  • 6
  • 3
9 Comments
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 40587032
Look at

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

e.g.

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

Author Comment

by:Errol Farro
ID: 40587418
I read the suggested link but could not get the CF to work
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 40587435
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
 

Author Comment

by:Errol Farro
ID: 40587457
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 28

Expert Comment

by:Pravin Asar
ID: 40590893
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
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 500 total points
ID: 40594394
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
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 40594421
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
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 40595660
Glad it works for you.
0
 

Author Comment

by:Errol Farro
ID: 40605555
Appreciate it !!!!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The technique is by far very Simple! How we can export the ColdFusion query results to DOC file?  Well before writing this I researched a lot in Internet but did not found a good Answer anyways!  So i thought now i should share my small snippet w…
Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
Windows 10 is mostly good. However the one thing that annoys me is how many clicks you have to do to dial a VPN connection. You have to go to settings from the start menu, (2 clicks), Network and Internet (1 click), Click VPN (another click) then fi…
This is used to tweak the memory usage for your computer, it is used for servers more so than workstations but just be careful editing registry settings as it may cause irreversible results. I hold no responsibility for anything you do to the regist…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now