Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/388.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript TinyMCE 4.3仅上载一张图像_Javascript_Tinymce - Fatal编程技术网

Javascript TinyMCE 4.3仅上载一张图像

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

TinyMCE不允许在一篇文章中上载多个文件。您可以选择一个文件,它将插入到TinyMCE编辑器中,但一旦提交,则只上载最后插入的图像

下面是我正在使用的代码:[0]在第二次尝试时被删除,我认为TinyMCE将处理文件数组

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;