upload image from local into tinyMCE

Question

tinyMCE has an insert image button, but how to handle its functionality pls give some code

Answer 1

I know it is an old question. However, I think this answer may help somebody who wants to upload multiple images by using tinyMCE 5.xx. Based on @Chris Lear's and @stephen.hanson's answer, I modify some code to support multiple images uploading. Here is my code. Hope it could help somebody.

tinymce.init({
toolbar: 'imageupload',
setup: function(editor) {
  initImageUpload(editor);
  }
});

function initImageUpload(editor) {
// create input and insert in the DOM
 var inp = $(`<input id='tinymce-uploader' type='file' name='pic' accept='image/*' style='display:none' multiple>`);
  $(editor.getElement()).parent().append(inp);
// add the image upload button to the editor toolbar
  editor.addButton('imageupload', {
  text:'IMAGE',
  onAction: function(_) { 
 // when toolbar button is clicked, open file select modal
    inp.trigger('click');
  }
});
 // when a file is selected, upload it to the server
inp.on('change',function(){
    for(let i=0;i<inp[0].files.length;i++){
        let file = inp[0].files[i];
        let data = new FormData();
        data.append('multipartFile',file);
        axios.post('/upload/image/url',
        data,
        {
         headers: {
          'Content-Type': 'multipart/form-data'
          }
         }).then(res => {
          if (res.status = 200) { 
              editor.insertContent('<img class="content-img" src="' + data.url + '"/>');
             // clear data to avoid uploading same data not working in the second time
             inp.val('');
          }
      })
  }

Answer 2

I know this post is old, but maybe this will help someone trying to find a open source file manager for tinymce:

https://github.com/2b3ez/FileManager4TinyMCE

This worked great for me.