实例化 CKEditor 4 实例时如何将自定义值传递给 CKFinder 3?

How do I pass custom values to CKFinder3 when instantiating a CKEditor4 instance?

我在使用 CKEditor4 时使用 pass 将变量传递到我的 CKFinder3 (ASP) 连接器时遇到一些问题。

我创建了我的编辑器实例:

CKFinder.setupCKEditor( myEditor, {
    pass:         'testVar',
    testVar:    'nooice',
    ...
});

但变量似乎并没有传到 CKFinder。

如果我直接将此代码添加到 CKFinder 配置中,它确实可以工作:

config.pass = 'testVar';
config.testVar = 'nooice';

太好了,但是我要传递的值是动态的,所以我需要在页面上调用 .setupCKEditor() 时传递它们。我也尝试过使用 connectorInfo: 'testVar=nooice',但这也不起作用。

有人 运行 参与其中吗?我在这个问题上找到了一个很好的答案和示例,How to pass query string parameters in ckeditor for the picture (ckfinder) button?,但所描述的解决方案基本上是我正在做的,对我没有影响。

已经能够使用以下方法在 CKEditor5 测试中使用:

ClassicEditor.create( document.querySelector( '#bodyContent' ), {
    ckfinder: {
        uploadUrl: '/ckfinder3/connector?command=QuickUpload&type=Images&responseType=json',
        options: {
            pass: 'testVar',
            testVar: 'nooice'
        }
    },
    ...
} );

但是我在CKEditor4里搞不懂。

你像这样通过它们:

    var editor = CKEDITOR.replace( 'editor1', {
        language : 'en',        
    } );

    CKFinder.setupCKEditor( editor, {           
        test : 'testvalA',
        token : '7901a26e4bc422aef54eb45A',
        pass : 'token,test' 
    });

在上面的示例中,您传递了 testtoken 参数。


如果您使用手动集成方法,则需要将参数附加到 filebrowserXYZBrowseUrl 配置设置,如下所示:

    var editor = CKEDITOR.replace( 'editor1', {     

        filebrowserBrowseUrl: '../ckfinder/ckfinder.html?id=abc&foo=bar&test=custom',
        filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images&id=abc&foo=bar&test=custom',
        filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&id=abc&custom=test',
        filebrowserImageUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&id=abc&custom=test',
    } );

现在的问题是 CKFinder 只会传递预定义的集合或 URL 参数:idtyperesourceTypelangCodeCKEditorCKEditorFuncNum。如果您想使用更多参数,您需要将它们作为 CKFinder 配置设置手动传递,并且您需要在 ckfinder/ckfinder.html 文件中执行此操作(您需要修改它)例如

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>CKFinder 3 - File Browser</title>
</head>
<body>

<script src="ckfinder.js"></script>
<script>
    function getUrlParams()  {
            var vars = {};
            window.location.href.replace( /[?&]+([^=&]+)=([^&]*)/gi, function( match, key, value ) {
                vars[ key ] = value;
            } );

            return vars;
    }


    var params = getUrlParams(),
        config  = { pass : '' },
        ckfServicedParams = [ 'id', 'type', 'resourceType', 'langCode', 'CKEditor', 'CKEditorFuncNum' ];

    for( var key in params ){
        if ( ckfServicedParams.indexOf( key ) < 0 ) {
            config.pass = config.pass.concat( config.pass ? ','+key : key);
            config[key] = params[key];
        }
    }

    CKFinder.start( config ); 
</script>

</body>
</html>

备注:

  • 如果您希望在使用 CKEditor 图像对话框上传选项卡上传文件时发送额外的参数,您还需要将它们添加到 filebrowserXYZUploadUrl 配置设置中(您可以使用示例中所示的不同参数以上)。
  • 请注意这些参数并不是完全动态的。您在每次编辑器加载时定义一次,之后不能更改它们,除非您 destroy/create 编辑器实例或使用编辑器重新加载页面。