如何一步步在 TinyMCE 中将插入的图像转换为 Base64

javascript

2024-03-07 11:41:17

TinyMCE：将插入的图像转换为 Base64，一步步指南

TinyMCE 是一款流行的富文本编辑器，用于创建具有高级文本编辑功能的网站。其中一个有用的功能是将插入的图像转换为 Base64。

什么是 Base64？

Base64是一种将二进制数据（如图像）转换为文本格式的编码方案。它使用可打印的 ASCII 字符来表示二进制数据，便于通过网络传输和存储。

在 TinyMCE 中使用 Base64 的优势

将图像转换为 Base64 有几个好处：

脱机显示： Base64 编码的图像可以在没有网络连接的情况下显示，这对于在移动设备或离线应用程序中显示图像很有用。
存储效率： 与存储图像文件的 URL 相比，存储 Base64 编码的图像数据更有效率，因为它避免了额外的 HTTP 请求。
安全性： Base64 编码的图像数据不容易被篡改或损坏，这有助于提高安全性。

实现

要将插入的图像转换为 Base64，请按照以下步骤操作：

配置 TinyMCE： 在 TinyMCE 配置中，设置 images_upload_handler 选项，这是一个在图像上传时调用的回调函数。
在回调函数中处理图像： 在回调函数中，使用 FileReader 对象将图像文件转换为 Base64 编码的字符串。
返回 Base64 字符串： 将 Base64 编码的字符串作为 Promise 的解析值返回。
显示 Base64 图像： TinyMCE 将使用 Base64 字符串在编辑器中显示图像。

以下是如何在 TinyMCE 中配置 images_upload_handler 的示例代码：

tinymce.init({
  images_upload_handler: function (blobInfo) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        const base64str = reader.result;
        resolve(base64str);
      };
      reader.onerror = () => {
        reject('Error converting image to Base64');
      };
      reader.readAsDataURL(blobInfo.blob());
    });
  }
});

保存 Base64 字符串

默认情况下，TinyMCE 将图像的 URL 存储在 src 属性中。要保存 Base64 字符串，可以使用 data-mce-src 属性。此属性将存储图像的 Base64 编码数据。

以下是如何在 TinyMCE 中保存 Base64 字符串的示例代码：

tinymce.init({
  images_upload_handler: function (blobInfo) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        const base64str = reader.result;
        resolve({
          data: base64str,
          'data-mce-src': base64str
        });
      };
      reader.onerror = () => {
        reject('Error converting image to Base64');
      };
      reader.readAsDataURL(blobInfo.blob());
    });
  }
});