next.js 尝试删除图像下一个Js时出现Quill调整大小模块错误

myzjeezk  于 2022-12-18  发布在  其他
关注(0)|答案(1)|浏览(118)

我使用React-Quill与React-quill-resize-module调整图像大小。所有功能都很好,直到我想从编辑器中删除图像。当我按下删除按钮,我的图像(尝试从编辑器中删除图像),它导致了类似this的错误
错误消息:

Call Stack
HTMLDocument.checkImage
node_modules\quill-image-resize-module-react\image-resize.min.js (1:15098)

下面是我的编辑器组件代码:

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

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

  const formats = [
    ...
  ];
  return (
    <ReactQuill
      value={value}
      onChange={setValue}
      modules={modules}
      formats={formats}
      theme="snow"
    />
  );

这是我如何在我的页面中导入编辑器:

const Editor = dynamic(() => import('@app/components/editor/Editor'), {
  ssr: false,
});

...

 return <Editor {...editorProps} />


我的假设是它必须是SSR问题,因为当我读到quill-resize-module代码时,它试图访问checkImage函数中的window.quill。然而我对此不是很确定,但我非常感谢如果有任何建议来解决这个错误!

bksxznpy

bksxznpy1#

将源代码添加到您的应用,然后查找代码:

checkImage = (evt) => {
   if (this.img) {
     if (evt.keyCode == 46 || evt.keyCode == 8) {
       window.Quill.find(this.img).deleteAt(0);
     }
     this.hide();
    }
};

更改为

import Quill from "quill"
checkImage = (evt) => {
   if (this.img) {
     if (evt.keyCode == 46 || evt.keyCode == 8) {
       Quill.find(this.img).deleteAt(0);
     }
     this.hide();
    }
};

相关问题