Quill Editor Image Resize Error 이슈 해결

 

문제상황

지금 회사에서 제가 맡고 있는 홈페이지의 Admin페이지에서는 무료 오픈 소스인 Quill Editor를 이용하고 있습니다.

현재 1차 개발을 완료하고 QA를 진행하고 있는데

 

에디터 내에서 이미지를 저장 후 -> 수정페이지에서 이미지를 리사이즈 할 때 아래와 같은 에러가 표시됩니다.

 

 

사용하고 있던 모듈과 버전은 이렇습니다.

 

구글링을 해보니 webpack.config.js를 직접 eject로 수정하면 된다는데 다른 방법이 있지 않을까 해서 계속 더 찾아서 시도해봤습니다.

 

 

해결

1차 시도 : @looop/quill-image-resize-module-react 설치

https://www.npmjs.com/package/@looop/quill-image-resize-module-react

@looop/quill-image-resize-module-react

 

npm i @looop/quill-image-resize-module-react

 

import Quill from 'quill'
import { ImageResize } from 'quill-image-resize-module'

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

const quill = new Quill(editor, {
  // ...
  modules: {
    // ...
    imageResize: {
      parchment: Quill.import('parchment')
      // See optional "config" below
    }
  }
})

const quill = new Quill(editor, {
  // ...
  modules: {
    // ...
    ImageResize: {
      parchment: Quill.import('parchment'),
      modules: ['Resize', 'DisplaySize', 'Toolbar']
    }
  }
})

 

해결되었다는 분들도 있었는데 저는 여전히 에러가 발생했고, 다른 모듈을 더 찾아보았습니다.

 

 

2차 시도 : @ xeger/quill-image 설치

https://github.com/xeger/quill-image

GitHub - xeger/quill-image: Delightful editing of rich-text image embeds in the Quill editor.

 

npm install @xeger/quill-image-actions --save-prod
npm install @xeger/quill-image-formats --save-prod

 

import { Quill } from 'react-quill';
import { ImageActions } from '@xeger/quill-image-actions';
import { ImageFormats } from '@xeger/quill-image-formats';

Quill.register('modules/imageActions', ImageActions);
Quill.register('modules/imageFormats', ImageFormats);

 

import React from 'react';
import ReactQuill from 'react-quill';

const formats = ['align', 'float'];
const modules = {
  imageActions: {},
  imageFormats: {},
  toolbar: [
    [{ 'align': [] }],
    ['clean']
  ]
};

export const Editor(): React.FC = () => (
  <ReactQuill
    formats={formats}
    modules={modules}
    theme="snow"
  />
);

 

 

이렇게 수정하니까 리사이즈 오류가 해결되었습니다.

 

*기타

 

현재 에디터 컴포넌트에서는 

이런식으로 모듈을 import 해오는데 동일한 방식으로 ImageActions와 ImageFormats 모듈을 import하니 인식이 되지 않았습니다.

 

해당 js 파일의 상단에서 import 하는것으로 바꾸었더니 해결되었습니다.