I want to give the user flexibility to change image size in a quill editor, How can I do it? I am currently doing it right this but I am getting error. Here is my code:

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
  }
};

My error is:

TypeError: Cannot read property 'register' of undefined Function.register C:/Users/muddinahmed/Documents/My Learning/Projects/React/blog-app/node_modules/quill/dist/quill.js:1122 1119 | this.imports[path] = target; 1120 | if ((path.startsWith('blots/') || path.startsWith('formats/')) && target.blotName !== 'abstract') { 1121 | _parchment2.default.register(target); > 1122 | } else if (path.startsWith('modules') && typeof target.register === 'function') { | ^ 1123 | target.register(); 1124 | } 1125 | }

How to do it?

I want to give the user flexibility to change image size in a quill editor, How can I do it? I am currently doing it right this but I am getting error. Here is my code:

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
  }
};

My error is:

TypeError: Cannot read property 'register' of undefined Function.register C:/Users/muddinahmed/Documents/My Learning/Projects/React/blog-app/node_modules/quill/dist/quill.js:1122 1119 | this.imports[path] = target; 1120 | if ((path.startsWith('blots/') || path.startsWith('formats/')) && target.blotName !== 'abstract') { 1121 | _parchment2.default.register(target); > 1122 | } else if (path.startsWith('modules') && typeof target.register === 'function') { | ^ 1123 | target.register(); 1124 | } 1125 | }

How to do it?

• javascript
• reactjs
• dom-events
• quill

• What is the error that you are getting? – Agney Commented Feb 11, 2020 at 6:02
• TypeError: Cannot read property 'register' of undefined Function.register C:/Users/muddinahmed/Documents/My Learning/Projects/React/blog-app/node_modules/quill/dist/quill.js:1122 1119 | this.imports[path] = target; 1120 | if ((path.startsWith('blots/') || path.startsWith('formats/')) && target.blotName !== 'abstract') { 1121 | _parchment2.default.register(target); > 1122 | } else if (path.startsWith('modules') && typeof target.register === 'function') { | ^ 1123 | target.register(); 1124 | } 1125 | } – LoGan Commented Feb 11, 2020 at 6:06

2 Answers 2

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

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

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

For 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",