Правильная интеграция elFinder и CKeditor для прямой загрузки файлов

Question

Я использую файловый менеджер elFinder laravel с ckeditor. Я следую всем инструкциям, и все работает, кроме одного.

Когда я нажимаю кнопку изображения в 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>

В соответствии с этим вопросом я добавляю filebrowserUploadUrl вариант, как вы видите выше. но это тоже не работает.

Как я могу решить это?

Answer 1

Этот код (+ DnD upload) с использованием демо-сайта находится здесь.

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;
            }
        }
    } 
});

Answer 2

Для тех, кто сталкивался с этой проблемой сейчас, единственной вещью, которая разрешила ее для меня, была установка filebrowserBrowseUrl. Я сделал ошибку, установив filebrowserUploadUrl вместо filebrowserBrowseUrl. Elfinder обрабатывает загрузку внутри себя, поэтому вам вообще не нужно использовать кнопку "Отправить на сервер", только кнопку просмотра сервера.

Таким образом, код ckeditor выглядел так

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

    filebrowserBrowseUrl: '/elfinder/ckeditor',

    }
);

отмечая заменить ваш-id-здесь вашим собственным идентификатором.