Javascript TinyMCE 4.3仅上载一张图像
TinyMCE不允许在一篇文章中上载多个文件。您可以选择一个文件,它将插入到TinyMCE编辑器中,但一旦提交,则只上载最后插入的图像 下面是我正在使用的代码:[0]在第二次尝试时被删除,我认为TinyMCE将处理文件数组Javascript TinyMCE 4.3仅上载一张图像,javascript,tinymce,Javascript,Tinymce,TinyMCE不允许在一篇文章中上载多个文件。您可以选择一个文件,它将插入到TinyMCE编辑器中,但一旦提交,则只上载最后插入的图像 下面是我正在使用的代码:[0]在第二次尝试时被删除,我认为TinyMCE将处理文件数组 if (meta.filetype == 'image') { $('#upload').trigger('click') $('#upload').on('change', function() { var file = this.files
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将图像添加到帖子中,并在提交时将其全部上载,而不是最后附加的图像?现在更改为以下内容,以获得有效的解决方案。调用blobCache.create时使用第一个参数的名称是问题的原因,因此需要一个唯一的blobid
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')
}
}
日志显示作为blob上载的图像,然后使用相应的{location:/someimage.jpg}响应调用文件上载脚本,但是任何添加更多图像的额外尝试都只会导致图像blob,而不会调用上载脚本。奇怪的是,每次尝试使用TinyMCE附加的图像都会导致增加1,因此第一个附件会出现两个blob,然后是三个blob,然后是四个blob,等等。修改以下内容现在允许上载图像,但在提交时,它将上载附加的最后一个图像,而忽略以下代码:var name=file.name.split'。[0]并更改为:var id='blobid'+new Date.getTime;