Using FCKeditor with CakePHP

This article is also available in the following languages:

FCKeditor is a powerful WYSIWYG editor that replaces the plain, old and boring textarea form element. It has file management functions (so you can upload images, flash and other files directly from it) and many more useful functions. To quote the FCKeditor website,
This HTML text editor brings to the web many of the powerful functionalities of desktop editors like MS Word. It's lightweight and doesn't require any kind of installation on the client computer. It is compatible with most internet browsers which include: IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+. On the server side, we're going to use PHP.

The official FCKeditor site is fckeditor.net, where you can download the latest version.

Installation

Delete the unnecessary stuff (not required)

Since we're going to use php, it's safe to delete all other connectors.
From the editor/filemanager/browser/default/connectors, delete the asp, aspx, cfm, lasso, perl and py directories.
From the editor/filemanager/upload delete asp, aspx, cfm and lasso directories.
Now we've reduced the size of FCKeditor from 2.4 to 2.0 megabytes. You can also delete skins, plugins and languages that you don't want and also functionality you don't need (in dialog directory) but be careful not to break things.

Copy stuff

Copy the editor directory, fckeditor.js, fckconfig.js, fckstyles.xml and fcktemplates.xml to your app/webroot/js directory.

Configuration

Edit the app/webroot/.htaccess file and add the following two lines on the end:


AddType application/x-javascript .js

AddType text/css .css

I'm not going to go into FCKeditor configuration itself. Open the app/webroot/js/fckconfig.js file and figure it out yourself.

Helper

Create the app/views/helpers/fck.php

Helper Class:


<?php 

class FckHelper extends Helper

{

    function load($id, $toolbar = 'Default') {

        foreach (explode('/', $id) as $v) {

             $did .= ucfirst($v);

        }



        return <<<FCK_CODE

<script type="text/javascript">

fckLoader_$did = function () {

    var bFCKeditor_$did = new FCKeditor('$did');

    bFCKeditor_$did.BasePath = '/js/';

    bFCKeditor_$did.ToolbarSet = '$toolbar';

    bFCKeditor_$did.ReplaceTextarea();

}

fckLoader_$did();

</script>

FCK_CODE;

    }

}

?>

Usage

Now, all that is left is to include the fckeditor.js file on every page that is going to use it.


<?php echo $javascript->link('fckeditor'); ?>

Enable the fck helper in your controller


var $helpers = array('Html', 'Form', 'Javascript', 'Fck');

And finally, load the editor on the textarea fields that need it.


<div class="required">

    <?php echo $form->labelTag( 'Comment/body', 'Body' );?>

    <?php echo $html->textarea('Comment/body', array('cols' => '60', 'rows' => '10'));?>

    <?php echo $fck->load('Comment/body'); ?>

    <?php echo $html->tagErrorMsg('Comment/body', 'Please enter the Body.');?>

</div>

Enabling file browser/uploader

Create directories Image, Flash, Media, File in your app/webroot/files directory. Chmod them to 0777.

In the app/webroot/js/fckconfig.js file, set:


var _FileBrowserLanguage = 'php';

var _QuickUploadLanguage = 'php';

To enable uploads from the 'Browse Server' window, edit the app/webroot/js/editor/filemanager/browser/default/connectors/php/config.php and set:


$Config['Enabled'] = true;

$Config['UserFilesPath'] = '/app/webroot/files/';

To enable quick uploads, edit the app/webroot/js/editor/filemanager/upload/php/config.php file and set:


$Config['Enabled'] = true;

$Config['UserFilesPath'] = '/app/webroot/files/';

Comments

cashie

Posted 11/10/09 12:07:51 AM
For the new CKEditor, BeamStyle provides a pretty good tutorial on integrating that to CakePHP! It includes authentication and stuff for CKFinder too. Check it out!

http://blog.beamstyle.com.hk/?p=170

Report this
mathai

Posted 10/14/09 01:27:17 AM
I am getting this error please help me to correct the issue.I am using the latest version of cake php.is there any changes in controller

Warning (512): Method FormHelper::labelTag does not exist [CORE/cake/libs/view/helper.php, line 143]
Code | Context

