[js] Quill Editor 높이 설정

Quill 에디터의 높이를 텍스트 길이에 맞게 자동으로 조정하려면, 다음과 같은 방식으로 설정할 수 있습니다.

 

1. CSS로 자동 높이 조정: overflow-y: hidden; 속성을 사용하고 height를 자동으로 조정하도록 할 수 있습니다. Quill 에디터의 기본 div를 대상으로 하여, 에디터 높이를 텍스트 길이에 맞게 확장하도록 만듭니다.

.ql-editor {
    overflow-y: hidden; /* 스크롤바 숨기기 */
    min-height: 150px; /* 최소 높이 설정 */
}

 

2. JavaScript로 동적으로 높이 조정: 텍스트의 길이에 따라 에디터의 height를 동적으로 조정하려면, text-change 이벤트 리스너를 추가하여 높이를 재설정할 수 있습니다.

const quill = new Quill('#editor', {
    theme: 'snow'
});

quill.on('text-change', function() {
    const editor = document.querySelector('.ql-editor');
    editor.style.height = 'auto';  // 자동 높이 설정
    editor.style.height = editor.scrollHeight + 'px';  // 실제 내용에 맞게 높이 조정
});