(Created page with '= JavaScript = {{CKFinder_2.x CKEditor Integration|ext=php|language=Java}}') |
|||
Line 1: | Line 1: | ||
= JavaScript = | = JavaScript = | ||
− | {{CKFinder_2.x CKEditor Integration|ext= | + | {{CKFinder_2.x CKEditor Integration|ext=java|language=Java}} |
Revision as of 21:25, 1 April 2011
Contents
JavaScript
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
– the CKEditor instance. IfeditorObj
isnull
, CKFinder will integrate with all CKEditor instances. -
config
– an object with specific configuration options. Alternatively, it might be just thebasePath
to the CKFinder installation.
-
imageType
– the name of the resource type that should be used when CKFinder is launched from the Image Properties dialog window. -
flashType
– the name of the resource type that should be used when CKFinder is launched from the Flash Properties dialog window.
Example 1
The following sample code shows how to integrate CKFinder with the editor1
instance and use the /ckfinder/
base path.
var editor = CKEDITOR.replace( 'editor1' ); CKFinder.setupCKEditor( editor, '/ckfinder/' );
Example 2
It is also possible to pass an object with specific properties as the second argument:
var editor = CKEDITOR.replace( 'editor1' ); CKFinder.setupCKEditor( editor, { basePath : '/ckfinder/', rememberLastFolder : false } ) ;
Example 3
This example shows passing null
as the first argument to integrate CKFinder with all CKEditor instances:
CKFinder.setupCKEditor( null, '/ckfinder/' ); var editor = CKEDITOR.replace( 'editor1' );
Check the _samples
folder for more examples.
Manual Integration
In order to configure CKEditor manually to use CKFinder, you will need to 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/java/connector.java?command=QuickUpload&type=Files', filebrowserImageUploadUrl : '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images', filebrowserFlashUploadUrl : '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' });
Remember to change the /ckfinder/
path in the above URLs, if you have installed CKFinder in a different location.
Changing the Size of the CKFinder Window
To change CKFinder the window width and height, use the filebrowserWindowWidth
and filebrowserWindowHeight
configuration settings, respectively:
CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl : '/ckfinder/ckfinder.html', filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images', filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash', filebrowserUploadUrl : '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files', filebrowserImageUploadUrl : '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images', filebrowserFlashUploadUrl : '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash', filebrowserWindowWidth : '1000', filebrowserWindowHeight : '700' });
It is possible to change the size of the CKFinder window inside a specific dialog window by adding its name to the configuration setting. For example, to change just the size of Image Properties dialog window, set the following property: filebrowserImageWindowWidth
.
Specifying Destination Folder for Quick Uploads
The QuickUpload
command is used when uploading files directly in the Upload tab (1) in CKEditor.
When configuring the filebrowserUploadUrl
settings, it is possible to point CKFinder to a subfolder for a given resource type and upload files directly to this subfolder.
In order to do this, add the 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/java/connector.java?command=QuickUpload&type=Files¤tFolder=/archive/', filebrowserImageUploadUrl : '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images¤tFolder=/cars/', filebrowserFlashUploadUrl : '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' });