Question

我刚将自定义的FileManager包含在CKEditor中我可以看到它在使用内置的添加图像功能时工作正常。

问题：我在Custom＆＃34; Bootstrap-Carousel＆＃34;插件，我还提供了图像上传功能。

目标：就像内置的添加图片一样，在成功上传图片后激活下一个或另一个标签我希望我的插件也能这样做。 但它只显示一个红色进度条，尽管图片上传在同一个标签上成功。似乎我错过了一些上传成功事件。但是文档没有提供有关FileManger事件的信息，或者我找不到任何信息。

这是我的代码：

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(){} ???
                          }
                      }
            ]
        },

Answer 1

解决方案：

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通知错误。

现在我上传一张图片，然后将其放入下一个标签进行进一步处理，然后将焦点放在该标签上。

无法找到使用ckeditor成功上传的正确事件

1 个答案: