| Line 43: | Line 43: | ||
=== Enabling CKFinder === | === Enabling CKFinder === | ||
| − | < | + | <pre> |
CKEDITOR.replace( 'editor1', | CKEDITOR.replace( 'editor1', | ||
{ | { | ||
| Line 54: | Line 54: | ||
} | } | ||
); | ); | ||
| − | </ | + | </pre> |
Just change "/ckfinder/" in the above URLs if you have CKFinder installed in a different place. | Just change "/ckfinder/" in the above URLs if you have CKFinder installed in a different place. | ||
| Line 62: | Line 62: | ||
To change CKFinder window width/height use filebrowserWindowWidth / filebrowserWindowHeight settings: | To change CKFinder window width/height use filebrowserWindowWidth / filebrowserWindowHeight settings: | ||
| − | < | + | <pre> |
CKEDITOR.replace( 'editor1', | CKEDITOR.replace( 'editor1', | ||
{ | { | ||
| Line 75: | Line 75: | ||
} | } | ||
); | ); | ||
| − | </ | + | </pre> |
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. | 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. | ||
Revision as of 11:56, 18 January 2010
CKFinder 1.4 comes with built it APIs to easily integrate it with CKEditor.
Contents
CKFinder.SetupCKEditor
The SetupCKEditor() method accepts four arguments:
CKFinder.SetupCKEditor( editorObj, basePath[, imageType, flashType] )
-
editorObj- CKEditor instance, if the editorObj is null, then CKFinder will integrate with all CKEditor instances. -
basePath- The path where CKFinder is installed (for example "/ckfinder/"). -
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.