Add CKEditor to CakePHP with model validation

Yesterday I had a very frustrating issue implementing CKEditor (an awesome open-source WYSIWYG editor) in a CakePHP 2.3.2 installation. I thought the issue had something to do with CakePHP … ow boy, was I wrong 🙂

CakePHP has been supporting HTML5 elements for a while now and when you generate form elements by using the FormHelper class it automatically adds the required attribute. What I didn’t know was that this triggers a ‘Please fill out this field’ message in certain browsers (Chrome 26 / Firefox 20, Safari 6 ignores this) when these fields are empty.

When you use CKEditor this raises an issue as CKEditor hides the textarea, so the input field will always be empty and always trigger this internal (browser-dependant) error message.  Because my custom validation messages where practically the same as the internal one it was quite frustrating to find out the solutions was so simple!

Adding CKEditor to a CakePHP installation is a walk in the park.

  • Download the latest version of CKEditor
  • Expand the zip file in cake_installation_path/app/webroot/js
  • Load the CKEditor javascript files for example in your default.ctp layout

  • Add the class HTML attribute to your textarea and set its value to ‘ckeditor‘ which you want to convert into a CKEditor

In my case, I added some validation rules to my model.  This is also quite easy to do … just fill up the validates array with some rules.

Try to load the project right now, you will see that your textarea is replaced by a CKEditor instance. If you try to save your record in Firefox or Chrome you will see the internal error message (Please fill out this field.). Now fill in some dummy data in the CKEditor and try to save again. You will see the internal error message again (try it in Safari and the form will be POSTED as expected). This is logical as the original textarea has been hidden by the CKEditor, but the required attributes block the POST of the form (check the browser source).

You can easily fix this by setting the required field to false on your input element.

Once you did this, you can try to save your record again. Now you will get the desired result.  As you will see the fields will still be required (your label before your input field will be bold and you’ll see a red asteriks). You can control this by setting the allowEmpty and/or required fields on your validation array.

The allowEmpty key means that the field should not be empty.  Set this to true if you want the label to appear in a regular font (not bold).
The required key means that the field name needs to be around in your request.

I’ve added the sample code on Github. So you can download it right here!

  • Vijay

    You saved hell lot of frustration , thanks

  • great dear it is working………….. thank you

  • You saved my life today ! God Bless You! 😉
    Thanks !

  • Three days of frustration ended up with THIS. So you pretty much put an end to a horrid week. Thanks!

  • Balambi

    This helped immensely .. thanks a mil !!!

  • vladimir

    Great post thank’s.

  • Valery

    thanks man!

  • This could be start if you want to build a custom CMS

  • JOI

    great, its working like a charm !!

    thank you 🙂

  • Just want to let you know that you don’t need to wrap ‘notEmpty’ in an array for your validation. Will save you some keystrokes 🙂

  • Hey thanks for great help, somehow sample code from github is not working.

    • I’ve just updated the code on github, it now works again with the latest version of cakephp (2.4.1).

  • Graham

    This doesn’t appear to work anymore. Changing the class to ckeditor results in a blank area where the textarea should be.

    • I’ve just updated the code on github, it now works again with the latest version of cakephp (2.4.1).

  • utkarsh sahu

    When I try to inpur some value using ckeditor, values are going with p tag into the database. (like this- my comment) Is there something wrong which I am doing? Please Help me

  • no that’s normal, otherwise when you retrieve your data you would loose your style markup!

  • Jondolar

    This works until I try to submit the form via javascript using jQuery.
    echo $this->Js->submit(‘Save JS’, array(…

    If I switch the form to use a normal Form->submit() it works fine.

    Any thoughts?

    Thanks,

  • dhalsim

    Thanks for the post!

    Here it wasn’t working on CakePHP 2.4.3 and CKEditor 4.3.1 when I was trying a simple example, so I realized it is obligatory to put an ‘id’ attribute.

    I hope it help someone.

  • joe

    Thank you very much Sir

  • Chhaihong Srun

    With CakePHP 2.4.3
    When I view it show with html like this.
    Hi!My name is Chhaihong Srun.Yeah!Yo! Yo!Nothing!Bla BlaBla BlaBla Bla

    How to view without html?

  • manjeet kumar

    thanks. its working……

  • Kirti

    Thank you 🙂

  • jerome

    If you’re using model validation, you can turn off browser / HTML5 validation with the following form idiom:

    $this->create->form(‘Model’,array(‘novalidate’=>true));

    Source:
    http://book.cakephp.org/2.0/en/core-libraries/helpers/form.html.
    Look under ‘Creating Form Elements’ caption on the page.

    Cheers!

  • rael

    How to do this on a varchar data field?

    • you can do this by using


      echo $this->Form->input('your_field', array(
      'required' => false));

  • rael

    thanks 🙂

  • May Dara

    it is really nice with text editor. I love it. yet I still have problem with showing content which so , , …. . So if you don’t mind, please tell me the way to show text with correct way.

  • it

    ethod CkHelper::input does not exist
    ckhelper not found
    solvve this fast..plz thanks