如何将Google Picker与TinyMCE集成？

Question

我使用的是最新版本的TinyMCE，我想在用户点击“插入图片”时集成Google Drive Picker。

从TinyMCE文档中我看到我应该使用file_browser_callback参数，但我遇到了一些问题。首先，我设法附加Google Picker，但插入图像弹出窗口仍然位于顶部，我无法选择文件。即使我解决了这个问题，如何设置Google Picker回调函数的文本框值？下面你可以看到我的代码Google Picker code is pretty standard，所以我不会粘贴它。

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

我认为你可以在致电createPicker()时隐藏模态：

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

然后在收到回调后显示回来，即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;
}

使用您的来源输入字段的ID将modal_id更改为您的模态的div ID和source_input_id。