使用quill-blot-formatter包调整react-quill编辑器中的图像大小会限制滚动。

要使用 quill-blot-formatter 包调整 react-quill 编辑器中的图像大小并限制滚动，可以按照以下步骤进行操作：

npm install quill react-quill quill-blot-formatter
创建一个React组件来包含react-quill编辑器，并在其内部对图像进行大小调整。以下是一个示例代码：
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import BlotFormatter from 'quill-blot-formatter';
class QuillEditor extends React.Component {
  constructor(props) {
    super(props);
    this.quillRef = React.createRef();
  componentDidMount() {
    this.initializeQuill();
  initializeQuill() {
    this.quill = new ReactQuill(this.quillRef.current, {
      theme: 'snow',
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'],
          ['image'],
      formats: ['bold', 'italic', 'underline', 'strike'],
    const quillContainer = this.quillRef.current.firstChild;
    const blotFormatter = new BlotFormatter(quillContainer);
    blotFormatter.on('pointerdown', (blot) => {
      this.quill.focus();
      blot.select();
    blotFormatter.on('resize', (blot, width, height) => {
      // 设置最大宽度和高度以限制图像的大小
      const maxWidth = 500;
      const maxHeight = 500;
      if (width > maxWidth || height > maxHeight) {
        const ratio = Math.min(maxWidth / width, maxHeight / height);
        blot.resize(width * ratio, height * ratio);
    this.quill.getModule('toolbar').addHandler('image', () => {
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.click();
      input.onchange = async () => {
        const file = input.files[0];
        const formData = new FormData();
        formData.append('image', file);
        const response = await fetch('your-upload-url', {
          method: 'POST',
          body: formData,
        const imageUrl = await response.text();
        const range = this.quill.getSelection(true);
        this.quill.insertEmbed(range.index, 'image', imageUrl);
  render() {
    return <div ref={this.quillRef} />;
在上面的代码中，我们创建了一个QuillEditor组件，并在componentDidMount生命周期方法中初始化了react-quill编辑器。我们还将quillRef设置为<div>的ref，以便稍后将其传递给Quill编辑器实例。
在初始化Quill编辑器后，我们创建了一个BlotFormatter实例，并将其绑定到quillContainer上。我们使用on方法监听pointerdown和resize事件。在pointerdown事件中，我们确保编辑器获得焦点并选择当前的图像。在resize事件中，我们检查图像的宽度和高度，并根据指定的最大宽度和高度进行调整。
最后，我们使用quill.getModule('toolbar').addHandler方法来处理插入图像的操作。当用户点击工具栏上的图像按钮时，我们创建一个隐藏的<input>元素，并模拟点击以选择文件。然后，我们将所选文件上传到服务器，并将返回的图像URL插入到Quill编辑器的当前位置。
请注意，上述代码中的your-upload-url应该替换为实际的图像上传URL。
希望上述代码对你有帮助！