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
echo $this->Html->script('ckeditor/ckeditor');- Add the class HTML attribute to your textarea and set its value to ‘ckeditor‘ which you want to convert into a CKEditor
// using the CakePHP form helper
echo $this->Form->textarea('biography', array(
'class' => 'ckeditor'
));
// using the CakePHP form helper (database field needs to be TEXT)
echo $this->Form->input('biography', array(
'class' => '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.
public $validate = array(
'firstname' => array(
'notempty' => array(
'rule' => array('notempty'),
),
),
'lastname' => array(
'notempty' => array(
'rule' => array('notempty'),
),
),
'biography' => array(
'notempty' => array(
'rule' => array('notempty'),
),
),
);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).
<div class="input textarea required">
<label for="PersonBiography">Biography</label>
<textarea id="PersonBiography" class="ckeditor" required="required" rows="6" cols="30" name="data[Person][biography]" style="visibility: hidden; display: none;"></textarea>
<div id="cke_PersonBiography" class="cke_1 cke cke_reset cke_chrome cke_editor_PersonBiography cke_ltr cke_browser_gecko" lang="en" aria-labelledby="cke_PersonBiography_arialbl" role="application" dir="ltr">
</div>You can easily fix this by setting the required field to false on your input element.
echo $this->Form->input('biography', array(
'required' => false,
'class' => 'ckeditor'
));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!
28 Responses
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!
This helped immensely .. thanks a mil !!!
Great post thank’s.
thanks man!
This could be start if you want to build a custom CMS
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).
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).
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!
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,
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.
Thank you very much Sir
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?
thanks. its working……
Thank you đ
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!
How to do this on a varchar data field?
you can do this by using
echo $this->Form->input('your_field', array(
'required' => false));
thanks đ
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.
ethod CkHelper::input does not exist
ckhelper not found
solvve this fast..plz thanks