TinyMCE editor does not update on the go

Question

I have an HTML form with tinyMCE editor, in which the form has the option to upload an image using a button that, when clicked, sends the file to ajax, which then sends the value to the controller and loads the image, I got here and it works. After uploading the image, I want it to be added to an editor that was not there. My javascript:

$('#uploadImageOnTheFly').click(function() { var photo = document.getElementById('photo'); var formData = new FormData(); formData.append('photo', photo.files[0], photo.value); var editorvalue = $('#textbody').val(); $.ajax({ type: 'POST', url: '/admin/uploadPhotoForTemplate', data: formData, contentType: false, processData: false, success: function (data) { var parsed = JSON.parse(data); if(parsed.status === 'success') { var body = $('#textbody'); html = '<img src="' +parsed.url +'">'; body.prepend(html); } } }); }); 

My HTML form:

 <div class="form-wrap"> <div class="panel panel-body"> <form method="POST" action="http://127.0.0.1/admin/infringing/email/templates/show/1" accept-charset="UTF-8"><input name="_token" type="hidden" value="vsKR2MtkUxpTI7ku97Hsknz8RurV4ioQeJLkA9NP"> <div class="form-group"> <label for="name">Name</label> <input class="form-control" name="name" type="text" value="Alibaba edited" id="name"> </div> <div class="form-group"> <label for="email">Email</label> <input class="form-control" name="email" type="text" value=" [e-mail] " id="email"> </div> <div class="form-group"> <label for="subject">Subject</label> <input class="form-control" name="subject" type="text" value="Testing" id="subject"> </div> <div class="form-group"> <div class="input-group"> <input type="file" id="photo"> <span class="input-group-btn"> <button type="button" id="uploadImageOnTheFly" class="btn btn-info">Upload</button> </span> </div> </div> <textarea style="min-height: 400px;" name="body" id="textbody">Data fetched from database goes here ...</textarea> <br/> <div class="form-group"> <input type="submit" value="Save" class="btn btn-success"> <button type="button" class="btn btn-danger">Cancel</button> </div> </form> </div> </div> 

and my laravel controller:

 public function upload() { if(Input::hasFile('photo')) { $allowedext = ["png", "jpg", "jpeg", "gif"]; $photo = Input::file('photo'); $destinationPath = public_path() . '/uploads/templates'; $filename = str_random(12); $extension = $photo->getClientOriginalExtension(); if(in_array($extension, $allowedext)) { Input::file('photo')->move($destinationPath, $filename . '.' . $extension); } else { return json_encode('File format not supported'); } return json_encode(['status' => 'success', 'url' => '/uploads/templates/' . $filename . '.' . $extension]); } else { return json_encode(['status' => 'failure']); } } 

EDIT tinyMCE call script

 <script type="text/javascript" src="/tinymce/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", plugins: [ "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker", "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", "table contextmenu directionality emoticons template textcolor paste fullpage textcolor" ], toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect", toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor", toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft", menubar: false, toolbar_items_size: 'small', style_formats: [ {title: 'Bold text', inline: 'b'}, {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, {title: 'Example 1', inline: 'span', classes: 'example1'}, {title: 'Example 2', inline: 'span', classes: 'example2'}, {title: 'Table styles'}, {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} ], templates: [ {title: 'Test template 1', content: 'Test 1'}, {title: 'Test template 2', content: 'Test 2'} ] });</script> 

Most likely the problem is line 18-23 in javascript

Answer 1

You add an image element to the original tinymce element instead of an editor. Try using this for ajax success:

 success: function (data) { var parsed = JSON.parse(data); if(parsed.status === 'success') { // gets the editor body var editor = tinymce.get('textbody'); // create the image tag as a string var html = '<img src="' +parsed.url +'">'; // insert the image at the caret position of the editor editor.execCommand('insertHTML', false, html); } } 

Answer 2

Try adding the setup block for the init script.

 <script type="text/javascript"> tinymce.init({ selector: "textarea", plugins: [ "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker", "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", "table contextmenu directionality emoticons template textcolor paste fullpage textcolor" ], toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect", toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor", toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft", menubar: false, toolbar_items_size: 'small', style_formats: [ {title: 'Bold text', inline: 'b'}, {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, {title: 'Example 1', inline: 'span', classes: 'example1'}, {title: 'Example 2', inline: 'span', classes: 'example2'}, {title: 'Table styles'}, {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} ], templates: [ {title: 'Test template 1', content: 'Test 1'}, {title: 'Test template 2', content: 'Test 2'} ], setup: function(ed) { ed.on('change', function(e) { tinyMCE.triggerSave(); }); } });