javascript - 如何在TinyMCE中将图像编码为base64？

Question

这是我的 TinyMCE 配置的一部分:

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

当我在 TinyMCE 中通过简单的拖放添加图片时，本地镜像将显示为 Blob 编码图像。我想编码为base64。找不到任何关于它的信息。只有这个:

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

我能做什么？

Answer 1

当这些图像发送到服务器时，它们确实是 Base64 编码的图像。当内容粘贴/拖到编辑器中时，浏览器只会显示一个 blob URL。

如果您查看此文档页面，它概述了当图像粘贴/拖动到编辑器中时您可以配置 TinyMCE 执行的操作:

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

实际上，当 TinyMCE 将图像发送到服务器时，您需要服务器端代码来处理图像。大多数人不需要为客户端编写自己的图像处理代码 - 您只需配置images_upload_url参数来告诉编辑器将文件发送到哪里:

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

真正的工作是上传文件后如何处理该文件 - 即您需要编写的服务器端代码来处理 Base64 图像并将其存储在服务器上。然后，您返回 JSON，告诉 TinyMCE 为图像的 src 属性添加什么内容。

此处介绍了上传图像后执行操作的流程:

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