I have a problem with TinyMCE. In my application based on CakePHP v3 I have a form to add loyalty tasks. There is a field which uses tinymce to describe task.

So the problem is when I fill the form with data and click on submit button nothing happen. What is more there is the form to edit tasks too and it works perfectly(is exactly the same). No custom JS is added for problematic form.

I know that TinyMCE with require on textarea cause the problem, because when I disable required it works perfectly.

Some code:
TinyMCE initialization:

tinymce.init({
    selector: 'textarea.tinymce',
    height: 500,
    plugins: [
        "advlist autolink link image lists charmap preview hr anchor image",
        "wordcount visualblocks visualchars fullscreen insertdatetime nonbreaking",
        "table paste"
    ],
    toolbar1: "undo redo cut copy paste | bold italic underline strikethrough subscript superscript | alignleft aligncenter alignright alignjustify | table",
    toolbar2: "formatselect | outdent indent | bullist numlist | blockquote link unlink charmap hr image | preview",
    menubar: false,
    content_css: [
        '//www.tinymce/css/codepen.min.css'
    ]
});

Form(removed few elements):

<?= $this->Form->create(null, ['enctype'=>'multipart/form-data']); ?>
<div class="col-xs-12">
    <div class="form-group">
        <label>Tytuł</label>
        <input type="text" name="title" class="form-control" required="required"/>
    </div>
</div>
//additional elements
<div class="col-xs-12">
    <div class="form-group">
        <label>Treść zadania</label>
        <textarea name="task" class="form-control tinymce" required="required"></textarea>
    </div>
    <input type="submit" class="" value="Dodaj"/>
</div>
<?= $this->Form->end(); ?>

Used version of TinyMCE: 4.6.4(newest)

I have a problem with TinyMCE. In my application based on CakePHP v3 I have a form to add loyalty tasks. There is a field which uses tinymce to describe task.

So the problem is when I fill the form with data and click on submit button nothing happen. What is more there is the form to edit tasks too and it works perfectly(is exactly the same). No custom JS is added for problematic form.

I know that TinyMCE with require on textarea cause the problem, because when I disable required it works perfectly.

Some code:
TinyMCE initialization:

tinymce.init({
    selector: 'textarea.tinymce',
    height: 500,
    plugins: [
        "advlist autolink link image lists charmap preview hr anchor image",
        "wordcount visualblocks visualchars fullscreen insertdatetime nonbreaking",
        "table paste"
    ],
    toolbar1: "undo redo cut copy paste | bold italic underline strikethrough subscript superscript | alignleft aligncenter alignright alignjustify | table",
    toolbar2: "formatselect | outdent indent | bullist numlist | blockquote link unlink charmap hr image | preview",
    menubar: false,
    content_css: [
        '//www.tinymce./css/codepen.min.css'
    ]
});

Form(removed few elements):

<?= $this->Form->create(null, ['enctype'=>'multipart/form-data']); ?>
<div class="col-xs-12">
    <div class="form-group">
        <label>Tytuł</label>
        <input type="text" name="title" class="form-control" required="required"/>
    </div>
</div>
//additional elements
<div class="col-xs-12">
    <div class="form-group">
        <label>Treść zadania</label>
        <textarea name="task" class="form-control tinymce" required="required"></textarea>
    </div>
    <input type="submit" class="" value="Dodaj"/>
</div>
<?= $this->Form->end(); ?>

Used version of TinyMCE: 4.6.4(newest)

• javascript
• php
• cakephp
• tinymce

• Your textarea doesn't contain anything when you click submit and therefore the browser validation kicks in. I think in this case you would need some custom js validation happening for TinyMce editor window. stackoverflow./questions/16450499/… – Morpheus Commented Jul 12, 2017 at 10:18

2 Answers 2

Thanks for fast replies, but I found answer by myself on tinymce support forum.

For others who will have this problem: just add code below to your tinyMCE initialization.

setup: function (editor) {
    editor.on('change', function (e) {
        editor.save();
    });
}

Your edit form might be the same as your add form, but in case of edit you will have some data in required fields, so required option will not cause any problems. In add form there is opposite situation - you have empty field, and validation fails. To solve this, you can remove required="required" from tinymce input, and do additional validation - either in js on client side, or in cakephp table class on server.