如何將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; 
} 

更改modal_id給你r模態的div ID和source_input_id與您的源輸入字段的ID。