1

我需要将 elFinder 集成到 CKEditor。我跟着这个：

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

它正在工作，但打开图像选择的弹出窗口不是很好，所以我想在模态对话框中打开 elFinder。

对于“模态集成”，我关注了这个线程： http ://bxuulgygd9.tal.ki/20110728/integration-with-ckeditor-759177/

那里的最后一篇文章部分有效。它真的以模态打开 elfinder。但是：当我想将图像 URL 插入 CKFinder 中的 URL 字段时，我必须知道它的确切 ID。也是不填充图像分辨率并带来一些其他问题。最好的解决方案是运行在“普通弹出”集成中调用的函数，它可以处理所有事情：

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

但是在“弹出集成”中，funcNum回调被注册，在模态集成中它不是所以我无法调用它。您对在模态窗口中运行 elfinder（或任何其他图像管理器 - 它会相同）有任何提示吗？我很绝望。

4

1 回答 1

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')
                    }
                })
            }
        }
    }
});
于 2013-05-09T17:58:41.803 回答