$this = FormHelper
FormHelper::$helpers = array
FormHelper::$fieldset = array
FormHelper::$__options = array
FormHelper::$fields = array
FormHelper::$requestType = NULL
FormHelper::$base = "/cake"
FormHelper::$webroot = "/cake/"
FormHelper::$themeWeb = NULL
FormHelper::$here = "/cake/document"
FormHelper::$params = array
FormHelper::$action = "index"
FormHelper::$plugin = NULL
FormHelper::$data = NULL
FormHelper::$namedArgs = NULL
FormHelper::$argSeparator = NULL
FormHelper::$validationErrors = NULL
FormHelper::$tags = array
FormHelper::$__tainted = NULL
FormHelper::$__cleaned = NULL
FormHelper::$_log = NULL
FormHelper::$Html = HtmlHelper object
$method = "labelTag"
$params = array(
"Comment/body",
"Body"
)

function set__($name, $value) {}
function call__($method, $params) {
trigger_error(sprintf(__('Method %1$s::%2$s does not exist', true), get_class($this), $method), E_USER_WARNING);

Helper::call__() - CORE/cake/libs/view/helper.php, line 143
Overloadable::__call() - CORE/cake/libs/overloadable_php5.php, line 52
FormHelper::labelTag() - [internal], line ??
include - APP/views/document/index.ctp, line 4
View::_render() - CORE/cake/libs/view/view.php, line 666
View::render() - CORE/cake/libs/view/view.php, line 376
Controller::render() - CORE/cake/libs/controller/controller.php, line 803
Dispatcher::_invoke() - CORE/cake/dispatcher.php, line 230
Dispatcher::dispatch() - CORE/cake/dispatcher.php, line 194
[main] - APP/webroot/index.php, line 88

Warning (512): Method HtmlHelper::textarea does not exist [CORE/cake/libs/view/helper.php, line 143]
Code | Context

$this = HtmlHelper
HtmlHelper::$tags = array
HtmlHelper::$base = "/cake"
HtmlHelper::$here = "/cake/document"
HtmlHelper::$params = array
HtmlHelper::$action = "index"
HtmlHelper::$data = NULL
HtmlHelper::$_crumbs = array
HtmlHelper::$__docTypes = array
HtmlHelper::$helpers = NULL
HtmlHelper::$webroot = "/cake/"
HtmlHelper::$themeWeb = NULL
HtmlHelper::$plugin = NULL
HtmlHelper::$namedArgs = NULL
HtmlHelper::$argSeparator = NULL
HtmlHelper::$validationErrors = NULL
HtmlHelper::$__tainted = NULL
HtmlHelper::$__cleaned = NULL
HtmlHelper::$_log = NULL
$method = "textarea"
$params = array(
"Comment/body",
array(
"cols" => "60",
"rows" => "10"
)
)

function set__($name, $value) {}
function call__($method, $params) {
trigger_error(sprintf(__('Method %1$s::%2$s does not exist', true), get_class($this), $method), E_USER_WARNING);

Helper::call__() - CORE/cake/libs/view/helper.php, line 143
Overloadable::__call() - CORE/cake/libs/overloadable_php5.php, line 52
HtmlHelper::textarea() - [internal], line ??
include - APP/views/document/index.ctp, line 5
View::_render() - CORE/cake/libs/view/view.php, line 666
View::render() - CORE/cake/libs/view/view.php, line 376
Controller::render() - CORE/cake/libs/controller/controller.php, line 803
Dispatcher::_invoke() - CORE/cake/dispatcher.php, line 230
Dispatcher::dispatch() - CORE/cake/dispatcher.php, line 194
[main] - APP/webroot/index.php, line 88

Warning (512): Method HtmlHelper::tagErrorMsg does not exist [CORE/cake/libs/view/helper.php, line 143]

Report this
asecondwill

Posted 09/20/09 08:20:09 PM
Why not just use the class replacement technique fck / ckeditor allows for. have done this in the past with fckeditr, and tried it last week with their new "ckeditor". easy peasy. I wrote it up for future ref:

http://www.asecondsystem.com/2009/09/14/integrating-ck-editor-with-cakephp/

Report this
fogcitymarathon

Posted 05/08/09 04:01:20 PM
This article is based on the blog tutorial in the cakephp.org site. It will not work with the blog tutorial in the book Beginning CakePHP where there is ajax for a voting routine.

Hope this save a lot of time from being wasted.

Report this
adallas

Posted 05/06/09 06:59:01 AM
The top of this article mentions folders to be deleted from
editor/filemanager/browser/default/connectors and
editor/filemanager/upload
In v2.6.4, these folders are found in:
editor/filemanager/connectors and the upload files are integrated.

Report this
fogcitymarathon

Posted 04/27/09 11:07:46 AM
I have about 6 hours into this one.

Post 20 looks semi useful but I'm stuck where Post 21 is stuck
The editor comes up however the contents of Fck does not replace the textarea before calling the action (onsubmit event)

I'd like to see a complete form. People have time to write and submit complete helpers, but not complete forms. I'm wondering if there is a "onsubmit" attribute that is assumed we know about in the construction of the forms.

Report this
rynop

Posted 02/10/09 08:38:34 PM
One very important point that was left off of this post is if you are going to use the file manager you really need to protect the upload directory. When you enable the connector anyone can then post data to that connector, an write a file to your upload directory.

The solution is very simple. Leverage the cake session. 1st you'll need to implement some cake authentication (there are lots of tutorials on this). Then put the following code in the fck connector/config.php file:

$Config['Enabled'] = false ; session_name(<value of Session.cookie in core.php>); session_start(); if('admin' == $_SESSION['auth']){ $Config['Enabled'] = true ; }
in my example I do $this->Session->write('auth','admin'); in my cake application. So when user is logged in, admin is set - thus he/she can upload via fck. If you do not do something like this, you are leaving a pretty big security hole open. hope this helps someone.

Report this
WhyNotSmile

Posted 02/07/09 10:04:58 AM
Thanks for this guide, it's really helpful. I'm stuck on one thing though: in one part of my site I want to use a different toolbarset on the fck editor. This means I can't just change the default toolbar, so I have created a new one, called 'ItemDescription', and added it to app/webroot/js/fckconfig.js under the other toolbars.

I then try to use it like this:
$fck->load('Item/description', 700, 400, "ItemDescription");

but when the page loads I get the following error:
ToolbarSet "ItemDescription" doesn't exist

Can anyone help me out here? I've checked the obvious things like spelling etc., but I don't really know what I'm doing so any help would be appreciated!

Thanks!
Sharon

Report this
emmbec

Posted 11/04/08 04:26:36 PM
Which of all of the above versions is the correct one? I tried copy&paste Michael Houghton's helper but when I use it nothing happens, do I need to configure something else?

I downloaded FCK editor and copied the editor directory, fckeditor.js, fckconfig.js, fckstyles.xml and fcktemplates.xml to my app/webroot/js directory, I also wrote the AddType application/x-javascript .js and
AddType text/css .css lines in t he .htaccess at the very end of the file (After < / IfModule>). I am using XAMPP as testing environment. Thanks!

Report this
icedcheese

Posted 08/05/08 10:41:57 AM
I like to call FCK via PHP rather than javascript. For no other reason that personal preference.

Anyhow, this helper is a work in progress and I will update it as it improves, but I like it because it is so simple to use.

Here we go:

In your controller:

Controller Class:
<?php var $helpers = array('Fck'); ?>
The helper: fck.php

Helper Class:
<?php <?php class FckHelper extends Helper { var $helpers = Array('Html'); function startup(&$model) { pr(&$model); die; $this->controller = &$controller; if(isset($controller->max_cache_age)){ $this->max_cache_age = $controller->max_cache_age; } $this->cache_location = CACHE.'thumbs'.DS; } function input($field, $width = 400) { $field = explode('.', $field); if(empty($field[1])) { // need to know how to call a model from a helper } else { $model = $field[0]; $controller = $field[1]; } require_once WWW_ROOT.DS.'js'.DS.'fckeditor'.DS.'fckeditor.php'; $oFCKeditor = new FCKeditor('data['.$model.']['.$controller.']') ; $oFCKeditor->BasePath = DS.'js'.DS.'fckeditor'.DS ; $oFCKeditor->Value = $this->data[$model][$controller]; $oFCKeditor->Height = $width; $oFCKeditor->Create(); } } ?> ?>
Then, all you need to do in your view is:

View Template:
echo $fck->input('Page.content');
I am not sure if other FCK helpers do this, however mine will remember the content just like the form helper does.

I will submit improves as I make this more cakie, if anyone can help please feel free to submit a patch.

Report this
- icedcheese
  
  Posted 08/05/08 11:03:05 AM
  I seem to be having trouble updating my comment, any how, there was an error in the helper, it should be:
  
  Helper Class:
  <?php <?php class FckHelper extends Helper { var $helpers = Array('Html'); function input($field, $width = 400) { $field = explode('.', $field); if(empty($field[1])) { // need to know how to call a model from a helper } else { $model = $field[0]; $controller = $field[1]; } require_once WWW_ROOT.DS.'js'.DS.'fckeditor'.DS.'fckeditor.php'; $oFCKeditor = new FCKeditor('data['.$model.']['.$controller.']') ; $oFCKeditor->BasePath = DS.'js'.DS.'fckeditor'.DS ; $oFCKeditor->Value = $this->data[$model][$controller]; $oFCKeditor->Height = $width; $oFCKeditor->Create(); } } ?> ?>
  
  Report this
  - rahil
    
    Posted 10/28/08 10:28:34 PM
    Michael,
    
    Thank you! I just had to adjust $oFCKeditor->BasePath in helpers/fck.php and it worked perfectly. :)
    
    Report this
iondisc

Posted 07/18/08 11:04:28 AM
I've used Hajo's instructions to setup FCK and it renders on the page fine.

Only when trying to use any popup iframe I'm getting the missing controller error for JsController.

Any ideas how to fix it?

Report this
- yczhang
  
  Posted 05/22/09 02:22:43 PM
  I've used Hajo's instructions to setup FCK and it renders on the page fine.
  
  Only when trying to use any popup iframe I'm getting the missing controller error for JsController.
  
  Any ideas how to fix it?
  I have the same problem. Anyone has a solution?
  
  Report this
wassy

Posted 05/07/08 04:20:30 AM
Ok so after a little more digging ive found that the img src location is correct in the database, but i think it is whenever you do a findAll or other similar statement that it will add the 'url' from the drake.ini setup file which specifies where your cake/app folder resides. It will append whatever is in this string to the img src url, also you cannot leave the url in the drake.ini file empty, so im not sure what to do? any suggestions

Hi im using cake with drake so it can be implemented in drupal (dont ask me why, i hate drupal, not my decision.) Anyway ive implemented Fck editor in cake but for some reason i can upload images no problem, but when i display them in a page (No Fck editor, just raw html), the link for the img tag has changed

Report this
seebz

Posted 04/27/08 10:26:27 AM

Sorry for my bad English but I've a little adapted this script for Cake 1.2 :

Helper Class:
<?php class FckHelper extends Helper { var $helpers = Array('Html'); function load($id, $toolbar = 'Default') { $did = ''; foreach (explode('.', $id) as $v) { $did .= ucfirst($v); } $basePath = '/js/fckeditor/'; $basePath = $this->Html->url($basePath); return <<<FCK_CODE <script type="text/javascript"> fckLoader_{$did} = function () { var bFCKeditor_{$did} = new FCKeditor('{$did}'); bFCKeditor_{$did}.BasePath = '{$basePath}'; bFCKeditor_{$did}.ToolbarSet = '{$toolbar}'; bFCKeditor_{$did}.ReplaceTextarea(); } fckLoader_{$did}(); </script> FCK_CODE; } } ?>

Usage : $fck->load('Model.field');

For the filemanager, here is my code that work correctly (put it in good place in the .../connector/php/config.php file):
$userFolder = 'files'; // -> /app/webroot/files/ // Path to user files relative to the document root. $Config['UserFilesPath'] = str_replace(strstr($_SERVER['PHP_SELF'], '/app/webroot/'), "/{$userFilesFolder}/", $_SERVER['PHP_SELF']) ; // Fill the following value it you prefer to specify the absolute path for the // user files directory. Useful if you are using a virtual directory, symbolic // link or alias. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'. // Attention: The above 'UserFilesPath' must point to the same directory. $separator = ereg('/', __FILE__) ? '/' : '\\'; $tofind = $separator . 'app' . $separator . 'webroot' . $separator; $toadd = $tofind . $userFolder . $separator; $Config['UserFilesAbsolutePath'] = str_replace(strstr(__FILE__, $tofind), $toadd, __FILE__) ;

I have a little code for delete uploaded files with the filemanager.
The explications are on my website (in French) : http://seebz.be/blog/33-supprimer-un-fichier-du-filemanager-de-fckeditor.html

Report this
wassy

Posted 04/22/08 03:16:17 AM
Hi im using cake with drake so it can be implemented in drupal (dont ask me why, i hate drupal, not my decision.) Anyway ive implemented Fck editor in cake but for some reason i can upload images no problem, but when i display them in a page (No Fck editor, just raw html), the link for the img tag has changed. It doesnt seem to be anything to do with fck but thought someone here might know why. If my uplaod directory is /cake/app/webroot/files/images/ and i upload a picture, it is uploaded to the server fine (im using //localhost with xampp on my own machine so can browse the webroot no problems) The url is being stored correctly in the database but when i echo or print_r the field containing the link "/cake" ALWAYS gets prefixed on the start. so the link is now /cake/cake/app/webserver/files/images/ which obviosuly does not display the image. No matter what i cant seem to echo img tags from my database in cake without the url being changed when its output? any ideas? ive tried using drupal folder to store images /drupal/files/images, but even that gets prefixed with /cake/drupal/files/images even though /drupal is on the same level as /cake. Any thought?

Report this
koder

Posted 03/06/08 11:01:45 AM
Someone nows how to save the value of the text area to a data base. I can't acess field text area.

Thanks

Report this
jvendryes

Posted 03/04/08 05:55:22 PM
I have followed all the recommended postings (thanks Hajo and Jens) for getting this to work with 1.2, I was able to get it working with this setup:

View: echo $javascript->link('/fck/fckeditor.js', true); echo $fck->load(null, '500', '900', null); ?> echo $form->input('Content.body', array('type' => 'textarea', 'label' => 'Page Content<br />')); echo $fck->editor('Content.body'); Helper: class FckHelper extends AppHelper { var $helpers = array('Javascript'); function load( $template = 'default', $height = '300', $width = '650', $toolbar = 'Default' ) { $jsDS = '/'; //because \' only suxx in javascript $js = $this->webroot . 'js' . $jsDS . 'fck' . $jsDS; $skinDir = $js . 'editor' . $jsDS . 'skins' . $jsDS; $templateDir = $skinDir . (is_dir( $skinDir . $template ) ? $template : 'default') . $jsDS; $code = "fckLoader = function ( ID ) {"; $code .= " var bFCKeditor = new FCKeditor( ID );"; $code .= " bFCKeditor.BasePath = '" . $js . "';"; $code .= " bFCKeditor.ToolbarSet = '" . $toolbar . "';"; $code .= " bFCKeditor.SkinPath = '" . $templateDir . "';"; $code .= " bFCKeditor.Height = " . $height . ";"; $code .= " bFCKeditor.Width = " . $width . ";"; $code .= " bFCKeditor.ReplaceTextarea();"; $code .= " }"; $this->Javascript->link('fck/fckeditor.js', true); // add it to the header return $this->Javascript->codeBlock($code); } function editor( $fieldName ) { $seperator = (strstr($fieldName, '.') ? '.' : '/'); $id = Inflector::camelize( str_replace($seperator, '_', $fieldName) ); $code = "fckLoader('" . $id . "');"; return $this->Javascript->codeBlock($code); } }

Report this
amadomtz

Posted 02/13/08 06:11:28 PM
I had to make a few modifications in my js\editor\filemanager\connector\php\config.php for images to link/pload correctly

// Path to user files relative to the document root. cakephp mod:: $Config['UserFilesPath'] = preg_replace('/js\/editor\/filemanager\/connectors\/php\/connector\.php(.*)$/','',$_SERVER['REQUEST_URI']) . 'files/'; // Fill the following value it you prefer to specify the absolute path for the // user files directory. Useful if you are using a virtual directory, symbolic // link or alias. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'. // Attention: The above 'UserFilesPath' must point to the same directory. $Config['UserFilesAbsolutePath'] = '../../../../../files/' ;

Report this
carlwenrich

Posted 02/04/08 11:05:55 AM
If anyone has the editor coming up instead of just the textarea, I'd sure appreciate a detailed description. Thanks.

Report this
- Shannera
  
  Posted 02/22/08 03:17:13 AM
  If anyone has the editor coming up instead of just the textarea, I'd sure appreciate a detailed description. Thanks.
  I used the code from posting 11 by Hajo (thanks for his ground work), but replaced
  return $this->Javascript->link('fckeditor/fckeditor.js') . $this->Javascript->codeBlock($code); with
  $this->Javascript->link('fck/fckeditor.js', false); // add it to the header return $this->Javascript->codeBlock($code); Notice that I renamed the folder where the javascripts resides, as it seemed that cake 1.2 got crazy when the script (minus the js extension) and folder name is equal, he always wanted to open the js action.
  Also remember to alter the second line of the load function to reflect your path name (and with it the fckeditor basepath), as you will get in further trouble when fckeditor tries to load the html file to the editor box (I got the "need JSController" error).
  
  In the view I use the following code before the form creation:
  <?php echo $fck->load(null, '500', '900', null); ?> In the form I use the following code:
  echo $form->input('source_html', array('type' => 'textarea')); echo $fck->editor('Emailad.source_html'); // Emailad is the model name used in the form creation, the editor function will transfer it to EmailadSourceHtml, which is the actual form field name. Hope this helps, as it works for me fine.
  
  Report this
mbavio

Posted 01/30/08 12:56:33 PM
Anybody knows how to change the background color of the editori area from white to red? Thanks.

Report this
icedcheese

Posted 01/23/08 02:44:37 AM
I followed both instructions for getting this to work in Cake 1.2, however I couldn't get it to work.

I think for Cake 1.2 it should work off the form helper, i.e. $form->fck etc.

Anyone up for writing it?

Report this
eemerge

Posted 01/11/08 08:11:02 PM
Hello,

Im using fckedit in a website, im using the helper from above (at least one of them im not sure if the original version).

The problem is, i have my webserver setup on localhost for working before deploying. The address of the website is something like: http://localhost/site

The path is something like: D:/www/site
The cake is inside 'site' directory. I have set up in a config.php file i found in fckeditor directory (i couldnt find the exact path specified in the article, maybe its because im using fckedit 2.5), i set up the upload path to:
/app/webroot/files/. Now comes the problem: the files DO get upload, but not inside the 'site' (site/app/webroot/....'), but in the root of my localhost , the structure of dirs app/webroot/files is created in D:/www.

I guess the problems comes from the fckedit PHP config setting: /app/webroot/files , / being here localhost and not localhost/site.
I hope i have been clear enough, maybe someone has some ideeas. Thanks.

PS: im using windows but i used / in path because after posting , the other slashes are just removed

EDIT: Forgot to mention it, i think it could be easily solved if we could use the $html->url function of cake when specifying the directories in the config.php file of fckedit, but i dont know how to access it.

Report this
kippster

Posted 01/02/08 01:02:14 PM
Hello, I am new at all this webpage design, but I am creating a basic webpage for a small business in my hometown, very basic, and will have about 4 pages used for posting information about the store. I would like to use the fckeditor so that I do not have to maintain the pages but they can, by say, logging into an admin area and editing which ever screen they would like. Is there anyone that could help me with this?

Thanks in Advance.
Kipp

Report this
Sultanos

Posted 11/13/07 04:19:15 AM

View Template:
Título: <?php echo $html->textarea('Venta/titulo', array('rows'=>'10')) ?> <?php echo $html->tagErrorMsg('Venta/titulo', 'El campo título es requerido.') ?> <?php echo $fck->load('Venta/titulo','800','150'); ?> </p> <p> Situación: <?php echo $html->input('Venta/situacion', array('size' => '40'))?> <?php echo $html->tagErrorMsg('Venta/situacion', 'El campo título es requerido.') ?> </p> <p> Descripción: <?php echo $html->textarea('Venta/descripcion', array('rows'=>'10')) ?> <?php echo $html->tagErrorMsg('Venta/descripcion', 'Cuerpo de la Venta requerido.') ?> <?php echo $fck->load('Venta/descripcion','800','300'); ?>
How could i disable in the first Fck Box the bars or buttons that i donÂ´t want to be enabled?
Ej: box 1 i dont want pictures nor justify settings or font
types...

Thanks in advance

Report this
pain

Posted 11/04/07 10:09:03 AM
i updated the code to work in 1.2 and made it more generally

structure:
/app/webroot/fckeditor
- fckeditor.js
- editor (DIR)
....

use:
$fck->load(); in the body tag
$fck->editor( ) after the input

Helper Class:
<?php class FckHelper extends AppHelper { var $helpers = array('Javascript'); function load( $template = 'default', $height = '300', $width = '650', $toolbar = 'Default' ) { $jsDS = '/'; //because \' only suxx in javascript $js = $this->webroot . 'js' . $jsDS . 'fckeditor' . $jsDS; $skinDir = $js . 'editor' . $jsDS . 'skins' . $jsDS; $templateDir = $skinDir . (is_dir( $skinDir . $template ) ? $template : 'default') . $jsDS; $code = "fckLoader = function ( ID ) {"; $code .= " var bFCKeditor = new FCKeditor( ID );"; $code .= " bFCKeditor.BasePath = '" . $js . "';"; $code .= " bFCKeditor.ToolbarSet = '" . $toolbar . "';"; $code .= " bFCKeditor.SkinPath = '" . $templateDir . "';"; $code .= " bFCKeditor.Height = " . $height . ";"; $code .= " bFCKeditor.Width = " . $width . ";"; $code .= " bFCKeditor.ReplaceTextarea();"; $code .= " }"; return $this->Javascript->link('fckeditor/fckeditor.js') . $this->Javascript->codeBlock($code); } function editor( $fieldName ) { $seperator = (strstr($fieldName, '.') ? '.' : '/'); $id = Inflector::camelize( str_replace($seperator, '_', $fieldName) ); $code = "fckLoader('" . $id . "');"; return $this->Javascript->codeBlock($code); } } ?>

Report this
bazil749

Posted 08/07/07 01:50:18 AM
Anyway to change the Path that's dumped in the IMG tag from:

/app/webroot/files/

to
/files/

Report this
eblount

Posted 06/25/07 10:00:57 PM
With the new form helper in 1.2, there are a couple of fixes needed for this to work.

In helpers/fck.php, replace:
foreach (explode('/', $id) as $v) {
$did .= ucfirst($v);
}

With:
foreach (explode('[', str_replace(']','', $id)) as $v) {
$did .= ucfirst($v);
}

Replace:
var bFCKeditor_$did = new FCKeditor('$did');

With:
var bFCKeditor_$did = new FCKeditor('$id');

And in the view, instead of:
load('Comment/body'); ?>
Use:
load('data[Comment][body]'); ?>
Hope this helps!
Eric

Report this
fordnox

Posted 03/20/07 07:08:01 AM
This is very good helper. I had to make a change on the line #16 in function fileBrowserInput, to make it work: Here is what i have replaced:
This line:
$output .= "$(id).value = fileUrl;n";

To this line:
$output .= "document.getElementById('".$htmlAttributes['id']."').value = fileUrl;\n";

Can someone explain how to pass Session variables to the editor filemanager browser default connectors php config.php ?

Report this
CraZyLeGs

Posted 11/29/06 02:27:56 PM
Apologies, completely forgot to mention some very important points

1. Include the fckeditor.php in your Cake vendors directory

/app
/app/etc
/cake
/cake/etc
/vendors
/vendors/fckeditor.php

This file comes packaged with FCKeditor in the root of the zipped package.

2. Include the fckeditor.php include via vendors

// include required vendors
vendor('fckeditor');

Do this prior to component / controller stuff.

Apologies, hope this helps.

Report this
CraZyLeGs
Posted 11/29/06 02:21:04 PM
Hey Marko,

Thanks for this little titbit, very informative!

I don't know if this will be useful to someone but I've gone for the PHP integration approach.

Reference on the wiki:
http://wiki.fckeditor.net/Developer%27s_Guide/Integration/PHP
I've actually put this in to a form component that I use to complete repeitive tasks that might be required on any particular page that includes a form (hence the reference to $this->controller).

From the component / controller level:
```
// init editor object

$fck_id = 'FCKeditor_' . $this->controller->name . '_' . $id;

$oFCKeditor = new FCKeditor($fck_id);

$oFCKeditor->BasePath = $this->controller->base . '/js/FCKeditor/';

$oFCKeditor->Width = '400';

$oFCKeditor->Height = '400';

$oFCKeditor->ToolbarSet = 'Cake';

$this->controller->set('fck_editor', $oFCKeditor);
```
NOTES:
- $id - is a unique id that I pass from the controller in case there is a requirement for more than one editor on a page
- ToolbarSet = Cake - I've created a cut down version of the toolbar in my custom configuration file that I've called Cake

At the helper / view level:
```
// fck stuff

$fck_editor->InstanceName = $field_name;

$fck_editor->Value = $value;

$fck_editor->CreateHtml();
```
NOTES:
- $field_name - In the format data[Model][field] - $value - I obtain this using HTML helpers tagValue function

Which leads me to the pesky h() function. The tagValue function employs the h() function in a capacity I can only assume is in replacement of htmlentities. Generally a fantastic shortcut but in this instance creating havoc for the content I'm attempting to insert in to my FCKeditor area. So:

WARNING: Beware h() in $html->tagValue('Model/field');

Additional Stuff:

My custom toolbar
```
FCKConfig.ToolbarSets["Cake"] = [

	['Source'],

	['Cut','Copy','Paste','PasteText','PasteWord'],

	['Undo','Redo','-','SelectAll','RemoveFormat'],

	'/',

	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],

	['OrderedList','UnorderedList','-','Outdent','Indent'],

	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

	['Link','Unlink','Anchor'],

	['Image','Table','Rule','SpecialChar','PageBreak'],

	'/',

	['Style','FontFormat'],

	['About']
] ;
```
Thanks again Marko!
Report this
ebeyrent

Posted 11/22/06 09:24:17 AM
I adjusted your class a bit so that I could specify the width and height of the editor dynamically with the load() method like this:

load('Comment/body', 500, 300); ?>

Helper class:

class FckHelper extends HtmlHelper {
var $Width = 500;
var $Height = 300;
function load($id, $width=null, $height=null, $toolbar = 'Default') {
$did = Inflector::camelize(str_replace('/', '_', $id));
if($width){ $this->Width = $width; }
if($height){ $this->Height = $height; }
$js = $this->webroot.'js/';
return<< fckLoader_$did = function () {
var bFCKeditor_$did = new FCKeditor('$did');
bFCKeditor_$did.BasePath = '$js';
bFCKeditor_$did.ToolbarSet = '$toolbar';
bFCKeditor_$did.Width = $this->Width;
bFCKeditor_$did.Height = $this->Height;
bFCKeditor_$did.ReplaceTextarea();
}
fckLoader_$did();
FCK_CODE;
}
function fileBrowserInput($fieldName, $htmlAttributes = array(), $return = false) {
$output = $this->input($fieldName, $htmlAttributes, $return);
if (!isset($htmlAttributes['id'])) {
$htmlAttributes['id'] = $this->model . Inflector::camelize($this->field);
}
$output .= '';
$output .= "// $output .= "function openFileBrowser(id){\n";
$output .= "var fck = new FCKeditor(id);\n";
$output .= "fck.BasePath = '".$this->webroot."js/'\n";
$output .= "var url = fck.BasePath + 'editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php';\n";
$output .= "var sOptions = 'toolbar=no,status=no,resizable=yes,dependent=yes,scrollbars=yes';\n";
$output .= "sOptions += ',width=640';\n";
$output .= "sOptions += ',height=480';\n";
$output .= "window.SetUrl = function(fileUrl){\n";
$output .= "\$(id).value = fileUrl;\n";
$output .= "}\n";
$output .= "var oWindow = window.open( url, 'FCKBrowseWindow', sOptions ) ;\n";
$output .= "}\n";
$output .= "//]]>\n";
$output .= '';
$output .= 'select an image...';
return $output;
}
}
?>

Report this
wouter

Posted 11/16/06 11:28:57 AM
I adjusted your helper class a little, so I can use the filebrowser to select images on the server. Also, I adjusted your load function, so it uses the build in function to create the correct field id and it extends from HtmlHelper, instead of the general Helper class:

<?php class FckHelper extends HtmlHelper { function load($id, $toolbar = 'Default') { $did = Inflector::camelize(str_replace('/', '_', $id)); $js = $this->webroot.'js/'; return<<<FCK_CODE <script type="text/javascript"> fckLoader_$did = function () { var bFCKeditor_$did = new FCKeditor('$did'); bFCKeditor_$did.BasePath = '$js'; bFCKeditor_$did.ToolbarSet = '$toolbar'; bFCKeditor_$did.ReplaceTextarea(); } fckLoader_$did(); </script> FCK_CODE; } function fileBrowserInput($fieldName, $htmlAttributes = array(), $return = false) { $output = $this->input($fieldName, $htmlAttributes, $return); if (!isset($htmlAttributes['id'])) { $htmlAttributes['id'] = $this->model . Inflector::camelize($this->field); } $output .= '<script type="text/javascript">'; $output .= "//<![CDATA[\n"; $output .= "function openFileBrowser(id){\n"; $output .= "var fck = new FCKeditor(id);\n"; $output .= "fck.BasePath = '".$this->webroot."js/'\n"; $output .= "var url = fck.BasePath + 'editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php';\n"; $output .= "var sOptions = 'toolbar=no,status=no,resizable=yes,dependent=yes,scrollbars=yes';\n"; $output .= "sOptions += ',width=640';\n"; $output .= "sOptions += ',height=480';\n"; $output .= "window.SetUrl = function(fileUrl){\n"; $output .= "\$(id).value = fileUrl;\n"; $output .= "}\n"; $output .= "var oWindow = window.open( url, 'FCKBrowseWindow', sOptions ) ;\n"; $output .= "}\n"; $output .= "//]]>\n"; $output .= '</script>'; $output .= '<a href="#" onclick="openFileBrowser(\''.$htmlAttributes['id'].'\'); return false;">select an image...</a>'; return $output; } } ?>

Report this
- palanisamy
  
  Posted 11/02/07 04:16:09 AM
  i followed all steps.i cannot upload image in fck editor in remote,but it working in localhost.please any body help me...!
  
  Report this
josvanweert

Posted 11/30/99 12:00:00 AM
I followed the article step by step.
But I can't seem to make it work.
The textarea returns every time with a 404 error.
What could I be doing wrong? Please help.

Report this
- josvanweert
  
  Posted 11/30/99 12:00:00 AM
  
  Using the extended script, by Wouter Verweirder, solved my problems. Don't know what's wrong with the original one.
  
  Thanx Wouter!!
  
  Report this