How to integrate Google Picker with TinyMCE?

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
}

Answers


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.


Need Your Help

WinRT XAML ComboBox opens in middle of list

c# xaml combobox windows-runtime behavior

So one particular behavior of the XAML combobox in WinRT is causing me a huge headache, because my client sees it as a defect, and doesn't care if it's the behavior of the control, he wants it chan...

Foreign-key mongoose

sql node.js mongodb mongoose uml

I begin with mongoose and I want to know how to do this type of configuration :

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.