Next 와 Quill Editor <wysiwyg> 연동하기 + (2)

안녕하세요 ! Next.js를 이용한 프로젝트에서 에디터를 이용한 글을 올릴 때 사용하기 위해서

WYSIWYG을 찾아 보다가 QUILL EDITOR를 이용 하였습니다.

NEXT.JS SSR기반 으로 렌더링이 되기 때문에 window나 document가 undefined 되는 경우가 있습니다. 이때 해결하기 위해 웹 서핑을 하던 중, 아래와 같은 해결 방법을 찾았습니다.

    const Quill = typeof window === 'object' ? require('quill') : () => false;

정확하지 않으나, 개인적인 생각으로 SSR 이 되고나면 window가 'object' 이기 때문에, 이 때 모듈을 가져오는 식으로 해결 하면 됩니다. 그 후에 react에서 직접 dom을 다루기 위해서 useRef를 사용하고 마운트 될 때, quill이 생성 되도록 코드를 짜면 됩니다.

const quillEle = useRef();
const quillIns = useRef();

useEffect(() => {
quillIns.current = new Quill(quillEle.current, {
        theme: 'snow',
        placeholder: '내용',
      });
  
      const quill = quillInstance.current;
  
      quill.on('text-change', (delta, oldDelta, source) => {
        if(source === 'user') { 
          quill.root.innerHTML       
        }
      });
      const toolbar = quill.getModule('toolbar');
      toolbar.addHandler('image', onClickImageBtn)
})

<div ref={quillEle}></div>

이러면 에디터 연동이 됩니다.