Reputation: 69
I use https://github.com/CakeDC/TinyMCE to download plugin and did follow all the step to integrate on my cakePHP project. so right now, all the textarea was successfully changed to tinyMCE editor
But when click "SUBMIT" to submit my form, page cannot submit and post data. Without loading editor my form can submit and post data.
Is any jquery problem ? please advise me.
thank you.
Bootsrab.php
CakePlugin::load('TinyMCE');
Configure::write('TinyMCE.editorOptions', array('width' => '500px','height'=>'250px' ));
Controller:
public $helpers=array('Html','Form','TinyMCE.TinyMCE');
View:
$this->TinyMCE->editor(array('theme' => 'advanced', 'mode' => 'textareas'));
echo $this->Form->input('user_requirements',array('required'=>true) );
Layout : default loding js file:
echo $this->Html->script(array('ddsmoothmenu','jquery-1.7.1.min','jquery-ui-1.8.17.custom.min'));
Upvotes: 0
Views: 1492
Reputation: 60503
You've set the field to be required
, so the problem you are experiencing is probably the browser based form validation.
The problem is that the validation applies before TinyMCE injects the contents into the textarea, and so the validation will always fail as the textarea is empty. This is a very long known "bug" btw:
http://www.tinymce.com/develop/bugtracker_view.php?id=4768 http://www.tinymce.com/develop/bugtracker_view.php?id=5671
In Firefox you might notice a validation bubble that appears "behind" the browser in the bottom left corner of the screen, and in Chrome for example it would throw the following error: "An invalid form control with name='...' is not focusable".
The quick and dirty fix would be to set required
to false
. In order to keep the required
class on the generated container div
you would have to set this manually using the div
option:
'div' => array('class' => 'input text required')
It's also possible to disable browser validation completely by defining the novalidate
attribute on the form:
$this->Form->create('ModelName', array('novalidate' => true));
or using the formnovalidate
attribute on the submit button:
$this->Form->submit('Submit', array('formnovalidate' => true));
Theoretically it would also be possible to listen to the invalid
event and display custom validation bubbles, but the problem here is that the browser behavior is not consistent, ie in Chrome it's not possible to validate invisible (using display
or visibility
) fields. Also the content would still be missing in the textarea field.
What seems to work is using opacity
to hide the field, that way one could position the textarea under the editor, and the validation bubble would be displayed correctly. However that would also require to inject the editor contents in the textarea manually when pressing Enter and when clicking the submit button (or probably even simpler using proper editor change events). I'll see if I can come up with an example for this later on.
Update: I've implemented a fix/workaround in form of a TinyMCE 4.x plugin, as this was bugging me in some of my own applications too, see https://github.com/ndm2/tinymce-validatable
Upvotes: 1