javascript - How to encode image to base64 in TinyMCE? - Stack Overflow

admin管理员组

文章数量:1342657

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

Share Follow edited Jan 7, 2021 at 10:16 klokop 2,41022 gold badges1818 silver badges2222 bronze badges asked Mar 22, 2017 at 9:23 Philipp KlemeshovPhilipp Klemeshov 42311 gold badge66 silver badges1414 bronze badges 2

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 4

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

本文标签： javascriptHow to encode image to base64 in TinyMCEStack Overflow