tinymce

tinymce copied to clipboard

上传之后获取不到图片信息

z有人吗

上传之后获取不到图片信息

用images_upload_handler函数

I have the same issue. I see the demo code here, and not work.

If I no call _progress function, not happened.

If I call _progress(100); I get error message

images_upload_handler: (blobInfo, _progress) => new Promise(success => {
    setTimeout(() => {
      success('https://www.google.com/logos/google.jpg');
      _progress(100);
    }, 1000);
}),

Error: Errors: 
Failed path: (data > src > value)
Expected type: string but got: number

Input object: {
  "src": {
    "value": 100,
    "meta": {}
  },
  "alt": "",
  "dimensions": {
    "width": "",
    "height": ""
  },
  "fileinput": [
    {}
  ]
}

But. If add _progress function the link, resolve this issue.

images_upload_handler: (blobInfo, _progress) => new Promise(success => {
  setTimeout(() => {
    _progress('https://www.google.com/logos/google.jpg')
    success()
  }, 1000);
}),

My solution is that I upgraded to v6. Unfortunately I was v5.

This code can work normally.

 images_upload_handler: function(blobInfo) {
          const formData = new FormData()
          formData.append('image', blobInfo.blob(), blobInfo.filename())

          return fetch('http://mysite.com/api/upload', {
            method: 'POST',
            body: formData,
            headers: { Authorization: 'Bearer ' + window.sessionStorage.getItem('token') }
          })
            .then(response => {
              if (!response.ok) {
                throw new Error('Network response was not ok')
              }
              return response.json()
            })
            .then(data => {
              if (data && data.data && data.data.location) {
                return data.data.location
              } else {
                throw new Error('Unable to upload image')
              }
            })
            .catch(error => {
              console.error(error)
              throw new Error('Image upload failed: ' + error.message)
            })
        }

Yes this code

This code can work normally.

 images_upload_handler: function(blobInfo) {
          const formData = new FormData()
          formData.append('image', blobInfo.blob(), blobInfo.filename())

          return fetch('http://mysite.com/api/upload', {
            method: 'POST',
            body: formData,
            headers: { Authorization: 'Bearer ' + window.sessionStorage.getItem('token') }
          })
            .then(response => {
              if (!response.ok) {
                throw new Error('Network response was not ok')
              }
              return response.json()
            })
            .then(data => {
              if (data && data.data && data.data.location) {
                return data.data.location
              } else {
                throw new Error('Unable to upload image')
              }
            })
            .catch(error => {
              console.error(error)
              throw new Error('Image upload failed: ' + error.message)
            })
        }

thank you is working.

Correct, TinyMCE 6 changed the images_upload_handler config to use promises, rather than success and failure callbacks.

https://www.tiny.cloud/docs/tinymce/6/upload-images/#images_upload_handler