ckeditor - 浏览服务器按钮调用函数不弹出怎么办？

Question

我为 ckeditor 创建了一个文件浏览器..在弹出窗口中打开它非常混乱..

我如何绑定浏览服务器上的单击事件，而不是以模式等方式启动文件浏览器。

基本上看看类似的东西

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

Answer 1

@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: '#'
});

Answer 2

100%可能，而且其他人也在这么做。您可以看到此功能在 Mailchimp.com 上的 OP 请求中起作用，

“Matt Ball”已编辑问题并回答说这是不可能的，但他似乎不熟悉 CKEditor 和 CKFinder，而是认为 OP 想要使用浏览器的“浏览文件” - 但这显然不是OP正在寻找的。

OP 有一个文件浏览器，例如在弹出窗口中运行的 CKFinder。他希望将文件浏览器作为模式窗口调用，而不是作为弹出窗口调用。

我也在研究如何做到这一点，我怀疑它将涉及编辑 _source/plugins/image 下的文件并修改子浏览器（这是如何调用 CKFinder 的技术术语）以代替作为模式加载。这里的第一个问题是违反封装性，因为模式窗口的 Jquery 代码不属于 CKEditor 内...

Answer 3

我最近不得不做一些非常类似的事情，并决定自己解决。完成后，我给自己做了一个记录，以便回来发布解决方案。那是 3 个月前的事了，但这里是我所做的一个简化版本，它基本上是使用 ckeditor 的 browserServer 函数（也包含在下面）中的修改代码来覆盖 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' );

        }

    }

});

这是我从 ckeditor 文档中获得的 browserServer 函数，可以在这里找到 - 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

如果我明白你想做什么，那是不可能的。出于安全原因，浏览器中的 JavaScript 被沙箱化，因此它无法访问本地文件系统。