正确的elFinder和CKeditor集成以直接上传文件

Question

I uses elFinder laravel package file Manager with ckeditor. I follow all Instructions step and all things work except one.

When I click on image button in ckEditor to select (or upload) an Image , on the upload tab after select an image from my computer and click Send it to the Server button NotFoundHttpException in RouteCollection.php line 161 shown and upload fails.

this is ckEditor initialization code :

<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>

According to This Issue , I add filebrowserUploadUrl option as you see above. but this not work too.

How can I solve this ?

Answer 1

This code (+ DnD upload) using demo site is 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;
            }
        }
    } 
});

Answer 2

For anyone running into this issue now, the thing that resolved it for me was setting filebrowserBrowseUrl. The mistake I was making was setting filebrowserUploadUrl instead of the filebrowserBrowseUrl. Elfinder handles the upload inside itself, so you should not have to use the 'send to the server' button at all, just the browse server button.

So the ckeditor code looked like such

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

    filebrowserBrowseUrl: '/elfinder/ckeditor',

    }
);

noting to replace your-id-here with your own id.