Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Coldfusion file browse CKEDITOR

Posted on 2015-02-03
9
Medium Priority
?
349 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
9 Comments
 
LVL 29

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 29

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
A new era in Cloud training has arrived.

A day that will go down in Cloud history.. But are you ready for it? Will you accept this Cloud challenge?

 

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 29

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 29

Accepted Solution

by:
Pravin Asar earned 2000 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 29

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 29

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

PowerShell Core for Advanced Linux Administrators

Understand advanced principals around Powershell Core with a focus on the Linux Administrator.  This course covers how to administer numerous environments across multiple platforms including Linux, Azure, AWS, and Google Cloud from a single shell instance.

Question has a verified solution.

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

PROBLEM:  How to open a cfwindow or run a function on double click of a cfgrid row. One of my clients wanted to be able to double click on a row item to get more detailed information about a transaction and to be able to modify the line items i…
CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…

704 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