Sep
14th
09

Integrating CK Editor with CakePHP

Tags: ,
Posted in: Notes

ckeditorCkEditor is the new WYSIWYG editor from the maker of FckEditor – which has been one of the best editors around for a while now.

To use CkEditor instead of a boring old textarea input in your cakephp views all you have to do is follow these very simple instructions.

1. Download the editor from http://ckeditor.com/download

2. Unzip it and put the ckeditor directory into your webroot.

3. Include the javascript helper in your controller

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

4. tell your view to include the ckeditor/ckeditor.js file

link('/ckeditor/ckeditor', false);?>

5. Make sure your layout is looking for the javascript files variable like this:

echo $content_for_layout;

6. replace your textareas with CkEditors by class name by adding the classname ‘ckeditor’ to your input.

echo $form->input('content', array('class'=>'ckeditor'));

Hopefully thats got you a nice wysiwyg with all the buttons etc. Ckeditor is easy to configure to give your users as much or as little creative freedom as you need. Enjoy!

If you think there is a better way, or have a sugestion, post a comment and let me know.

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

This entry was posted on Monday, September 14th, 2009 at 04:11 and is filed under Notes. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.


 
 Comments
  1. mk says:
    September 23, 2009 at 20:28

    thanks for the article however this is not working for me…Is there any configuration you have to do in CKeditor?
    I’ve done the following
    1. downloaded ckeditor and extracted it into my webroot /www/ckeditor

    2. I’ve added the jscript helper to my controller
    var $helpers = array(‘Html’, ‘Form’, ‘Javascript’);

    3. Added javasript link to to my view
    $javascript->link(‘/ckeditor/ckeditor’, false);

    4. Verified that my layout (default.ctp) contains the echo $content_for_layout; variable.

    5. Entered the array(‘class’=>’ckeditor’) in my form->input parameters.

    However the same old textarea box appears with no WYSIWYG CKeditor… any thoughts on what I could be doing wrong?

    Thanks!

  2. admin says:
    September 23, 2009 at 23:21

    Hi,
    Do you have any JS errors? Can you check firebug that the files are being incuded? No red 404 errors?

    Check your source and verify the class ckeditor is being added to the textarea and that there is a link to ckeditor.js in the head section.

    I havn’t made any changes at all to the config section.

    Hope that helps, Will

  3. mk says:
    September 23, 2009 at 23:30

    Thanks for reply,
    I wasn’t getting any errors. I got it working though. Had to add the CKEDITOR.replace into my view as show below…

    CKEDITOR.replace( ‘description’ );

    input(‘description’,array(‘label’=>’ADD/EDIT Description’,'class’=>’ckeditor’));?>

    Thanks!

  4. mk says:
    September 23, 2009 at 23:33

    javascript tags didn’t show in my previous post but the CKEDITOR line is surrounded by a script type javascript tag.. and then the “input” is surrounded by php tags and uses cakephp form helper $form->input

  5. admin says:
    September 24, 2009 at 02:33

    Hay, Cool. Glad you got it working. And thanks for updating with the solution that worked for you.

    will

  6. Rafael says:
    September 28, 2009 at 17:55

    Hi, do you know if can i use a set a config to use specific setup, something like use ‘class’=>’ckeditorBasic’ to set field toolbar : ‘Basic’ ?

    Sorry my English, I’m from Brazil.

  7. admin says:
    September 28, 2009 at 23:59

    Hi, You should check out the replaceAll function at the ckeditor docs to specify the toolbar per instance. You can pass a custom config object apparently:

    http://docs.fckeditor.net/ckeditor_api/symbols/CKEDITOR.html

    hth, will

  8. admin says:
    September 29, 2009 at 00:41

    actually, this might be a better method,

    place code like this *after your textarea’s* in the layout

    var editor = CKEDITOR.replace( ‘PageExcerpt’ , {toolbar: ‘Basic’});

    where PageExcerpt is the id of the textarea that you want to specify the toolbar for. Other textare’s will still get the default toolbar.

    how easy is that!!

  9. admin says:
    September 29, 2009 at 00:42

    oh, and obviously specify the toolbar in the config.js file in ckeditor dir:

    config.toolbar_Basic =
    [
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
    ];

  10. robert says:
    October 2, 2009 at 00:46

    Yo lo copie en /www/sibas/app/webroot/js/
    en el controlador var $helpers = array(‘Html’, ‘Form’, ‘Javascript’,'Breakc’);
    en la vista link(‘ckeditor/ckeditor’, false); ?>

    window.onload = function()
    {
    CKEDITOR.replace( ‘data[Item][description]‘ );
    };
    ..
    ..
    echo $form->input(‘description’,array(‘label’=>’Add/Edit Description’,'class’=>’ckeditor’,'rows’ => ‘5′, ‘cols’ => ‘5′));
    ..
    ..

    Y así me funciono salu2 desde Vzla.

  11. admin says:
    October 2, 2009 at 01:31

    i’m guessing you just translated that to spanish? Gracias amigo!

  12. mc says:
    October 20, 2009 at 02:36

    Thanks for the post. It helped me a lot!

    I do have another question. I am loading the editor no problem in the initial load. But later on in the workflow of my website, I fetch information from the server via ajax and I render new forms onto the page, which I would like the textareas inside the ajax loaded forms to have the editor as well. I tried using the above steps but they don’t work. I am just wondering if any has any ideas?

    Thanks.

  13. admin says:
    October 20, 2009 at 03:15

    Hi, Are you calling something like

    CKEDITOR.replace( ‘description’ );

    after you have rendered the form? Where ‘description’ is the name of the textaera to replace. You will need to do this as part of the javascript you write for your AJAX.

  14. mc says:
    October 20, 2009 at 03:55

    it worked! yes i didn’t have the replace because i found that i didn’t need it when the page first renders. and consequently, i forgot to include it when i am rendering through ajax.

    thank you very much for your help!

  15. embeddedprogrammer says:
    January 23, 2010 at 00:46

    Thanks for this. It works great.

  16. Daniel says:
    February 1, 2010 at 05:04

    Hello!

    Thanks for the article. This helped a great deal on my last project. I had the same trouble mk had, but luckily his solution worked for me too :)

  17. yoesoff says:
    February 25, 2010 at 05:11

    Warning (2): link() [function.link]: No such file or directory [APP\views\posts\add.ctp, line 6]
    :(

  18. John M says:
    March 4, 2010 at 03:50

    I have inserted Ckeditor 3.x in my page and i submit my form data (along with the text area) to the controller. I am trying to save data to Mysql database
    but not able to save. I wonder if this is a correct way of doing it.

    Form name = Admin
    Field name = content
    Controller name = Admins
    Modelname = Admin

    Mycontroller code:
    $grn3 = $this->data['Admin']['content'] ;
    $this->Session->setFlash($grn3);
    $this->Admin->set($this->data ); //setting data to model
    $this->Admin->saveField(‘content’, $grn3); //saving single field

    Setflash method flashes the data content, but save is not working. I am not sure if this is the way of saving text editor data to database. Please show me how to save editor data to datatbase.

    Thankx
    John M.

  19. admin says:
    March 4, 2010 at 04:35

    Hi John,

    Yes, you save the data just like any other field.

    So the text from the editor is in the $this->data array? in the format $this->data['Admin']['editorfieldname'] = “lots of html” ?

    if so, you then want to do a $this->Content->save($this->data) to save it. or to use one of the other methods, check out:
    http://book.cakephp.org/view/75/Saving-Your-Data

    Hope that helps.

Leave a Reply