There are several ways to integrate CKEditor into your pages. This page presents the most common way to achieve it.
Contents[hide] |
CKEditor is a JavaScript application. To load it, you just need to include a single file reference at your page. Supposing that you have installed CKEditor at the "ckeditor" directory at the root of your web site, here you have an example:
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head>
With the above file loaded, the CKEditor JavaScript API is ready to be used.
Attention: be sure to use the original file name ("ckeditor.js") when including it in your pages. If you instead want to use a different file name, or even merge the CKEditor script into another JavaScript file, then be sure to look at the Specifying the Editor Path page.
CKEditor works just like a textarea in your page. While the editor offers a user interface to easily write, format and work with rich text, the same thing could be achieved, not that easily, with a textarea, requiring the user to type HTML code inside of it.
But, as a matter of fact, CKEditor uses a textarea to transfer its data to the server. The textarea is invisible to the end user. So, to create and editor instance you must, ironically, create a textarea first:
<textarea name="editor1"><p>Initial value.</p></textarea>
Note that, if you want to load data into the editor, from a database for example, just put that data inside the textarea, just like the above example.
In this example, we have named our textarea "editor1". This name can be used in the server side later, when receiving the posted data.
Now, using the CKEditor JavaScript API, we "replace" the plain textarea with an editor instance. A single JavaScript call is needed for that:
<script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script>
This script block must be included at any point "after" the <textarea> tag in the page. You can also call the replace function inside <head>, but you need to listen for the "window.onload" event in such case:
<script type="text/javascript"> window.onload = function() { CKEDITOR.replace( 'editor1' ); }; </script>As previously described, the editor works just like a <textarea> field. So, when submitting a form containing an editor instance, its data will be simply posted, using the textarea name as the key to retrieve it.
For example, following the above example, in PHP we would do something like this:
<?php $editor_data = $_POST[ 'editor1' ]; ?>
Some applications (like Ajax applications) need to handle all data at the client side, sending it to the server by its own ways. In such case, it's enough to use the CKEditor API to easily retrieve an editor instance data. For example:
<script type="text/javascript"> var editor_data = CKEDITOR.instances.editor1.getData(); </script>
<html> <head> <title>Sample - CKEditor</title> <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head> <body> <form method="post"> <p> My Editor:<br /> <textarea name="editor1"><p>Initial value.</p></textarea> <script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script> </p> <p> <input type="submit" /> </p> </form> </body> </html>
Contents[hide] |
CKFinder comes with built-in API to easily integrate it with CKEditor. Check the "_samples" folder for specific examples of it.
The static function SetupCKEditor() accepts four arguments:
SetupCKEditor( $editorObj [, $basePath, $imageType, $flashType] )
editorObj - CKEditor class instance.
basePath - The path where CKFinder is installed (optional, default value: "/ckfinder/").
imageType - Name of the resource type that should be used when CKFinder is launched from the Image dialog (optional).
flashType - Name of the resource type that should be used when CKFinder is launched from the Flash dialog (optional).
<?php // Make sure you're using correct paths here include_once 'ckeditor/ckeditor.php'; include_once 'ckfinder/ckfinder.php'; $ckeditor = new CKEditor(); $ckeditor->basePath = '/ckeditor/'; CKFinder::SetupCKEditor($ckeditor, '/ckfinder/'); $ckeditor->editor('CKEditor1');
The SetupCKEditorObject() method accepts three arguments:
SetupCKEditorObject( $editorObj [, $imageType, $flashType] )
editorObj - CKEditor class instance.
imageType - Name of the resource type that should be used when CKFinder is launched from the Image dialog (optional).
flashType - Name of the resource type that should be used when CKFinder is launched from the Flash dialog (optional).
<?php // Make sure you're using correct paths here include_once 'ckeditor/ckeditor.php'; include_once 'ckfinder/ckfinder.php'; $ckeditor = new CKEditor(); $ckeditor->basePath = '/ckeditor/'; $ckfinder = new CKFinder(); $ckfinder->BasePath = '/ckfinder/'; // Note: BasePath property in CKFinder class starts with capital letter $ckfinder->SetupCKEditorObject($ckeditor); $ckeditor->editor('CKEditor1'); To instead configure CKEditor manually to use CKFinder, pass additional file browser configuration settings to the config property of the CKEditor instance:
<?php // Make sure you're using correct path here include_once 'ckeditor/ckeditor.php'; $ckeditor = new CKEditor(); $ckeditor->basePath = '/ckeditor/'; $ckeditor->config['filebrowserBrowseUrl'] = '/ckfinder/ckfinder.html'; $ckeditor->config['filebrowserImageBrowseUrl'] = '/ckfinder/ckfinder.html?type=Images'; $ckeditor->config['filebrowserFlashBrowseUrl'] = '/ckfinder/ckfinder.html?type=Flash'; $ckeditor->config['filebrowserUploadUrl'] = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; $ckeditor->config['filebrowserImageUploadUrl'] = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'; $ckeditor->config['filebrowserFlashUploadUrl'] = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'; $ckeditor->editor('CKEditor1'); CKFinder comes with built-in API to easily integrate it with CKEditor.
The setupCKEditor method accepts four arguments:
CKFinder.setupCKEditor( editorObj, config[, imageType, flashType] )
editorObj - CKEditor instance, if the editorObj is null, then CKFinder will integrate with all CKEditor instances.
config - Object with selected configuration options. Alternatively, it might be just the basePath to CKFinder installation.
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.
var editor = CKEDITOR.replace( 'editor1' ); CKFinder.setupCKEditor( editor, '/ckfinder/' ); It is also possible to pass an object with selected properties as the second argument:
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:
CKFinder.setupCKEditor( null, '/ckfinder/' ); var editor = CKEDITOR.replace( 'editor1' ); Check the "_samples" folder for more examples.
To instead configure CKEditor manually to use CKFinder, pass some additional CKFinder configuration settings to the CKEditor instance:
CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl : '/ckfinder/ckfinder.html', filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images', filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash', filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images', filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash' } ); Just change "/ckfinder/" in the above URLs if you have CKFinder installed in a different place.
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/php/connector.php?command=QuickUpload&type=Files', filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images', filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?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.
The QuickUpload command is used when uploading files directly in the Upload tab (2) in CKEditor.
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:
CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl : '/ckfinder/ckfinder.html', filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images', filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash', filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files¤tFolder=/archive/', filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images¤tFolder=/cars/', filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash' } ); 联系客服
