我刚刚在CKEditor中包含一个自定义文件管理器。
我可以看到它在使用内置的添加图像功能时工作正常。
问题：我有一个自定义的"引导轮播"插件，我还在其中提供了图像上传功能。
目标：就像内置的添加图像一样，在成功上传图像后激活下一个或另一个选项卡，我希望我的插件也这样做。但它只显示一个红色进度条，尽管图像上传在同一选项卡上成功。似乎我错过了一些上传成功事件。但是文档没有提供有关文件管理器事件的信息，或者我找不到任何信息。
这是我的代码：
CKEDITOR.editorConfig = function(config){
config.filebrowserUploadUrl = '/admin/upload/';
config.filebrowserImageUploadUrl = '/admin/upload/';
config.filebrowserBrowseUrl = '/admin/upload/?type=browse';
}
php 路由器将请求路由到admin/upload到这个 php 函数：
public function fileUpload($params){
$funcNum = $_GET['CKEditorFuncNum'];
$url = '';
$error = '';
if($_FILES['upload']['error'] > 0 ){
switch($_FILES['upload']['error']){
case 1: $error = 'upload_max_filesize overflow';
break;
case 2: $error = 'max_file_size overflow';
break;
case 3: $error = 'File could not upload completely';
break;
case 4: $error = 'No File has been uploaded';
break;
case 6: $error = 'No temporary Folder given.';
break;
case 7: $error = 'Upload aborted: File could not been written.';
break;
}
}
$allowedTypes = array('text/plain','image/jpeg','image/gif', 'image/png');
$type = $_FILES['upload']['type'];
if(!in_array($type, $allowedTypes)){
$error = 'This file type is not allowed';
}
if(file_exists(ROOT_PATH.'/app/uploads/'.$_FILES['upload']['name'])){
$error = 'File already exists!';
}
if($error === '' && is_uploaded_file($_FILES['upload']['tmp_name'])){
$upfile = ROOT_PATH.'/app/uploads/'.$_FILES['upload']['name'];
if(move_uploaded_file($_FILES['upload']['tmp_name'], $upfile)){
$url = '/app/uploads/'.$_FILES['upload']['name'];
}else{
$error .= 'Could not move File to destination folder!';
}
}
exit("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$error');</script>");
}
最后是我的插件上传定义：
{
id: 'tab1',
label: 'Upload Image',
title: 'upload',
elements: [
{
type: 'file',
id: 'upload',
label: 'Select file from your computer',
size: 38
},
{
type: 'fileButton',
id: 'fileId',
label: 'Upload file',
'for': [ 'tab1', 'upload' ],
filebrowser: {
action: 'QuickUpload',
onSelect: function( fileUrl, error ) {
if(error !== ''){
alert(error);
}
// to cancel built in onSelect
return false;
}
// now from here - there should be some success event ???
// on Success: function(){} ???
}
}
]
},
解决方案：
onSelect: function( fileUrl, error ) {
if(error !== ''){
alert(error);
}else{
var document = this.getElement().getDocument();
var element = document.getById( 'imgPreview' );
element.setHtml('<img src="'+fileUrl+'" style="width:100px"><br />');
var dialog = this.getDialog();
dialog.getContentElement('tab2','id2').focus();
}
return false;
}
我认为进度条是上传后显示的不完整的xdebug通知错误。
现在我上传一张图片，然后将其放入下一个选项卡进行进一步处理，然后将焦点放在该选项卡上。