CKSource Helper for CKEditor
This article is also available in the following languages:
CKEditor is a text editor to be used inside web pages. It's a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice.
This helper extends CakePHP's Form core helper. I created the ckeditor function to make it easy to add a CKEditor to any form. I called it CKSource so you can add CKFinder later and have all the CKSource products in one helper. This is still very basic, so feel free to submit changes in the comments.
Update: Added comment for single or double underscore regarding initInputField
Update: Added $this->webroot to base path. This should fix some problems when working in sub-directories.
This helper extends CakePHP's Form core helper. I created the ckeditor function to make it easy to add a CKEditor to any form. I called it CKSource so you can add CKFinder later and have all the CKSource products in one helper. This is still very basic, so feel free to submit changes in the comments.
Update: Added comment for single or double underscore regarding initInputField
Update: Added $this->webroot to base path. This should fix some problems when working in sub-directories.
Please rate and leave comments
1. Download CKEditor 3.1
2. Extract the archive to the webroot/js directory. i.e. webroot/js/ckeditor
3. Copy the the CKSource Helper (cksource.php) to the helpers directory.
4. Include fckeditor.js in each view that will use it, or in your layout if you'll be using it in several views. eg. default.ctp
5. Include the helper to your view's controller or the AppController. eg. app_controller.ctp
6. Now all that's left to do is create your form. Now instead of using $form you use $cksource. eg. demo.ctp
Usage
1. Download CKEditor 3.1
2. Extract the archive to the webroot/js directory. i.e. webroot/js/ckeditor
3. Copy the the CKSource Helper (cksource.php) to the helpers directory.
Helper Class:
<?php
class CksourceHelper extends FormHelper {
var $helpers = array('Html');
function ckeditor($fieldName, $options = array()) {
//CakePHP 1.2.4.8284
$options = $this->_initInputField($fieldName, $options);
//If you have probelms, try adding a second underscore to _initInputField. I haven't tested this, but some commenters say it works.
//$options = $this->__initInputField($fieldName, $options);
$value = null;
$config = null;
$events = null;
if (array_key_exists('value', $options)) {
$value = $options['value'];
if (!array_key_exists('escape', $options) || $options['escape'] !== false) {
$value = h($value);
}
unset($options['value']);
}
if (array_key_exists('config', $options)) {
$config = $options['config'];
unset($options['config']);
}
if (array_key_exists('events', $options)) {
$events = $options['events'];
unset($options['events']);
}
require_once WWW_ROOT.DS.'js'.DS.'ckeditor'.DS.'ckeditor.php';
$CKEditor = new CKEditor();
$CKEditor->basePath = $this->webroot.'js/ckeditor/';
return $CKEditor->editor($options['name'], $value, $config, $events);
}
}
?>
4. Include fckeditor.js in each view that will use it, or in your layout if you'll be using it in several views. eg. default.ctp
View Template:
<?php
echo $javascript->link('ckeditor/ckeditor');
?>
5. Include the helper to your view's controller or the AppController. eg. app_controller.ctp
Controller Class:
<?php
var $helpers = array('Html', 'Form', 'Javascript', 'Cksource');
?>
6. Now all that's left to do is create your form. Now instead of using $form you use $cksource. eg. demo.ctp
View Template:
<?php
echo $cksource->create('CKSource');
echo $cksource->ckeditor('example1');
$config['toolbar'] = array(
array( 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike' ),
array( 'Image', 'Link', 'Unlink', 'Anchor' )
);
$events['instanceReady'] = 'function (ev) {
alert("Loaded: " + ev.editor.name);
}';
echo $cksource->ckeditor('example2', array('value'=>'It works!', 'config'=>$config, 'events'=>$events));
echo $cksource->end();
?>
I just made a little modification for use language and default setting. Instead user editor function I use replace function with a textarea generate with FromHelper.
Also I copy php code in app/vendors and delete file we dont need in app/webroot/js/ckeditor such as .asp, .pack files and _samples folder.
Here the code:
array('Jquery'));
/**
* Sets field defaults for ckeditor: id, config and language.
*
* Options
*
* - string 'id': To access events, same as $field
* - array 'config': If not indicate
* - string 'language': Set the language from cake
*
* @param string $field Name of the field to initialize options for.
* @param array $options Array of options to append options into.
* @return array Array of options for the input.
* @access protected
*/
function _initInputField($field, $options = array()) {
// It needs id for replace function
if (!array_key_exists('id', $options)) {
$options['id'] = $field;
}
// CKeditor only works in textarea inputs
if(!array_key_exists('type', $options)) {
$options['type'] = 'textarea';
}
// Defaults options
if (!array_key_exists('config', $options))
{
$options['config']['toolbar'] = array(
array( 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike' ),
array( 'Image', 'Link', 'Unlink', 'Anchor' ),
);
}
// Config language
$lang = Configure::read('Config.language');
if (isset($lang)) {
// Load language
$this->Js->buffer('CKEDITOR.config.language = \''.$lang.'\';');
echo $this->Js->writeBuffer();
}
$result = parent::_initInputField($field, $options);
return $result;
}
/**
*
* It shows a textarea with CKeditor
* @param string $fieldName
* @param array $options
*/
function ckeditor($fieldName, $options = array()) {
$options = $this->_initInputField($fieldName, $options);
$value = null;
$config = null;
$events = null;
if (array_key_exists('value', $options)) {
$value = $options['value'];
if (!array_key_exists('escape', $options) || $options['escape'] !== false) {
$value = h($value);
}
unset($options['value']);
}
if (array_key_exists('config', $options)) {
$config = $options['config'];
unset($options['config']);
}
if (array_key_exists('events', $options)) {
$events = $options['events'];
unset($options['events']);
}
$CKEditor = new CKEditor();
$CKEditor->basePath = $this->webroot.'js/ckeditor/';
echo $this->Form->input($fieldName, $options);
return $CKEditor->replace($options['id'], $config, $events);
}
}
?>
[end quote]
I'm sorry. The code needs import vendor ckeditor.php and the Helpers Html, Form and Js:
App::import('Vendor', 'ckeditor/ckeditor');
class CksourceHelper extends FormHelper {
var $helpers = array('Html', 'Form', 'Js' => array('Jquery'));
...
}
Just add $ckeditor->editor(fieldnamehere) after your textarea and it will replace it and post properly
[end quote]
I solved the problem by deleting the h() function in line 21 from the controller
Like this:
if (!array_key_exists('escape', $options) || $options['escape'] !== false) {
$value = $value;
}
[end quote]
[quote] whenever i do an edit where it loads a value with html tag the html tags are printed instead of being in the source?
[end quote]
first of all: Thank you Werner for the helper and the article.
TWO OR ONE UNDERSCORES?
For CakePHP version 1.2.4.8284 the _initInputField() call should stay with a single underscore only. Now that Werner updated his article, it means for you that you have to reverse his change :-)
CKFINDER INTEGRATION
Here's a brief how-to for integrating ckFinder. It doesn't cover issues with basic configuration, just Cake-specific stuff.
Edit Werner's views/helpers/cksource.php and include ckfinder.php. I prefer to store ckfinder within ckeditor directory. Its location affects a lot of the code below.
Helper Class:
<?phprequire_once WWW_ROOT.DS.'js'.DS.'ckeditor'.DS.'ckfinder'.DS.'ckfinder.php';
?>
Then link ckFinder with ckEditor after creating $CKEditor:
Helper Class:
<?php$CKFinder = new CKFinder();
$CKFinder->BasePath = '/js/ckeditor/ckfinder/';
$CKFinder->SetupCKEditorObject($CKEditor);
?>
Edit function CheckAuthentication() in config.php in /js/ckeditor/ckfinder and add code that detects whether your user is authenticated. In my case I not only test whether the user is logged in but also whether he's an administrator.
session_name("CAKEPHP");
session_start();
$isAdmin = false;
$isLoggedIn = !empty($_SESSION["Auth"]);
if ($isLoggedIn) {
$isAdmin = $_SESSION["Auth"]['Member']['is_admin'];
}
return $isAdmin;
In /js/ckeditor/ckfinder/config.php enter $baseUrl relatively to webroot and then replace this code
$baseDir = resolveUrl($baseUrl);with$baseDir = realpath(dirname(__FILE__).'/../../../').$baseUrl;Please note that this particular relative path corresponds to my location of config.php.When invoking ckeditor in your code, make sure you call it with 'escape' = false, for example:
echo $cksource->ckeditor('content', array('escape' => false));otherwise image tags you insert using the ckFinder will be converted to entities when you edit the record.Petr
I have integrated ckeditor in my project.
While integrating I am facing some issues. I find that issue and fixed it.
I hope it will be useful for you guys :-)
$options = $this->_initInputField($fieldName, $options);
Please prefix one more underscore in this function, then it will work fine.
$options = $this->__initInputField($fieldName, $options);
Happy Coding :-)
Cheers
Ramsuresh
ECGroup Datasoft Pvt Ltd.,
Thanks,
Usman
i could do that, yes. ckeditor.php is in ckeditor directory when you downlaod it from cksource, so to keep implementation of the helper simple, i left it there.
Comments are closed for articles over a year old