实例化 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'
});
在上面的示例中,您传递了 test
和 token
参数。
如果您使用手动集成方法,则需要将参数附加到 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 参数:id
、type
、resourceType
、langCode
、CKEditor
和 CKEditorFuncNum
。如果您想使用更多参数,您需要将它们作为 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 编辑器实例或使用编辑器重新加载页面。
我在使用 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'
});
在上面的示例中,您传递了 test
和 token
参数。
如果您使用手动集成方法,则需要将参数附加到 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 参数:id
、type
、resourceType
、langCode
、CKEditor
和 CKEditorFuncNum
。如果您想使用更多参数,您需要将它们作为 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 编辑器实例或使用编辑器重新加载页面。