Question

我已经为ckeditor创建了一个文件浏览器..在弹出窗口打开它是极端凌乱的..

我如何与浏览服务器上的点击事件联系起来，而不是以模态等方式启动文件浏览器。

基本上看

之类的东西

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

Answer 1

100％是可能的，而其他人正在这样做。您可以在Mailchimp.com上看到此功能作为OP请求

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

OP在弹出窗口中运行了一个文件浏览器，如CKFinder。他不想作为弹出窗口调用，而是将文件浏览器作为模态窗口调用。

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

Answer 2

@ 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 3

如果我理解你要做的事情，那是不可能的。出于安全原因，浏览器中的JavaScript被沙箱化，因此无法访问本地文件系统。

Answer 4

我最近必须做一些非常相似的事情，并决定自己解决这个问题。有一次，我给自己做了一个回复并发布解决方案的说明。那是3个月前，但这里是我所做的简化版本，它基本上覆盖了onClick函数，修改后的代码来自ckeditor的browseServer函数（下面也包括在内）。

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文档中获得的browseServer函数，可以在这里找到 - 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，但我认为它应该与其他版本类似）

ckeditor - Browse Server按钮调用函数不弹出怎么样？

4 个答案: