Revision as of 16:43, 24 May 2011

Java

CKFinder for Java offers a simple solution to automatically configure and integrate with CKEditor in a single call. In order to achieve this, it is enough to use the <ckfinder:setupCKEditor> tag.

<ckfinder:setupCKEditor> accepts four attributes:

basePath – contains the path to the main CKFinder directory. This attribute is mandatory.
editor – points to the name of CKEditor instance that should be integrated with CKFinder. If not set, CKFinder will integrate with all CKEditor instances on the current page. (Optional)
flashType – is the name of the "Flash" resource type in CKFinder. (Optional)
imageType – is the name of the "Images" resource type in CKFinder. (Optional)

To start using the <ckfinder:setupCKEditor> tag, make sure that both applications are installed in your web application and ckeditor-java-core-3.x.jar file exists in the /WEB-INF/lib directory.

The <ckfinder:setupCKEditor> tag must be inserted on the page before the <ckeditor> tag.

Example

For the purpose of this document it is assumed that CKEditor is available in the /ckeditor/ directory and CKFinder in /ckfinder/ respectively.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>
<html xmlns="http://www.w3.org/1999/xhtml">
	<body>
		<form action="getContent" method="get">
			<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>				
			<input type="submit" value="Submit" />
		</form>
		<ckfinder:setupCKEditor basePath="/ckfinder/" editor="editor1" />
		<ckeditor:replace replace="editor1" basePath="/ckeditor/" />
	</body>	
</html>

JavaScript

If you want to run CKEditor and CKFinder by using pure JavaScript, do not forget to include the references to the ckeditor.js and ckfinder.js files on your pages.

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.

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/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 ⁽¹⁾ 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&currentFolder=/archive/',
	filebrowserImageUploadUrl : 
	   '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images&currentFolder=/cars/',
	filebrowserFlashUploadUrl : '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash'
});

The folder specified must already exist on the server (see archive and cars in the example above).

@@ Line 15: / Line 15: @@
 === Example ===
 For the purpose of this document it is assumed that CKEditor is available in the <code>/ckeditor/</code> directory and CKFinder in <code>/ckfinder/</code> respectively.
@@ Line 36: / Line 35: @@
 = JavaScript =
+<note>If you want to run CKEditor and CKFinder by using pure JavaScript, do not forget to include the references to the <code>ckeditor.js</code> and <code>ckfinder.js</code> files on your pages.
+</note>
 {{CKFinder_2.x CKEditor Integration|ext=java|language=Java}}

CKSource

Login / Create Account

Page Tools

CKEditor Integration"