TinyMCE file_picker_callback Wählen Sie ein Bild aus der Standard-Browser-Dateiauswahl

Question

Ich verwende TinyMCE in einem Projekt und möchte, dass der Benutzer Bilder auf dem Server auswählt und hochlädt.

Ich möchte folgende Schaltfläche klicken:

Öffnen Sie den Browser Standard-Dateiauswahlfenster und fügen Sie das ausgewählte Bild an die Redaktion:

Mein Code so weit ist wie folgt ..

JS:

tinymce.init({ 
     selector: '#html-editor', 
     language: 'pt_PT', 
     plugins: [ 
      "bdesk_photo advlist autolink link image lists charmap preview hr anchor pagebreak", 
      "searchreplace wordcount visualblocks visualchars code media nonbreaking", 
      "table contextmenu directionality paste textcolor colorpicker imagetools" 
     ], 
     add_unload_trigger: false, 
     toolbar: "styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media preview | forecolor backcolor table", 
     image_advtab: true, 

     file_picker_callback: function (callback, value, meta) 
     { 
      $('#html-editor input').click(); 

      //how to get selected image data and add to editor? 
     }, 

     paste_data_images: true, 
     images_upload_handler: function (blobInfo, success, failure) 
     { 
      // no upload, just return the blobInfo.blob() as base64 data 
      success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64()); 
     } 
    }); 

HTML:

<div id="html-editor"> 
    <input name="image" type="file" style="width:0;height:0;overflow:hidden;"> 
</div> 

Welche Änderungen muss ich an die file_picker_callback Ereignis machen, um die ausgewählte Datei und fügen Sie ihn in den Editor zu bekommen?

Answer 1

hatte das gleiche Problem. Wenn Sie Folgendes für mich festlegen, denken Sie daran, dass der Browser FileReader unterstützen muss (andernfalls fügen Sie einfach ein eigenes Skript ein).

html (setzen Sie diese überall auf der HTML-Seite):

<input id="my-file" type="file" name="my-file" style="display: none;" onchange="" /> 

js (in der tinymce init config):

file_picker_callback: function (callback, value, meta) { 
    if (meta.filetype == 'image') { 
     var input = document.getElementById('my-file'); 
     input.click(); 
     input.onchange = function() { 
      var file = input.files[0]; 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       callback(e.target.result, { 
        alt: file.name 
       }); 
      }; 
      reader.readAsDataURL(file); 
     }; 
    } 
} 

Answer 2

Versuchen

var imageFilePicker = function (callback, value, meta) {    
    tinymce.activeEditor.windowManager.open({ 
     title: 'Image Picker', 
     url: '/images/getimages', 
     width: 650, 
     height: 550, 
     buttons: [{ 
      text: 'Insert', 
      onclick: function() { 
       //.. do some work 
       tinymce.activeEditor.windowManager.close(); 
      } 
     }, { 
      text: 'Close', 
      onclick: 'close' 
     }], 
    }, { 
     oninsert: function (url) { 
      callback(url); 
      console.log("derp"); 
     }, 
    }); 
}; 


tinymce.init({ 
    selector: 'div#html-editor', 
    height: 200, 
    theme: 'modern', 
    plugins: [ 
    'advlist autolink lists link image charmap print preview hr anchor pagebreak', 
    'searchreplace wordcount visualblocks visualchars code fullscreen', 
    'insertdatetime media nonbreaking save table contextmenu directionality', 
    'emoticons template paste textcolor colorpicker textpattern imagetools' 
    ], 
    toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', 
    toolbar2: 'print preview media | forecolor backcolor emoticons', 
    image_advtab: true, 
    paste_data_images: true, 
    automatic_uploads: true, 
    file_picker_callback: function(callback, value, meta) { 
    imageFilePicker(callback, value, meta); 
    } 
});