How to encode image to base64 in TinyMCE?

Question

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?

Semester

strange... your code worked just fine for me success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64()); it was a blob cache local url and now its url base64 image – Osei

Pointing to this article : https://mcmap.net/q/1259607/-tinymce-v4-turn-off-blobs - it helped me with case when i wanted base64 instead of blob in tinymce body. – Illuminant

Answer 1

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

Holpen

I don't need to save images on server. And when I see blob I can't understand where is my image? If I see src="data:image...;base64,dedewdewdewd24e=e..", all is clear. – Semester

when you see blog your image is in your browser and it's temporarily there until you close your browser. It's not stored anywhere but in your browsers memory. – Rondi

Answer 2

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);
      },
    }
  }
/>

Ranice

Answer 3

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);
},
...

Hidie