对elFinder和CKeditor集成直接上传文件答案

【问题标题】：right elFinder and CKeditor integration to upload files directly对elFinder和CKeditor集成直接上传文件
【发布时间】：2016-03-16 14:18:54
【问题描述】：

我使用带有 ckeditor 的 elFinder laravel package 文件管理器。我遵循所有说明步骤，除了一个之外，所有的东西都可以正常工作。

当我单击 ckEditor 中的图像按钮以选择（或上传）图像时，在从我的计算机中选择图像后的上传选项卡上，然后单击 将其发送到服务器按钮NotFoundHttpException in RouteCollection.php line 161 显示上传失败。

这是ckEditor初始化代码：

<textarea name="content_fa" id="fa_post_content" class="form-control"
          rows="10"></textarea>
<script>
    var fa_post_content = CKEDITOR.replace('fa_post_content', {
        toolbar: 'admin_mode',
        filebrowserBrowseUrl : '{{route('elfinder.ckeditor')}}',
        filebrowserUploadUrl : '/elfinder/connector.php?cmd=upload'
    });
</script>

根据 This Issue ，我添加了 filebrowserUploadUrl 选项，如上所示。但这也行不通。

我该如何解决这个问题？

【问题讨论】：

ElFinder 无法处理此类上传，因为它在内部管理上传，并且协议与 quickupload 不兼容
您可以使用“Uploading Dropped or Pasted Files”来完成。你需要那个答案吗？

标签： javascript php laravel elfinder

【解决方案1】：

此代码（+ DnD 上传）使用演示站点是here。

CKEDITOR.on('dialogDefinition', function (event) {
    var editor = event.editor,
        dialogDefinition = event.data.definition,
        tabCount = dialogDefinition.contents.length,
        uploadButton, submitButton, inputId,
        elfUrl = editor.config.filebrowserUploadUrl,
        // elFinder configs
        elfDirHashMap = { // Dialog name / elFinder holder hash Map
            image : '',
            flash : '',
            files : '',
            link  : '',
            fb    : 'l1_Lw' // fallback target
        },
        customData = {}; // any custom data to post

    for (var i = 0; i < tabCount; i++) {
        uploadButton = dialogDefinition.contents[i].get('upload');
        submitButton = dialogDefinition.contents[i].get('uploadButton');

        if (uploadButton !== null && submitButton !== null) {
            uploadButton.hidden = false;
            submitButton.hidden = false;
            uploadButton.onChange = function() {
                inputId = this.domId;
            }
            submitButton.onClick = function(e) {
                dialogName = CKEDITOR.dialog.getCurrent()._.name;
                var target = elfDirHashMap[dialogName]? elfDirHashMap[dialogName] : elfDirHashMap['fb'],
                    name   = $('#'+inputId),
                    input  = name.find('iframe').contents().find('form').find('input:file'),
                    error  = function(err) {
                        alert(err.replace('<br>', '\n'));
                    };

                if (input.val()) {
                    var fd = new FormData();
                    fd.append('cmd', 'upload');
                    fd.append('overwrite', 0); // disable upload overwrite to make to increment file name
                    fd.append('target', target);
                    $.each(customData, function(key, val) {
                        fd.append(key, val);
                    });
                    fd.append('upload[]', input[0].files[0]);
                    $.ajax({
                        url: elfUrl,
                        type: 'POST',
                        data: fd,
                        processData: false,
                        contentType: false,
                        dataType: 'json'
                    })
                    .done(function( data ) {
                        if (data.added && data.added[0]) {
                            var url = data.added[0].url;
                            var dialog = CKEDITOR.dialog.getCurrent();
                            if (dialogName == 'image') {
                                var urlObj = 'txtUrl'
                            } else if (dialogName == 'flash') {
                                var urlObj = 'src'
                            } else if (dialogName == 'files' || dialogName == 'link') {
                                var urlObj = 'url'
                            } else {
                                return;
                            }
                            dialog.selectPage('info');
                            dialog.setValueOf(dialog._.currentTabId, urlObj, url);
                        } else {
                            error(data.error || data.warning || 'errUploadFile');
                        }
                    })
                    .fail(function() {
                        error('errUploadFile');
                    })
                    .always(function() {
                        input.val('');
                    });
                }
                return false;
            }
        }
    } 
});

【讨论】：

很抱歉提出有线问题，但在演示中，上传按钮在哪里？
CKEditor的插入对话框中有上传标签。 !example

【解决方案2】：

对于现在遇到此问题的任何人，为我解决此问题的方法是设置 filebrowserBrowseUrl。我犯的错误是设置 filebrowserUploadUrl 而不是 filebrowserBrowseUrl。 Elfinder 在其内部处理上传，因此您根本不必使用“发送到服务器”按钮，只需使用浏览服务器按钮即可。

所以ckeditor代码看起来像这样

CKEDITOR.replace('your-id-here', {

    filebrowserBrowseUrl: '/elfinder/ckeditor',

    }
);

注意用您自己的 id 替换 your-id-here。

【讨论】：