ckeditor - 瀏覽服務器按鈕調用的函數不會彈出如何？

Question

香港專業教育學院創建了CKEditor的文件瀏覽器..有它在彈出開放是在極端凌亂..

我怎麼能扎入瀏覽服務器上的點擊事件而推出的文件瀏覽器莫代爾等

基本上看着像

config.filebrowserClick = function(){ 
// do stuff here that happens when the button gets clicked 
} 

Answer 1

如果我理解你想要做什麼，這是不可能的。出於安全原因，瀏覽器中的JavaScript被沙盒化，因此它無法訪問本地文件系統。

Answer 2

它100％是可能的，而其他人正在這樣做。您可以看到此功能在Mailchimp.com上的OP請求中工作

「Matt Ball」編輯了這個問題並回復說這是不可能的，但他看起來並不熟悉CKEditor和CKFinder， OP想要使用瀏覽器的「瀏覽文件」 - 但這顯然不是OP正在尋找的東西。

OP有一個文件瀏覽器，如CKFinder在一個彈出窗口中運行。作爲一個彈出窗口，他不想調用文件瀏覽器作爲模式窗口。

我也在研究如何做到這一點，我懷疑它會涉及編輯_source/plugins/image下的文件並修改子瀏覽器（這是CKFinder調用的技術術語），而不是加載爲模態。這裏頭號的問題是違反封裝，因爲模態窗口的jquery代碼不屬於CKEditor內...

Answer 3

我不得不做最近很類似的事情，並決定自己弄清楚。一旦我做到了，我就自己寫了一張便條，回來發佈解決方案。這是3個月前，但這裏是我所做的簡化版本，它基本上用來自ckeditor的browseServer函數（也包括在下面）中的修改代碼覆蓋了onClick函數。

CKEDITOR.on('dialogDefinition', function(event) { 
    var dialogName  = event.data.name, 
     dialogDefinition = event.data.definition, 
     infoTab, 
     browse; 

    // Check if the definition is from the dialog window you are interested in (the "Image" dialog window). 
    if (dialogName == 'image') { 
     // Get a reference to the "Image Info" tab. 
     infoTab = dialogDefinition.getContents('info'); 

     // Get the "Browse" button 
     browse = infoTab.get('browse'); 

     // Override the "onClick" function 
     browse.onClick = function() { 
      var me  = this, 
       dialog = me.getDialog(), 
       editor = dialog.getParentEditor(), 
       callBack = editor._.filebrowserFn, 
       win; 

      // This may or may not be needed. Got it from ckeditor docs. 
      editor._.filebrowserSe = me; 

      // do stuff here that happens when the button gets clicked 

      // Call back to CKEDITOR with new path to image (i.e. replace path below with new url for image) 
      window.CKEDITOR.tools.callFunction(callBack, 'path'); 

     } 

    } 

}); 

這裏是browseServer功能我從CKEditor的文檔，它可以在這裏找到了 - http://docs.ckeditor.com/source/plugin33.html。

function browseServer() { 
    var dialog = this.getDialog(); 
    var editor = dialog.getParentEditor(); 

    editor._.filebrowserSe = this; 

    var width = editor.config[ 'filebrowser' + ucFirst(dialog.getName()) + 'WindowWidth' ] || editor.config.filebrowserWindowWidth || '80%'; 
    var height = editor.config[ 'filebrowser' + ucFirst(dialog.getName()) + 'WindowHeight' ] || editor.config.filebrowserWindowHeight || '70%'; 

    var params = this.filebrowser.params || {}; 
    params.CKEditor = editor.name; 
    params.CKEditorFuncNum = editor._.filebrowserFn; 
    if (!params.langCode) 
     params.langCode = editor.langCode; 

    var url = addQueryString(this.filebrowser.url, params); 
    // TODO: V4: Remove backward compatibility (#8163). 
    editor.popup(url, width, height, editor.config.filebrowserWindowFeatures || editor.config.fileBrowserWindowFeatures); 
} 

我希望這會有所幫助。對不起，我沒有早點回答。

（注：我使用的CKEditor 4.4.7，但我相信它應該是其他版本類似）

Answer 4

通過@ 1I111I1答案對我來說是非常有用的，但不足之處是，它會所有實例中的行爲都是相同的。 如果您需要針對每個實例進行特殊配置（例如，每個實例的根目錄可能具有不同的默認路徑），這樣做並不容易。 此外，文件管理器會更好地知道您是否需要圖像或文件，因爲它們需要不同的查看方法（如圖像選擇的縮略圖模式）。

所以，我已經編輯它，以便它會基於瀏覽模式（圖像/鏈接）爲每個實例激發自定義事件。

CKEDITOR.on('dialogDefinition', function (event) { 
var dialogName = event.data.name, 
    dialogDefinition = event.data.definition, 
    infoTab, 
    browse; 

// Check if the definition is from the dialog window you are interested in (the "Image" dialog window). 
if (dialogName == 'image' || dialogName == 'link') { 
    // Get a reference to the "Image Info" tab. 
    infoTab = dialogDefinition.getContents('info'); 

    // Get the "Browse" button 
    browse = infoTab.get('browse'); 

    // Override the "onClick" function 
    browse.onClick = function() { 
     var me = this, 
      dialog = me.getDialog(), 
      editor = dialog.getParentEditor(), 
      callBack = editor._.filebrowserFn, 
      win; 

     // This may or may not be needed. Got it from ckeditor docs. 
     editor._.filebrowserSe = me; 

     // when the button gets clicked fire appropriate event 
     if (dialogName == 'image') { 
      dialog.getParentEditor().fire('browseImageRequest', callBack); 
     } else { 
      dialog.getParentEditor().fire('browseLinkRequest', callBack); 
     } 



    } 

} 

}); 

現在，您可以分別爲每個實例相應的事件註冊，然後使用所提供的回調返回選定值：

CKEDITOR.instances['myinstance'].on('browseImageRequest', (event)=> { 
     // Call back to CKEDITOR with new path to image (i.e. replace path below with new url for image) 
     window["CKEDITOR"].tools.callFunction(event.data, 'images/noimage.jpg'); 
    }); 

    CKEDITOR.instances['myinstance'].on('browseLinkRequest', (event) => { 
     // Call back to CKEDITOR with new path to image (i.e. replace path below with new url) 
     window["CKEDITOR"].tools.callFunction(event.data, 'http://www.google.com'); 
    }); 

另外請注意，所有這一切之前，您應該激活瀏覽按鈕的彈出窗口模式所需的配置，然後此解決方法將覆蓋onClick操作，而不是打開彈出窗口它將觸發相應的事件

CKEDITOR.replace('editor1', { 
       filebrowserBrowseUrl: '#', 
       filebrowserImageBrowseUrl: '#' 
});