Content text area empty on first send using Tinymce text editor

Question

I have never come across this before which is why I have come to see if anyone can shed some light on why or what is causing this.

Basically I am calling in Tinymce editor using the following html javascript:

<script type="text/javascript">
    jQuery(document).ready(function() {
        tinymce.init({
            selector: "#content",
            theme: "modern",
            plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste imagetools Customlayouts Customshortcodes, autoresize responsivefilemanager"
            ],
            toolbar: "Customlayouts Customshortcodes | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link responsivefilemanager image media | code fullscreen",
            image_advtab: true ,
            relative_urls: false,
            external_filemanager_path:"http://<?php echo $_SERVER['HTTP_HOST']; ?>/Libs/filemanager/",
            filemanager_title:"Responsive Filemanager" ,
            external_plugins: { "filemanager" : "/Libs/filemanager/plugin.min.js"}
        });
    });
</script>       
<div class="form-group">
    <label for="content" class="col-sm-2 control-label">Page Content</label>

    <div class="col-sm-9">
        <textarea id="content" name="content"></textarea>
    </div>
</div> 

So the issue is that on the first time you submit the form it sends nothing which can be seen here:

'type' => string 'sendform' (length=8)
  'name' => string '' (length=0)
  'title' => string '' (length=0)
  'slug' => string '' (length=0)
  'tags' => string '' (length=0)
  'description' => string '' (length=0)
  'content' => string '' (length=0)
  'islive' => string 'false' (length=5)

But if I click the submit button again without doing anything it then sends the content like shown here:

  'type' => string 'sendform' (length=8)
  'name' => string '' (length=0)
  'title' => string '' (length=0)
  'slug' => string '' (length=0)
  'tags' => string '' (length=0)
  'description' => string '' (length=0)
  'content' => string '<p>sdfsdfsdf</p>' (length=16)
  'islive' => string 'false' (length=5)

I am using ajax to send the form which is most likely the issue. Here is my jquery submit:

jQuery(document).ready(function($){
    $('#addnewpage').on('submit', function(e){

        e.preventDefault();

        $.ajax({
            url: "/Applications/Controllers/Pages/ajax-pages.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){

                if(data === 'success'){ 

                    window.location.href = "/Control-Panel/Pages/Manage/?success=added";

                } else {

                    $('#ubl-fail').slideUp(300);
                    $('#ubl-fail').html(data);
                    $('#ubl-fail').delay(350).slideDown(300);
                    window.scrollTo(0, 0);

                }

            }           
        });

    });
});

I do not understand why this is happening I am checking my console log to see if any errors arise but there are none. I have no errors within the html or php side of it also. Especially considering at the moment on the php side I am simply doing this:

var_dump($_POST);

Anyway that is the issue and I would be very thankful if anyone could shed some light on why this is happening.

Thanks

Answer 1

Add this script...

<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
    tinymce.init({mode : "specific_textareas", editor_selector : "myTextEditor",    theme: "modern",    theme_advanced_fonts : "Andale Mono=andale mono,times; "+                "Arial=arial,helvetica,sans-serif; "+                "Arial Black=arial black,avant garde; "+                "Book Antiqua=book antiqua,palatino; "+                "Comic Sans MS=comic sans ms,sans-serif; "+                "Courier New=courier new,courier; "+                "Georgia=georgia,palatino; "+                "Helvetica=helvetica; "+                "Impact=impact,chicago; "+                "Symbol=symbol; "+                "Tahoma=tahoma,arial,helvetica,sans-serif; "+                "Terminal=terminal,monaco; "+                "Times New Roman=times new roman,times; "+                "Trebuchet MS=trebuchet ms,geneva; "+                "Verdana=verdana,geneva; "+                "Webdings=webdings; "+                "Wingdings=wingdings,zapf dingbats",    plugins: [        "advlist autolink lists link image charmap print preview hr anchor pagebreak",        "searchreplace wordcount visualblocks visualchars code fullscreen",        "insertdatetime media nonbreaking save table contextmenu directionality",        "emoticons template paste textcolor colorpicker textpattern"    ],    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",    toolbar2: "fontselect |  forecolor backcolor emoticons",    image_advtab: true,    templates: [        {title: 'Test template 1', content: 'Test 1'},        {title: 'Test template 2', content: 'Test 2'}    ]});
</script>

Answer 2

I had the same issue. It turned out all I had to do was adding tinyMCE.triggerSave() before submitting.

$('#addnewpage').on('submit', function(
    tinyMCE.triggerSave();
    $('form#document-form').submit();
});