Загрузить изображение после урожая в tinymce 4

Question

Я работаю над tinymce, и я реализовал imagetools. Теперь, когда изображение вставляется в текстовый редактор, а затем я редактирую/обрезаю изображение, он меняет изображение src на что-то вроде blob:www.localhost/asdf-ghij.

Я хочу, чтобы после обрезки я мог отправить этот URL-адрес моему сценарию php, чтобы сохранить это изображение на своем сервере. Но я понятия не имею о событии/функции, которую я должен использовать.

вот мой код:

tinymce.init({ 
    selector:'textarea', 
    plugins:[ 
     'advlist autolink lists link image imagetools charmap print preview anchor', 
     'searchreplace visualblocks code fullscreen', 
     'insertdatetime media table contextmenu paste code' 
    ], 
    toolbar:'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code', 
    height:300, 
    imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions", 
    automatic_uploads: false, 
    remove_script_host : false, 
    convert_urls : false, 
    relative_urls : false, 
    setup: function (editor) { 
     editor.on('change', function() { 
      editor.save(); 
     }); 
    }, 
    file_browser_callback_types: 'file image media', 
    file_browser_callback: function(field_name, url, type, win) { 
     tinymce.activeEditor.windowManager.open({ 
      title: 'Browse Image', 
      file: '/admin/images/show-images', 
      width: 1200, 
      height:400, 
      resizable : "yes", 
      close_previous : "no", 

      buttons: [{ 
       text: 'Insert', 
       classes: 'widget btn primary first abs-layout-item', 
       disabled: false, 
       onclick: 'close' 
      }, { 
       text: 'Close', 
       onclick: 'close', 
       window : win, 
       input : field_name 
      }] 
     }, { 
      oninsert: function(url) { 
       win.document.getElementById(field_name).value = url; 
      } 
     }); 
     return false; 
    } 
}); 

Все работает отлично. кроме проблемы, о которой я говорил.

Answer 1

Хорошо, поэтому я понял.

Все, что мне оставалось, было установлено automatic_uploads:true. и осуществить images_upload_handler.

Он автоматически загрузит изображение, которое вы отредактируете. В ответ требуется новый URL-адрес.

Вот код на тот случай, если кто-то нуждается в дальнейшем обращении.

tinymce.init({ 
    selector:'textarea', 
    plugins:[ 
     'advlist autolink lists link image imagetools charmap print preview anchor', 
     'searchreplace visualblocks code fullscreen', 
     'insertdatetime media table contextmenu paste code' 
    ], 
    toolbar:'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code', 
    height:300, 
    imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions", 
    automatic_uploads: true, 
    remove_script_host : false, 
    convert_urls : false, 
    relative_urls : false, 
    setup: function (editor) { 
     editor.on('change', function() { 
      editor.save(); 
     }); 
    }, 
    file_browser_callback_types: 'file image media', 
    file_browser_callback: function(field_name, url, type, win) { 
     tinymce.activeEditor.windowManager.open({ 
      title: 'Browse Image', 
      file: '/admin/images/show-images', 
      width: 1200, 
      height:400, 
      resizable : "yes", 
      close_previous : "no", 

      buttons: [{ 
       text: 'Insert', 
       classes: 'widget btn primary first abs-layout-item', 
       disabled: false, 
       onclick: 'close' 
      }, { 
       text: 'Close', 
       onclick: 'close', 
       window : win, 
       input : field_name 
      }] 
     }, { 
      oninsert: function(url) { 
       win.document.getElementById(field_name).value = url; 
      } 
     }); 
     return false; 
    }, 
    images_upload_handler: function(blobInfo, success, failure){ 
     var xhr, formData; 
     xhr = new XMLHttpRequest(); 
     xhr.withCredentials = false; 
     xhr.open('POST','/admin/images/upload-blob'); 
     xhr.onload = function() { 
      var json; 
      if (xhr.status != 200) { 
       failure('HTTP Error: ' + xhr.status); 
       return; 
      } 
      json = JSON.parse(xhr.responseText); 
      success(json.url); 
     }; 
     formData = new FormData(); 
     formData.append('file', blobInfo.blob(), blobInfo.filename()); 
     xhr.send(formData); 
    } 
}); 

Answer 2

Изменение automatic_uploads к истинному и добавить images_upload_url будет делать:

tinymce.init({ 
    selector:'textarea', 
    automatic_uploads: true, 
    images_upload_url: 'postAcceptor.php' 
}); 

Новые созданные образы получат файловые имена, как 'imagetools0.jpg', 'imagetools1.jpg' и т.д.

NB Источник для postAcceptor.php можно найти на странице PHP Upload Handler веб-сайта TinyMCE.