如何在TinyMCE中使用JavaScript处理返回404的图片URL？

云原生阿岚

2026-10-5

实现方案说明

TinyMCE没有专门针对粘贴图片URL检测的同名内置handler，但你可以通过两个可重写的官方钩子实现需求，其中第二种方案和images_upload_handler的重写逻辑高度相似：

方案1：重写paste_preprocess配置项
这是TinyMCE官方提供的粘贴内容预处理钩子，所有粘贴到编辑器的内容都会先经过该函数处理，你可以在内部匹配所有图片URL，发起检测判断状态，404的话直接拦截插入或者替换成提示内容，示例代码如下：

tinymce.init({
  selector: 'textarea',
  paste_preprocess: function(plugin, args) {
    // 匹配粘贴内容中的所有img标签src
    const imgRegex = /<img[^>]+src="([^">]+)"/g;
    let match;
    while ((match = imgRegex.exec(args.content)) !== null) {
      const imgUrl = match[1];
      // 创建图片对象监听加载状态，规避跨域HEAD请求限制
      const testImg = new Image();
      testImg.onload = () => {};
      testImg.onerror = () => {
        // 404时自定义逻辑：替换为提示文本/占位图，或者直接删除该标签
        args.content = args.content.replace(match[0], '<span>当前图片地址无效</span>');
      };
      testImg.src = imgUrl;
    }
  }
});

方案2：复用images_upload_handler配合images_dataimg_filter
如果你本身已经配置了图片上传逻辑，还可以搭配images_dataimg_filter钩子，先拦截所有待处理的图片URL，检测404之后再决定是否走上传逻辑，这个组合的用法和你熟悉的images_upload_handler重写逻辑一致，不需要额外适配粘贴事件。