如何在 Quill 编辑器 - React 中更改图像大小？

Question

我想为用户提供在鹅毛笔编辑器中更改图像大小的灵活性，我该怎么做？我目前正在正确执行此操作，但出现错误。这是我的代码：

Quill.register("modules/imageResize", ImageResize);

Editor.modules = {
  toolbar: [
    [{ header: "1" }, { header: "2" }, { font: [] }],
    [{ size: [] }],
    ["bold", "italic", "underline", "strike", "blockquote", "code-block"],
    [
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" }
    ],
    ["link", "image", "video"],
    ["clean"]
  ],
  imageResize: {
    displaySize: true
  }
};

我的错误是：

TypeError：无法读取未定义 Function.register C：/Users/muddinahmed/Documents/My Learning/Projects/React/blog-app/node_modules/quill/dist/quill.js:1122 1119 | 的属性“register” this.imports[路径] = 目标； 1120 | 1120第1121章 1121 _parchment2.default.register(目标); > 1122 | } else if (path.startsWith('modules') && typeof target.register === 'function') { | } ^ 1123 |目标.注册(); 1124 | 1124 } 1125 | }

如何做？

Answer 1

import ImageResize from 'quill-image-resize-module-react';

Quill.register('modules/imageResize', ImageResize);

modules = {
  imageResize: {
     parchment: Quill.import('parchment'),
     modules: ['Resize', 'DisplaySize']
  }
}

Answer 2

对于

react.js

import ReactQuill, { Quill } from 'react-quill';
import imageResize from 'quill-image-resize-module-react';
import "quill/dist/quill.snow.css";
.
.
.
Quill.register('modules/imageResize', imageResize);
.
.
.
  const modules = {
   .
   .
   .
    imageResize: {
      modules: ["Resize", "DisplaySize"],
    },
  };

package.json

    "quill": "^2.0.2",
    "react-quill": "^2.0.0",
    "quill-image-resize-module-react": "^3.0.0",