editor 개발기록

이슈1

에디터 DOM 구조

editorContainer
|-- quill
|--|-- ql-toolbar
|--|-- ql-container
|-- preview

quill의 height값 고정시키고 ql-container의 max-height값을 지정한 상태에서 사용자 윈도우 크기에 따라 ql-toolbar의 height값이 바뀌면 ql-container가 ql-container의 height값이 ql-toolbar의 height가 늘어나거나 줄은 만큼 바뀌는 것이 아니고 ql-container의 max-height값으로 고정되어 있어

quill의 height = ql-toolbar의 height값 + ql-container의 max-height값

으로 quill밖으로 div가 삐져나오는 상황

해결방법

quill의 height값 제거 -> ql-toolbar의 max-height값 제거 -> ql-container의 height값 고정

이렇게 하면 ql-container의 height값은 고정되고 ql-toolbar의 height값이 바뀌어도 부모인 quill의 height값은 자식의 height값의 합으로 동적으로 바뀐다. 또한, quill의 값이 동적으로 바뀌기 때문에 그에 맞춰 editorContainer값 또한 자식의 height값으로 바뀌어 quill의 형제인 preview까지 같이 바뀐다.