How to integrate Google Picker with TinyMCE?

Question

I am using the latest version of TinyMCE and I would like to integrate Google Drive Picker whenever an user clicks on Insert Image.

From the TinyMCE documentation I saw that I should use the file_browser_callback parameter but I am stuck with a couple of problems. First of all, I managed to attach the Google Picker but the Insert Image popup stays on top and there's no way for me to select a file. Even if I solve this problem, how can I set the textbox value from the Google Picker callback function? Below you can see my code, Google Picker code is pretty standard so I won't paste it.

var picker;

tinymce.init({
    //other init parameters...
    file_browser_callback: function(field_name, url, type, win) {
        picker.setVisible(true);
        win.document.getElementById(field_name).value = 'my browser value';
    }
});

function createPicker() {
    // Here I build the Picker...
    // var picker = ...
}

function pickerCallback(data) {
    //TODO: Find a way to set textbox value with the URL of the Image selected from Drive
}

Answer 1

I think you can hide the modal when you call createPicker():

function createPicker() {
  document.getElementById('modal_id').style.display = 'none';
  // your picker code here!
}

and then display it back once you get the callback i.e. pickerCallback(data):

function pickerCallback(data) {
  document.getElementById('modal_id').style.display = 'block';
  var url = 'nothing';
  if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
    var doc = data[google.picker.Response.DOCUMENTS][0];
    url = doc[google.picker.Document.URL];
  }
  // set the input text value with the URL:
  document.getElementById('source_input_id').value = url;
}

Change modal_id to your modal's div id and source_input_id with your source input field's id.