quill editor 이미지 링크 이슈 해결 방법

설명 이유) quill editor을 적용을 했을 때 nextjs에 적용할 때에는 css 추가 작업한 것 없이 정상적으로 작동되는 것을 볼 수 있었으나 react에 적용할 때에는 특히 이미지를 링크 걸때 이벤트가 발생되더라도 깨짐현상 또는 나타나지 않는 현상을 확인하게 되었습니다. 그래서 해결 방법을 공유하고자 정리하게 되었습니다. 

 

먼저 발생하는 원인을 파악해야합니다. 이미지 드래그하고 링크를 클릭한 후에 나오는 모달을 개발자 도구를 통해서 확인합니다.

지금 형광펜으로 체크한 부분을 선택해서 styles를 보시면 마우스 스크롤을 움직일 때 해당 모달이 스크롤에 영향을 받아서 움직이는 것을 볼 수 있고 margin-top도 변경되는 것을 볼 수 있습니다. 

 

1. QuillEditor.css를 만들어서 margin-top !important로 설정합니다.

• 추가 설명
  1. !important는 우선순위를 주는 것인데 이렇게 하지 않으면 아무리 설정을 줘도 quill editor css가 제대로 적용이 되지 않은 것을 볼 수 있습니다. 
  2. .ql-tooltip - Enter link class에 해당됩니다. 개발자 도구를 통해서 선택 영역에 class name을 확인하실 수 있습니다. 

.ql-tooltip {
  margin-top: -130px !important;
}

2. 현재 quill editor 설정한 부분에 QuillEditor css를 연결합니다. 

 

느낀점) overflow에 영향에 따라 전체적인 흐름에 영향을 줄 수 있다는 것도 알게 되었고 이벤트가 발생 여부도 개발자 도구를 통해서 css를 확인해보면 충분히 유추할 수도 있었지만 이미지 영역과 툴바의 영역이 중복된 것으로 오인해서 해결하는데 시간적으로 많이 소모가 되었습니다. 

chatGPT를 활용할 때에는 !important방법이 아닌 css 적용으로 가능한  기준으로만 알려줘서 개발 영역은 많이 도움이 되었지만 퍼블릭 영역은 전혀 도움이 되지 않았습니다. 

그것을 통해서 느낀점은 제가 퍼블릭 영역보다 개발 영역이 좀 더 이해하고 활용하다보니 질문도 좀 더 구체적으로하고 chatGPT가 잘못 알려주는 부분이 있다면 최대한 간격을 좁혀서 접근했기에 활용할 수 있었다는 것을 알게 되었습니다.