CODEWITHSUNDEEP
cakephptinymce
Suba
Suba

Reputation: 69

TinyMCE: cake php plugin [ cannot submit form ]

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

Answers (1)

ndm
ndm

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

Related Questions