React Quill toolbar 관련 오류 해결 ( position : sticky, Clipboard ( 복사 붙여넣기 ) 관련 오류 )

회사 사이트 블로그  컨텐츠안에 텍스트 에디터로 React-Quill 을 사용중입니다.

 

발생한 오류들의 해결방법만 먼저 말하고 자세한 오류 내용과 이유는 뒤에 나옵니다.

 

만약 React-Quill을 사용중이고 텍스트 에디터의 toolbar 를 position : sticky 또는 position : fixed 를 주었을 때 생기는 오류는

Quill 의 scrollingContainer 속성에 "html" 값을,

ql-clipboard 에 아래와 같은 스타일 값을 입혀주면 해결 가능합니다. 

react

css

 

작성중인 텍스트 에디터의 내용이 길어질 경우

우리가 텍스트 에디터의 최대 높이값을 따로 지정해 주지 않는다면 브라우저의 높이값이 늘어나 브라우저에 스크롤이 발생하게 됩니다.

 

그럼 최대 높이값을 지정해주면 되지 않느냐 하지만

 

WYSIWYG 을 고려하면 때 내가 작성한 화면과 내가 얻게될 화면이 같아야 하고

블로그나 텍스트가 많은 컨텐츠의 경우 작은 화면안에 스크롤로 내용을 보게 될 일은 적으니

사용자가 글을 작성할 때도 같은 환경이 주어져야 합니다.

 

추가로 모바일 환경의 경우 터치 스크롤이 겹치게 되는 문제도 발생해 사용자가 원하지 않는 부분이 스크롤 될 확률이 발생할 수 있습니다.