TinyMCE不允许帖子中上传多个文件。您可以选择一个文件,它会插入TinyMCE编辑器中,但是一旦提交,就只会上传最后插入的图像。
下面是我正在使用的代码:(在我以为TinyMCE将处理文件数组的第二次尝试中,[0]被删除了
if (meta.filetype == 'image') {
$('#upload').trigger('click')
$('#upload').on('change', function() {
var file = this.files[0]
var reader = new FileReader()
var name = file.name.split('.')[0]
var blobCache = tinymce.activeEditor.editorUpload.blobCache
var blobInfo = blobCache.create(name, file, reader.result)
blobCache.add(blobInfo);
reader.onload = function(e) {
callback(blobInfo.blobUri(), {
alt: file.name,
title: name
})
}
reader.readAsDataURL(file)
})
}
}
我试图用for循环附加其他文件,并从文件中删除了[0]并进行分割,但均未成功。
file_picker_callback: function(callback, value, meta) {
if (meta.filetype == 'image') {
$('#upload').trigger('click')
$('#upload').on('change', function() {
var file = this.files//[0]
var reader = new FileReader()
var name = []
for(var x = 0; x < file.length; x++) {
name.push(file[x].name.split('.'))
}
var blobCache = tinymce.activeEditor.editorUpload.blobCache
var blobInfo = blobCache.create(name, file, reader.result)
blobCache.add(blobInfo);
reader.onload = function(e) {
callback(blobInfo.blobUri(), {alt: file.name, title: name})
}
reader.readAsDataURL(file)
})
}
}
我也尝试过允许自动上传,该功能仅适用于第一张图像,其余仅回退到数据库中的base64。最后,我尝试合并所有文件以进行上传,但是在console.log中没有看到不同的文件名。例如,我附加一个文件,在console.log中看到一个文件,我附加另一个,在console.log中看到两个响应,但是具有最新的附件,但是只有最后一个附件图像会在提交时上载。看来TinyMCE会在每个图片附件中覆盖文件。
是否有其他方法可以使用TinyMCE将图像添加到帖子中,并且在提交后将其全部上传,而不是最后一个附加的图像?
答案 0 :(得分:0)
现在更改为以下内容以找到可行的解决方案。导致此问题的原因是在调用blobCache.create时使用第一个参数的名称,而是需要一个唯一的对象。
file_picker_callback: function(callback, value, meta) {
if (meta.filetype == 'image') {
$('#upload').on('change', function() {
var file = this.files[0]
var reader = new FileReader()
reader.onload = function(e) {
// var name = file.name.split('.')[0] // replaced with id below
// var base64 = reader.result.split(',')[1]; // for base64
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache
var blobInfo = blobCache.create(id, file, reader.result)
blobCache.add(blobInfo);
callback(blobInfo.blobUri(), {alt: file.name, title: name})
}
reader.readAsDataURL(file)
})
$('#upload').trigger('click')
}
}