tinyMCE編輯器沒有實時更新

Question

我有一個帶有tinyMCE編輯器的HTML表單，它具有一個圖像上傳選項和一個按鈕，點擊後將文件發送到ajax，然後將該值發佈到控制器並上傳圖像，我很好，直到這裏，一切都在工作。我想要的是一旦圖像上傳完畢，它應該被追加到編輯器中，但這並沒有發生。我的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); 
     } 
    } 
}); 
}); 

我的HTML表單：

<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="contact@alibaba.com" 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> 

和我laravel控制器：

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']); 
    } 
} 

編輯 tinyMCE的調用腳本

<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> 

最有可能的問題是在javascript的第18-23行之間

Answer 1

您要添加的圖像元素TinyMCE的源元素，而不是編輯。嘗試使用這個Ajax的成功：

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

嘗試爲初始化腳本添加setup塊。

<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(); 
     }); 
    } 
});