QuillJS/React-Quill为何忽略dangerouslyPasteHTML？（视频嵌入问题）

问题根源 #

quill-upload为了实现本地视频上传功能，通常会重写Quill默认的video格式处理逻辑，同时可能拦截剪贴板粘贴/insertEmbed操作，把所有视频类内容（包括你要插入的YouTube iframe）强制转换成它的自定义quill-upload-video元素，导致你的iframe被替换。

可行解决方法 #

方法1：自定义专属YouTube格式

给Quill注册一个全新的youtube格式，避开quill-upload对video格式的拦截：

1. 初始化Quill前注册自定义格式：

Quill.register({
  'formats/youtube': class extends Quill.Embed {
    static create(value) {
      const iframe = document.createElement('iframe');
      iframe.setAttribute('src', value);
      iframe.setAttribute('frameborder', '0');
      iframe.setAttribute('allowfullscreen', 'true');
      iframe.classList.add('ql-video'); // 复用默认视频样式
      return iframe;
    }
  }
}, true);

2. 修改你的处理函数，用自定义格式插入：

const youTubeVideoHandler = () => {
  const editor = quillRef.current.getEditor();
  let url = prompt("Enter Video URL: ");
  if (!url) return;
  
  url = getVideoUrl(url);
  const range = editor.getSelection();
  if (range) {
    editor.insertEmbed(range.index, 'youtube', url);
  }
};

方法2：临时禁用quill-upload的拦截

如果自定义格式无效，可以临时关闭quill-upload的模块和剪贴板拦截，插入后恢复：

const youTubeVideoHandler = () => {
  const editor = quillRef.current.getEditor();
  const uploadModule = editor.getModule('quillUpload'); // 模块名根据实际包调整
  if (!uploadModule) return;

  // 临时禁用上传模块
  uploadModule.disable();
  // 保存原始剪贴板匹配规则，移除对iframe/video的拦截
  const originalMatchers = [...editor.clipboard.matchers];
  editor.clipboard.matchers = originalMatchers.filter(matcher => {
    return matcher[0] !== 'iframe' && (matcher[1]?.name !== 'video');
  });

  let url = prompt("Enter Video URL: ");
  if (url) {
    url = getVideoUrl(url);
    const newHTML = `<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="${url}"></iframe>`;
    const range = editor.getSelection();
    if (range) {
      editor.clipboard.dangerouslyPasteHTML(range.index, newHTML);
    }
  }

  // 恢复拦截规则和上传模块
  editor.clipboard.matchers = originalMatchers;
  uploadModule.enable();
};

方法3：覆盖默认video格式的判断逻辑

如果quill-upload只是替换了video格式的创建函数，你可以重新覆盖它，区分YouTube链接和本地视频：

// 初始化Quill后执行
const VideoFormat = Quill.import('formats/video');
const originalCreate = VideoFormat.create;

// 自定义判断逻辑：YouTube链接生成iframe，否则用原逻辑
VideoFormat.create = function(value) {
  // 实现简单的YouTube链接判断
  const isYouTube = value.includes('youtube.com') || value.includes('youtu.be');
  if (isYouTube) {
    const iframe = document.createElement('iframe');
    iframe.setAttribute('src', value);
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', 'true');
    iframe.classList.add('ql-video');
    return iframe;
  }
  // 非YouTube链接，沿用quill-upload的本地视频处理
  return originalCreate.call(this, value);
};

Quill.register(VideoFormat, true);

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