Solved

Coldfusion file browse CKEDITOR

Posted on 2015-02-03
9
256 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
C# script to Coldfusion 25 78
CFIf Syntax and Logic 27 46
Apache error.log 19 43
coldfusion upload spreadsheet into the databse 2 44
Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…

821 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