This is a part of my TinyMCE config:

{
...
plugins: 'code paste',
paste_data_images: true,
...
}

When I add pics via simple drag and drop in TinyMCE, the local images will appear as Blob encoded image. I want to encode to base64. Can find nothing about it. Only this:

images_upload_handler: function (blobInfo, success, failure) {
    success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
}

What can I do?

This is a part of my TinyMCE config:

{
...
plugins: 'code paste',
paste_data_images: true,
...
}

When I add pics via simple drag and drop in TinyMCE, the local images will appear as Blob encoded image. I want to encode to base64. Can find nothing about it. Only this:

images_upload_handler: function (blobInfo, success, failure) {
    success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
}

What can I do?

• javascript
• php
• base64
• tinymce

3 Answers 3

You wrote the handler function incorrectly. It should return a Promise. Example:

<Editor
  onEditorChange={async (data: string) => {
    console.log(data);
  }}
  initialValue={'<p>test<p>'}
  init={
    {
      height: 500,
      menubar: false,
      plugins: "image code",
      toolbar: "image code",
      image_uploadtab: true,
      images_file_types: "jpeg,jpg",
      images_upload_handler: (blobInfo) => {
        const base64str =
          "data:" +
          blobInfo.blob().type +
          ";base64," +
          blobInfo.base64();
        return Promise.resolve(base64str);
      },
    }
  }
/>

When those images are sent to the server they are indeed Base64 encoded images. The browser just shows you a blob URL when the content is pasted/dragged into the editor.

If you look at this documentation page it outlines what you can configure TinyMCE to do when images are pasted/dragged into the editor:

https://www.tiny.cloud/docs-4x/advanced/handle-async-image-uploads/

Effectively you need server side code to process the image when TinyMCE sends it to the server. Most people don't need to write their own image handling code for the client side - you can just configure the images_upload_url parameter to tell the editor where to send the file:

https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url

The real work is what do you do with that file once its uploaded - that is server side code you need to write to process the Base64 image and store it on your server. You then return JSON that tells TinyMCE what to put in for the src attribute of the image.

The process for what to do once the image is uploaded is covered here:

https://www.tiny.cloud/docs/advanced/handle-async-image-uploads/#imageuploaderrequirements

After a lot of struggling, I came up with this solution that seems to be working for me:

...
images_upload_handler: function (blobInfo, success, failure) {
  const base64str =
    "data:" +
    blobInfo.blob().type +
    ";base64," +
    blobInfo.base64();
    
  success(base64str);
},
...