javascript — правильная интеграция elFinder и CKeditor для прямой загрузки файлов
Я использую 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 вариант, как вы видите выше. но это тоже не работает.
Как я могу решить это?
Решение
Этот код (+ DnD загрузка) с использованием демо-сайта Вот.
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 обрабатывает загрузку внутри себя, поэтому вам вообще не нужно использовать кнопку «Отправить на сервер», только кнопку просмотра сервера.
Таким образом, код ckeditor выглядел так
CKEDITOR.replace('your-id-here', {
filebrowserBrowseUrl: '/elfinder/ckeditor',
}
);
отмечая заменить ваш-id-здесь вашим собственным идентификатором.