Difference between revisions of "Template:CKFinder 2.x CKEditor Integration"

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

Line 1: Line 1:
 +
<div class="usermessage" style="border:1px solid #000;padding:6px;margin-bottom:10px">If you have followed the "old" CKFinder_2.x/Developers_Guide/{{{language}}}/Integration|JavaScript integration (V1) instructions]], please read.
 +
[[CKFinder_2.x/Developers_Guide/{{{language}}}/CKEditor Integration V1|CKEditor Integration (V1)]] instead.</div>
 +
 
CKFinder comes with built-in API to easily integrate it with CKEditor.
 
CKFinder comes with built-in API to easily integrate it with CKEditor.
  

Revision as of 10:54, 19 May 2010

If you have followed the "old" CKFinder_2.x/Developers_Guide/{{{language}}}/Integration|JavaScript integration (V1) instructions]], please read. [[CKFinder_2.x/Developers_Guide/{{{language}}}/CKEditor Integration V1|CKEditor Integration (V1)]] instead.

CKFinder comes with built-in API to easily integrate it with CKEditor.

CKFinder.setupCKEditor

The setupCKEditor method accepts four arguments:

CKFinder.setupCKEditor( editorObj, config[, imageType, flashType] )
  • editorObj - CKEditor instance, if the editorObj is null, then CKFinder will integrate with all CKEditor instances.
  • config - Object with selected configuration options. Alternatively, it might be just the basePath to CKFinder installation.
  • imageType - Name of the resource type that should be used when CKFinder is launched from the Image dialog.
  • flashType - Name of the resource type that should be used when CKFinder is launched from the Flash dialog.

Example 1

var editor = CKEDITOR.replace( 'editor1' );
 CKFinder.setupCKEditor( editor, '/ckfinder/' );

It is also possible to pass an object with selected properties as the second argument:

Example 2

var editor = CKEDITOR.replace( 'editor1' );
 CKFinder.setupCKEditor( editor, { basePath : '/ckfinder/', rememberLastFolder : false } ) ;

...and below is example where we pass null as the first argument to integrate CKFinder with all CKEditor instances:

Example 3

CKFinder.setupCKEditor( null, '/ckfinder/' );
 var editor = CKEDITOR.replace( 'editor1' );

Check the "_samples" folder for more examples.

Manual integration

To instead configure CKEditor manually to use CKFinder, pass some additional CKFinder configuration settings to the CKEditor instance:

Enabling CKFinder

CKEDITOR.replace( 'editor1',
 {
 	filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
 	filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
 	filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
 	filebrowserUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Files',
 	filebrowserImageUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Images',
 	filebrowserFlashUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Flash'
 } 
 );

Just change "/ckfinder/" in the above URLs if you have CKFinder installed in a different place.

Changing size of CKFinder window

To change CKFinder window width/height use filebrowserWindowWidth / filebrowserWindowHeight settings:

CKEDITOR.replace( 'editor1',
 {
 	filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
 	filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
 	filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
 	filebrowserUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Files',
 	filebrowserImageUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Images',
 	filebrowserFlashUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Flash',
 	filebrowserWindowWidth : '1000',
 	filebrowserWindowHeight : '700'
 } 
 );

It is possible to change the size of CKFinder window inside of specific dialog by adding it's name to the configuration setting, for example to change just the size of Image dialog, set the following property: filebrowserImageWindowWidth.

Specifying destination folder for Quick Uploads

The QuickUpload command is used when uploading files directly in the Upload tab (2) in CKEditor.

CKEditor Image Dialog.png

When configuring filebrowserUploadUrl settings, it is possible to point CKFinder to a subfolder of given resource type and upload files directly to this subfolder. In order to do this, add currentFolder attribute to the query string:

CKEDITOR.replace( 'editor1',
 {
 	filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
 	filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
 	filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
 	filebrowserUploadUrl : 
 	   '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Files&currentFolder=/archive/',
 	filebrowserImageUploadUrl : 
 	   '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Images&currentFolder=/cars/',
 	filebrowserFlashUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Flash',
 } 
 );

Note: the specified folder must already exist on the server ("archive" and "cars" in this example).