右 elFinder 和 CKeditor 集成以直接上传文件
right elFinder and CKeditor integration to upload files directly
我使用 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-here 替换为您自己的 ID。
相关文章:
- 如何播放部分音频文件
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何使用WCF服务和javascript表单post上传.doc文件
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 如何在生成下载文件时显示加载动画
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何在php文件中获取$.post-ajax传递的值
- 直接下载文件,而不是从window.open(url)
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 如何在 elfinder(一个 jquery 文件管理器插件)中只显示文件夹列表
- 选择文件后用程序关闭elfinder
- 右 elFinder 和 CKeditor 集成以直接上传文件
- 在 elfinder 中选择并返回选定文件的数组
- Elfinder文件管理器,带有多个按钮更新文本输入
- 禁用elFinder中的多文件选择