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.

(Redundant newlines removed from notes)
 
(13 intermediate revisions by 2 users not shown)
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>
+
http://www.mediawiki.org/wiki/Help:Extension:ParserFunctions
 +
Do not change the "ifeq" statement without getting in touch with me - Wiktor.
 +
The double || is here by design, we want to display this error message for all languages different than java.
 +
-->
 +
{{ #ifeq: {{{ext}}} | java | | <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_V1|JavaScript integration (V1) instructions]], please read [[CKFinder_2.x/Developers_Guide/{{{language}}}/CKEditor Integration V1|CKEditor Integration (V1)]] instruction 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.
Line 6: Line 11:
 
== CKFinder.setupCKEditor ==
 
== CKFinder.setupCKEditor ==
  
The [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.html#.setupCKEditor setupCKEditor] method accepts four arguments:
+
The <code>[http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.html#.setupCKEditor setupCKEditor]</code> method accepts four arguments:
  
CKFinder.setupCKEditor( editorObj, config[, imageType, flashType] )
+
<source lang="javascript">
 +
CKFinder.setupCKEditor( editorObj, config[, imageType, flashType] )
 +
</source>
  
* <code>editorObj</code> - CKEditor instance, if the editorObj is null, then CKFinder will integrate with all CKEditor instances.
+
* <code>editorObj</code> &ndash; the CKEditor instance. If <code>editorObj</code> is <code>null</code>, CKFinder will integrate with all CKEditor instances.
* <code>config</code> - Object with selected configuration options. Alternatively, it might be just the basePath to CKFinder installation.
+
* <code>config</code> &ndash; an object with specific configuration options. Alternatively, it might be just the <code>basePath</code> to the CKFinder installation.
* <code>imageType</code> - Name of the resource type that should be used when CKFinder is launched from the Image dialog.
+
<div style="margin-left:40px">
* <code>flashType</code> - Name of the resource type that should be used when CKFinder is launched from the Flash dialog.
+
<note>At the moment the only supported configuration options in the <code>config</code> object are: <code>basePath</code>, <code>width</code> and <code>height</code>, all other settings will not be used.</note></div>
 +
* <code>imageType</code> &ndash; the name of the resource type that should be used when CKFinder is launched from the '''Image Properties''' dialog window.
 +
* <code>flashType</code> &ndash; the name of the resource type that should be used when CKFinder is launched from the '''Flash Properties''' dialog window.
  
 
==== Example 1 ====
 
==== Example 1 ====
 
+
The following sample code shows how to integrate CKFinder with the <code>editor1</code> instance and use the <code>/ckfinder/</code> base path.
 
<source lang="javascript">
 
<source lang="javascript">
var editor = CKEDITOR.replace( 'editor1' );
+
var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor( editor, '/ckfinder/' );
+
CKFinder.setupCKEditor( editor, '/ckfinder/' );
 
</source>
 
</source>
It is also possible to pass an object with selected properties as the second argument:
 
  
 
==== Example 2 ====
 
==== Example 2 ====
 
+
It is also possible to pass an object with specific properties as the second argument:
 
<source lang="javascript">
 
<source lang="javascript">
var editor = CKEDITOR.replace( 'editor1' );
+
var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor( editor, { basePath : '/ckfinder/', rememberLastFolder : false } ) ;
+
CKFinder.setupCKEditor( editor, { basePath : '/ckfinder/', rememberLastFolder : false } ) ;
 
</source>
 
</source>
 
...and below is example where we pass null as the first argument to integrate CKFinder with all CKEditor instances:
 
  
 
==== Example 3 ====
 
==== Example 3 ====
 
+
This example shows passing <code>null</code> as the first argument to integrate CKFinder with all CKEditor instances:
 
<source lang="javascript">
 
<source lang="javascript">
CKFinder.setupCKEditor( null, '/ckfinder/' );
+
CKFinder.setupCKEditor( null, '/ckfinder/' );
var editor = CKEDITOR.replace( 'editor1' );
+
var editor = CKEDITOR.replace( 'editor1' );
 
</source>
 
</source>
Check the "_samples" folder for more examples.
 
  
== Manual integration ==
+
Check the <code>_samples</code> folder for more examples.
  
To instead configure CKEditor manually to use CKFinder, pass some additional CKFinder configuration settings to the CKEditor instance:
+
== 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 ===
 
=== Enabling CKFinder ===
Line 48: Line 54:
 
{{#tag:source|
 
{{#tag:source|
 
  CKEDITOR.replace( 'editor1',
 
  CKEDITOR.replace( 'editor1',
{
+
{
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
+
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
+
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
+
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Files',
+
filebrowserUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Images',
+
filebrowserImageUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Flash'
+
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.
+
Remember to change the <code>/ckfinder/</code> path in the above URLs, if you have installed CKFinder in a different location.
  
=== Changing size of CKFinder window ===
+
=== Changing the Size of the CKFinder Window ===
 
+
To change CKFinder the window width and height, use the <code>filebrowserWindowWidth</code> and <code>filebrowserWindowHeight</code> configuration settings, respectively:
To change CKFinder window width/height use filebrowserWindowWidth / filebrowserWindowHeight settings:
 
  
 
{{#tag:source|
 
{{#tag:source|
CKEDITOR.replace( 'editor1',
+
CKEDITOR.replace( 'editor1',
{
+
{
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
+
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
+
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
+
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Files',
+
filebrowserUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Images',
+
filebrowserImageUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Flash',
+
filebrowserFlashUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Flash',
filebrowserWindowWidth : '1000',
+
filebrowserWindowWidth : '1000',
 
  filebrowserWindowHeight : '700'
 
  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.
+
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: <code>filebrowser'''Image'''WindowWidth</code>.
  
=== Specifying destination folder for Quick Uploads ===
+
=== Specifying Destination Folder for Quick Uploads ===
  
The QuickUpload command is used when uploading files directly in the '''Upload''' tab <sup>(2)</sup> in CKEditor.
+
The <code>QuickUpload</code> command is used when uploading files directly in the '''Upload''' tab <sup>(1)</sup> in CKEditor.
  
 
[[Image:CKEditor Image Dialog.png]]
 
[[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:
+
When configuring the <code>filebrowserUploadUrl</code> 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 <code>currentFolder</code> attribute to the query string:
  
 
{{#tag:source|
 
{{#tag:source|
CKEDITOR.replace( 'editor1',
+
CKEDITOR.replace( 'editor1',
{
+
{
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
+
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
+
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
+
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl :  
+
filebrowserUploadUrl :  
 
    '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Files&currentFolder=/archive/',
 
    '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Files&currentFolder=/archive/',
filebrowserImageUploadUrl :  
+
filebrowserImageUploadUrl :  
  '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Images&currentFolder=/cars/',
+
  '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Images&currentFolder=/cars/',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Flash',
+
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).
+
<note>The folder specified must already exist on the server (see <code>archive</code> and <code>cars</code> in the example above).</note>

Latest revision as of 15:20, 4 February 2013

If you have followed the "old" [[CKFinder_2.x/Developers_Guide/{{{language}}}/Integration/JavaScript_V1|JavaScript integration (V1) instructions]], please read [[CKFinder_2.x/Developers_Guide/{{{language}}}/CKEditor Integration V1|CKEditor Integration (V1)]] instruction 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 – the CKEditor instance. If editorObj is null, CKFinder will integrate with all CKEditor instances.
  • config – an object with specific configuration options. Alternatively, it might be just the basePath to the CKFinder installation.
important note
At the moment the only supported configuration options in the config object are: basePath, width and height, all other settings will not be used.
  • 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/{{{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'
});

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/{{{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 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.

CKEditor Image Dialog.png


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/{{{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'
});
important note
The folder specified must already exist on the server (see archive and cars in the example above).
This page was last edited on 4 February 2013, at 15:20.