TinyMCE 4图片上传：能否用Base64替代Blob作为图片源？

Hey there！你的问题很有代表性——完全可以用Base64格式的Data URI替代Blob URL作为TinyMCE 4的图片源。咱们来拆解下你之前的尝试为什么没生效，以及正确的实现方式。

为什么最初的方法失败了 #

file_picker_callback的第一个参数确实是用来传入图片源的回调函数，但直接传Base64字符串是行不通的——你必须先通过FileReader API把选中的本地文件转换成Data URI格式，再传给这个回调。看起来你可能跳过了文件读取这个关键步骤，或者传入回调的内容格式不对。

实现Base64图片插入的完整步骤 #

下面是一个可以直接运行的示例代码，它会把选中的本地图片转换成Base64，再插入到TinyMCE编辑器中：

tinymce.init({
  selector: '#your-editor-id',
  plugins: 'image',
  toolbar: 'image',
  // 配置文件选择器回调
  file_picker_callback: function(callback, value, meta) {
    // 创建一个隐藏的文件输入框
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'image/*'; // 仅允许选择图片文件

    // 处理文件选择事件
    fileInput.onchange = function() {
      const selectedFile = this.files[0];
      if (!selectedFile) return;

      // 使用FileReader将文件转为Base64格式的Data URI
      const reader = new FileReader();
      reader.onload = function(e) {
        // 将Base64字符串传给TinyMCE的回调函数
        callback(e.target.result, {
          alt: selectedFile.name // 可选：设置图片的alt文本，提升可访问性
        });
      };
      reader.readAsDataURL(selectedFile);
    };

    // 触发文件选择对话框
    fileInput.click();
  }
});

需要注意的细节 #

• Base64的体积开销: Base64编码会让文件体积比原二进制文件大大约30%，如果是大尺寸图片，可能会影响页面加载速度或编辑器性能，需要根据你的使用场景权衡利弊。
• 兼容性: TinyMCE 4完全支持通过Data URI插入图片，这个方案是官方认可的有效方式。
• 回调的元数据参数: 传给callback的第二个参数是元数据对象，你可以在这里设置alt等属性，优化图片的可用性。

用这个配置，当你通过文件选择器选中图片后，TinyMCE会插入一个src为Base64 Data URI的<img>标签，而不是Blob URL。

内容的提问来源于stack exchange，提问作者Mikey