如何阻止TinyMCE 4粘贴Base64图片或自动转存为文件？

嘿，我刚好对TinyMCE 4的这类场景很熟悉，给你两个精准匹配需求的方案，你可以根据实际情况选：

这个方案很直接，彻底禁止用户粘贴图片，引导他们用你已经实现的上传按钮添加图片。你只需要在TinyMCE的初始化配置里监听paste事件，检查剪贴板内容并拦截图片粘贴：

tinymce.init({
  // 你的现有配置（比如selector、theme、plugins等）
  setup: function(editor) {
    editor.on('paste', function(e) {
      // 获取剪贴板数据
      var clipboardData = e.clipboardData || window.clipboardData;
      var items = clipboardData?.items;
      
      if (items) {
        // 遍历剪贴板内容，检查是否有图片
        for (let i = 0; i < items.length; i++) {
          if (items[i].type.includes('image')) {
            e.preventDefault(); // 阻止默认粘贴行为
            alert('请使用编辑器的上传按钮添加图片，暂不支持直接粘贴图片'); // 提示用户
            break;
          }
        }
      }
    });
  }
});

如果你不想完全禁止粘贴，而是希望自动把粘贴的图片转成文件存储（和你手动上传的逻辑完全一致），这个方案更贴合你的需求——实时处理，不用等表单提交，直接生成和手动上传一样的图片引用，数据库里只会存简洁的HTML：

tinymce.init({
  // 你的现有配置
  setup: function(editor) {
    editor.on('paste', function(e) {
      var clipboardData = e.clipboardData || window.clipboardData;
      var items = clipboardData?.items;
      
      if (items) {
        for (let i = 0; i < items.length; i++) {
          if (items[i].type.includes('image')) {
            e.preventDefault(); // 阻止默认的Base64粘贴行为
            const imageFile = items[i].getAsFile(); // 获取剪贴板里的图片文件对象
            
            // 用FormData包装文件，调用你已有的PHP上传接口
            const formData = new FormData();
            formData.append('file', imageFile); // 这里的参数名要和你PHP接口接收的一致
            
            // 发送上传请求
            fetch('你的PHP上传文件路径', {
              method: 'POST',
              body: formData
            })
            .then(res => res.json())
            .then(data => {
              if (data.success && data.imageUrl) {
                // 上传成功后，把正常的img标签插入编辑器
                editor.insertContent(`<img src="${data.imageUrl}" alt="粘贴的图片" />`);
              } else {
                alert('粘贴的图片上传失败，请重试');
              }
            })
            .catch(err => {
              console.error('图片上传出错:', err);
              alert('粘贴的图片上传失败，请重试');
            });
            
            break;
          }
        }
      }
    });
  }
});

注意事项： #

1. 你的PHP上传接口需要支持接收FormData格式的文件（应该和你现有的上传逻辑一致，不用大改），返回JSON格式的结果，比如：{"success": true, "imageUrl": "/uploads/20240520_xxxx.jpg"}
2. 确保TinyMCE的paste插件是启用的（默认是启用的，除非你手动禁用了）
3. 如果编辑器页面和上传接口不在同一个域名下，需要在PHP接口里配置跨域允许

这个方案完全不用修改你现有的数据库存储逻辑，粘贴的图片会和手动上传的图片一样处理，完美解决Base64字符串过长的问题。

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