TinyMCE file_picker_callback डिफ़ॉल्ट ब्राउज़र फ़ाइल चयन से छवि का चयन करें

Question

मैं एक परियोजना में TinyMCE का उपयोग कर रहा हूं और उपयोगकर्ता को अपनी डिफ़ॉल्ट सम्मिलित छवि विंडो का उपयोग कर सर्वर पर छवियों को चुनने और अपलोड करने के लिए चाहता हूं।

ओपन ब्राउज़र डिफ़ॉल्ट फ़ाइल का चयन करें खिड़की और संपादक के लिए चयनित छवि को जोड़ने: अब तक

मेरे कोड

मैं निम्न बटन क्लिक करना चाहते हैं निम्नानुसार है ..

जेएस:

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> 

परिवर्तन किस तरह मैं आदेश चयनित फ़ाइल हो और संपादक में जोड़ने के लिए में file_picker_callback घटना के लिए करना चाहिए?

Answer 1

एक ही समस्या थी की कोशिश करो। निम्नलिखित के लिए इसे मेरे लिए तय करना, याद रखें कि ब्राउज़र को FileReader का समर्थन करना होगा (अन्यथा बस अपनी खुद की स्क्रिप्ट डालें)।

एचटीएमएल (HTML पृष्ठ पर इस कहीं भी रख):

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

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

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