如何上传截图后粘贴至TinyMCE的图片？求JavaScript实现示例

核心思路 #

监听TinyMCE的粘贴事件，从剪贴板中提取图片文件，通过FormData单独上传到后端，后端处理后返回图片URL，再将图片插入到编辑器中。这样就避开了混合文本和图片的变量处理问题，只针对图片文件做上传。

前端实现（TinyMCE配置 + JavaScript） #

tinymce.init({
  selector: '#your-editor-id',
  plugins: 'paste',
  setup: function(editor) {
    editor.on('paste', function(e) {
      // 检查剪贴板是否包含图片
      const items = (e.clipboardData || window.clipboardData).items;
      if (!items) return;

      // 遍历剪贴板项目，找到图片文件
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          const file = items[i].getAsFile();
          if (!file) continue;

          // 阻止默认粘贴行为，避免图片以base64形式插入
          e.preventDefault();

          // 创建FormData并添加图片文件
          const formData = new FormData();
          formData.append('screenshot', file);

          // 上传到后端接口
          fetch('/api/upload-screenshot', {
            method: 'POST',
            body: formData
          })
          .then(response => response.json())
          .then(data => {
            if (data.success && data.imageUrl) {
              // 将图片插入到编辑器当前光标位置
              editor.insertContent(`<img src="${data.imageUrl}" alt="截图" />`);
            }
          })
          .catch(err => {
            console.error('上传失败:', err);
          });

          break;
        }
      }
    });
  }
});

后端实现（Express + Multer） #

针对单图片上传配置Multer，不需要处理混合数据，因为前端只传图片文件：

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const app = express();

// 配置Multer存储路径和文件名
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    // 确保uploads目录存在，不存在则创建
    const uploadDir = path.join(__dirname, 'uploads');
    fs.mkdirSync(uploadDir, { recursive: true });
    cb(null, uploadDir);
  },
  filename: function(req, file, cb) {
    // 生成唯一文件名，避免重复
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, `screenshot-${uniqueSuffix}${path.extname(file.originalname)}`);
  }
});

// 只允许图片文件上传
const upload = multer({
  storage: storage,
  fileFilter: function(req, file, cb) {
    if (file.mimetype.startsWith('image/')) {
      cb(null, true);
    } else {
      cb(new Error('仅支持图片文件上传'));
    }
  }
});

// 上传接口
app.post('/api/upload-screenshot', upload.single('screenshot'), (req, res) => {
  if (!req.file) {
    return res.json({ success: false, message: '未上传图片' });
  }

  // 构建图片访问URL，这里假设后端静态文件托管uploads目录
  const imageUrl = `/uploads/${req.file.filename}`;
  res.json({ success: true, imageUrl: imageUrl });
});

// 托管uploads目录为静态资源
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

app.listen(3000, () => {
  console.log('服务启动在3000端口');
});

关键说明 #

1. 前端通过监听paste事件，提取剪贴板中的图片文件，阻止默认粘贴行为（避免base64大体积图片直接插入编辑器）。
2. 后端用Multer的upload.single('screenshot')接收单个图片文件，配合fileFilter确保只处理图片类型。
3. 后端需要将uploads目录设为静态资源，这样前端才能访问上传后的图片。

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