2013-05-09 61 views
1

我需要將elFinder集成到CKEditor中。我也跟着這樣的:CKEditor和模式對話框中的匹配器

https://github.com/Studio-42/elFinder/wiki/Integration-with-CKEditor

這是工作,但對圖像選擇打開彈出窗口是不是很好,所以我想在模態對話框打開elFinder。

對於「模式整合」我遵循了這一主題: http://bxuulgygd9.tal.ki/20110728/integration-with-ckeditor-759177/

最後的後部分有工作。它真的打開模態的elfinder。但是: 當我想在CKFinder中插入圖片URL到URL字段時,我必須知道它的確切ID。也不會填充圖像分辨率並帶來一些其他問題。最好的解決辦法是運行函數調用中的「普通彈出的」整合,它可以處理一切:

window.opener.CKEDITOR.tools.callFunction(funcNum, file); 

但在「彈出一體化」,和FuncNum回調被註冊,在模式整合它不是如此我無法稱呼它。你有任何提示在模態窗口中運行elfinder(或任何其他圖像管理器 - 它將是相同的)?我很絕望。

回答

5

我自己解決了。此代碼是幾個教程的組合,並允許將elFinder完全集成到模態窗口中。也許有人會認爲它有用。

CKEDITOR.on('dialogDefinition', function(event) { 
    var editor = event.editor; 
    var dialogDefinition = event.data.definition; 
    console.log(event.editor); 
    var dialogName = event.data.name; 

    var tabCount = dialogDefinition.contents.length; 
    for (var i = 0; i < tabCount; i++) { 
     var browseButton = dialogDefinition.contents[i].get('browse'); 

     if (browseButton !== null) { 
      browseButton.hidden = false; 
      browseButton.onClick = function(dialog, i) { 
       editor._.filebrowserSe = this; 
       jQuery('<div \>').dialog({modal: true, width: "80%", title: "Insert image", zIndex: 99999, 
        create: function(event, ui) { 
         jQuery(this).elfinder({ 
          resizable: false, 
          url: "/path/to/connector.php", 
          getFileCallback: function(url) { 
           CKEDITOR.tools.callFunction(editor._.filebrowserFn, url); 
           jQuery('a.ui-dialog-titlebar-close[role="button"]').click() 
          } 
         }).elfinder('instance') 
        } 
       }) 
      } 
     } 
    } 
}); 
+0

嗨,我得到這個代碼的螢火蟲錯誤。 ReferenceError:CKEDITOR未定義 – 2013-06-07 08:31:38

+0

您已將此代碼放在CKEditor init代碼之後。 – 2013-06-07 16:42:39

+0

噢,這是更有道理,然後把它放在elfinder.html和包括ckeditor那裏..它的工作很好順便說一句,但它似乎我有一些ZIndex的問題,因爲它打開像這樣:http://img707.imageshack。 us/img707/2707/elfinder.png和我無法訪問查找器只是如果我關閉第一個窗口。你有什麼主意嗎? – 2013-06-10 06:18:18