CKEditor 3.x - New FCKEditor Version (Articles) | The Bakery, Everything CakePHP

CKEditor 3.x - New FCKEditor Version

By Valkum (Valkum)

Now FCKEditor is called CKEditor. And here is an running Version of CKEditor and CakePHP.

CKEditor is an WYSIWYG Javascript Editor.

To Enable CKEditor functionality in your CakePHP version,
download CKEditor from CKEditors Downloadpage -> http://ckeditor.com/download
Extract the downloaded archive to /app/webroot/js

so that you have the following tree structure
Download code




+-/app/webroot/js

+---/ckeditor

+------/images

+------/lang

+------/plugins

+------/skins

+------/themes

Helper Class:

Download code


<?php 

<?php

class FckHelper extends Helper {



    var $helpers = Array('Html', 'Javascript');



    function load($id) {

        $did = '';

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

            $did .= ucfirst($v);

        } 



        $code = "CKEDITOR.replace( '".$did."' );";

        return $this->Javascript->codeBlock($code); 

    }

}

?>

To call CKEditor in a View put this into your *.ctp

View Template:

Download code




<?php

echo $javascript->link('ckeditor/ckeditor', NULL, false);

?>

and

View Template:

Download code




<?php

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

?>

An example is:

View Template:

Download code




<?php

    echo $javascript->link('ckeditor/ckeditor', NULL, false);



    echo $form->create('News', array('action' => 'edit'));

    echo $form->input('title');

    echo $form->input('body', array('cols' => '60', 'rows' => '3'));

    echo $fck->load('News.body');

    echo $form->input('id', array('type'=>'hidden')); 

    echo $form->end('Save Post');

?>

Reqs:
Javascript helper must be included. ($helpers)

Comments

CakePHP Team Comments Author Comments

Comment

1 Good, but incomplete

@Valkum, thanks for the article!

However, you could at least have mentioned CKFinder, since the file manager is not a part of the core editor anymore.
Also, CKFinder now supports some basic authorization, plus authentication through access to the current session which makes it possible to prevent file uploads by unauthenticated users

Comment

2 This field cannot be left blank

you could at least have mentioned CKFinder, since the file manager is not a part of the core editor anymore. Most of the time, it's not needed, is it?
It was a very good idea to separate it from the rest of the project. :)

Comment

3 Integrate CKEditor + CKFinder with Session Authorization on CakePHP

Thanks for the tutorial! I had problems with authentication on CKFinder actually. So I wrote a tutorial on BeamStyle on setting up CKFinder on CakePHP with SESSION AUTHENTICATION as well. Perhaps you guys can take a look on that?

How to integrate CKEditor + CKFinder with Session Authorization into CakePHP --> http://blog.beamstyle.com.hk/?p=170

Comment

4 Why Not just let CKEditor Do it's own thing?

CkEditor will auto replace, meaning all you have to do is include it, and add a class to your inputs.

Whats the benefit of the above code? Iv'e plugged this before, but to show what i'm on about:

http://www.asecondsystem.com/2009/09/14/integrating-ck-editor-with-cakephp/
I'm planning to just have a file browser (not uploader) for the images when thats required, so users can select from the images in the sites media folder, which i populate with uploadify elsewhere. (but thats anouther story).

Will

Comment

5 Alternative to Finder

There are some alternatives to CkFinder for people who want something more open / free.

eg, this one:
http://labs.corefive.com/2009/10/30/an-open-file-manager-for-ckeditor-3-0/
I installed it into my cakeapp like this:
http://www.asecondsystem.com/2010/01/19/integrating-a-file-browser-into-ckeditor-cakephp/#more-327

The Bakery Everything CakePHP