I use TinyMCE 4 and this is my code for it:

<script type="text/javascript" src="//cdn.tinymce/4/tinymce.min.js"></script>
<script>
       tinymce.init({
         selector: 'textarea[name=content]',
         plugins: 'image code',
         toolbar: 'undo redo | link image | code',
         image_title: true, 
         automatic_uploads: true,
         file_picker_types: 'image', 
         file_picker_callback: function(cb, value, meta) {
           var input = document.createElement('input');
           input.setAttribute('type', 'file');
           input.setAttribute('accept', 'image/*');
           input.onchange = function() {
             var file = this.files[0];
             var reader = new FileReader();
             reader.onload = function () {
             var id = 'blobid' + (new Date()).getTime();
             var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
             var base64 = reader.result.split(',')[1];
             var blobInfo = blobCache.create(id, file, base64);
             blobCache.add(blobInfo);
             cb(blobInfo.blobUri(), { title: file.name });
           };
           reader.readAsDataURL(file);
         };
         input.click();
       }
     });  
</script>

and I have one problem. When I click on the "submit" button, the form isn' t send but in web browser console I have error: "An invalid form control with name='content' is not focusable."

Please can you help me, how can I solve this problem simply? For all advice thanks in advance.

I use TinyMCE 4 and this is my code for it:

<script type="text/javascript" src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
       tinymce.init({
         selector: 'textarea[name=content]',
         plugins: 'image code',
         toolbar: 'undo redo | link image | code',
         image_title: true, 
         automatic_uploads: true,
         file_picker_types: 'image', 
         file_picker_callback: function(cb, value, meta) {
           var input = document.createElement('input');
           input.setAttribute('type', 'file');
           input.setAttribute('accept', 'image/*');
           input.onchange = function() {
             var file = this.files[0];
             var reader = new FileReader();
             reader.onload = function () {
             var id = 'blobid' + (new Date()).getTime();
             var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
             var base64 = reader.result.split(',')[1];
             var blobInfo = blobCache.create(id, file, base64);
             blobCache.add(blobInfo);
             cb(blobInfo.blobUri(), { title: file.name });
           };
           reader.readAsDataURL(file);
         };
         input.click();
       }
     });  
</script>

and I have one problem. When I click on the "submit" button, the form isn' t send but in web browser console I have error: "An invalid form control with name='content' is not focusable."

Please can you help me, how can I solve this problem simply? For all advice thanks in advance.

• javascript
• tinymce
• tinymce-4

• Add your html, please – Petrashka Siarhei Commented Feb 17, 2018 at 5:33
• Please, can you describe what do you mean? – michal s Commented Feb 17, 2018 at 5:44
• Where are you set your texarea with [name=content]? – Petrashka Siarhei Commented Feb 17, 2018 at 13:39
• <textarea name="content" required="required"><?= $review['content'] ?></textarea> in the same file, as is tinymce editor. – michal s Commented Feb 17, 2018 at 20:21

2 Answers 2

The issue comes from tinymce hiding the textarea. Remove the required attribute and it should be fixed!

I've been around this issue for a couple of hours and posting via Ajax the TinyMCE data from the textarea field always arrived null at the controller.

Solved by changing just one bit of the ajax request from dataType: "json", to dataType: "jsonp",. Note that by adding the p in dataType was the solution.

Hope it helps anybody experiencing the same issue.