Wiktor: Created page with 'CKFinder comes with built-in API to easily integrate it with CKEditor. == CKFinder.SetupCKEditor == The '''SetupCKEditor()''' method accepts four arguments: CKFinder.SetupCKE…'

2010-05-19T09:46:12Z

Created page with 'CKFinder comes with built-in API to easily integrate it with CKEditor. == CKFinder.SetupCKEditor == The '''SetupCKEditor()''' method accepts four arguments: CKFinder.SetupCKE…'

New page

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

== CKFinder.SetupCKEditor ==

The '''SetupCKEditor()''' method accepts four arguments:

CKFinder.SetupCKEditor( editorObj, basePath[, imageType, flashType] )

* <code>editorObj</code> - CKEditor instance, if the editorObj is null, then CKFinder will integrate with all CKEditor instances.
* <code>basePath</code> - The path where CKFinder is installed (for example "/ckfinder/").
* <code>imageType</code> - Name of the resource type that should be used when CKFinder is launched from the Image dialog.
* <code>flashType</code> - Name of the resource type that should be used when CKFinder is launched from the Flash dialog.

==== Example 1 ====

<source lang="javascript">
var editor = CKEDITOR.replace( 'editor1' );
CKFinder.SetupCKEditor( editor, '/ckfinder/' );
</source>
It is also possible to pass an object with selected properties as the second argument:

==== Example 2 ====

<source lang="javascript">
var editor = CKEDITOR.replace( 'editor1' );
CKFinder.SetupCKEditor( editor, { BasePath : '/ckfinder/', RememberLastFolder : false } ) ;
</source>

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

==== Example 3 ====

<source lang="javascript">
CKFinder.SetupCKEditor( null, '/ckfinder/' );
var editor = CKEDITOR.replace( 'editor1' );
</source>
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 ===

{{#tag:source|
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:

{{#tag:source|
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: filebrowser'''Image'''WindowWidth.

=== Specifying destination folder for Quick Uploads ===

The QuickUpload command is used when uploading files directly in the '''Upload''' tab <sup>(2)</sup> in CKEditor.

[[Image: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:

{{#tag:source|
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).

Template:CKFinder 2.x CKEditor Integration V1 - Revision history

Wiktor: Created page with 'CKFinder comes with built-in API to easily integrate it with CKEditor. == CKFinder.SetupCKEditor == The '''SetupCKEditor()''' method accepts four arguments: CKFinder.SetupCKE…'