对elFinder和CKeditor整合直接上传文件

right elFinder and CKeditor integration to upload files directly

我使用 elFinder laravel package 文件管理器和 ckeditor。我按照所有说明步骤进行操作,除了一个以外,所有的东西都有效。

当我单击 ckEditor 中的图像按钮以 select(或上传)图像时,在 select 来自我的计算机的图像之后的上传选项卡上,然后单击 发送到显示的服务器 按钮 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 选项,如上所示。但这也行不通。

我该如何解决这个问题?

使用演示站点的此代码(+ 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;
            }
        }
    } 
});

对于现在 运行 遇到这个问题的任何人来说,为我解决这个问题的方法是设置 filebrowserBrowseUrl。我犯的错误是设置 filebrowserUploadUrl 而不是 filebrowserBrowseUrl。 Elfinder 自行处理上传,因此您根本不必使用 'send to the server' 按钮,只需使用浏览服务器按钮即可。

所以 ckeditor 代码看起来像这样

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

    filebrowserBrowseUrl: '/elfinder/ckeditor',

    }
);

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