React Quill启用图片缩放后视频无法播放的问题求助

问题描述 #

在React Quill中启用quill-blot-formatter实现图片缩放功能后，编辑器内的视频会被该模块识别为可缩放元素，添加缩放样式后无法正常播放。

解决方案 #

核心思路是自定义BlotFormatter的匹配规则，仅让它处理图片元素，排除视频元素。以下是修改后的完整代码：

import React, { useState, useEffect } from "react";
import { useQuill } from "react-quilljs";
import "quill/dist/quill.snow.css";
import BlotFormatter from "quill-blot-formatter/dist/BlotFormatter";
import { ImageMatcher } from 'quill-blot-formatter/dist/matchers';

function HtmlEditor() {
  const { quill, quillRef, Quill: QuillInstance } = useQuill({
    modules: {
      blotFormatter: {
        // 仅保留图片匹配器，排除视频（iframe）匹配器
        matchers: [new ImageMatcher()]
      },
    },
  });

  if (QuillInstance && !quill) {
    QuillInstance.register("modules/blotFormatter", BlotFormatter);
  }

  const [value, setValue] = useState();

  useEffect(() => {
    if (quill) {
      quill.on("text-change", () => {
        setValue(quillRef.current.firstChild.innerHTML);
      });
    }
  }, [quill]);

  return (
    <div>
      <div className="mt-[50px] mx-auto " style={{ width: 1500, height: 1300 }}>
        <div ref={quillRef} />
      </div>
    </div>
  );
}
export default HtmlEditor;

代码说明 #

• 导入ImageMatcher并在blotFormatter的matchers配置中仅保留该匹配器，这样BlotFormatter只会对图片元素生效，不会处理以<iframe>形式插入的视频。
• 如果你的视频是通过<video>标签插入的，可以改用标签匹配规则，仅匹配<img>标签：

  blotFormatter: {
    matchers: [
      {
        match: (node) => node.tagName === 'IMG',
        createFormatter: (blot) => new BlotFormatter.DefaultFormatter(blot),
      },
    ],
  }
  

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