Front/JS & jQuery

[js][quill] .ql-editor 클래스

오선지♬ 2025. 8. 12. 10:28
728x90
반응형
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

👉 주요 특징:

  • line-height와 padding으로 편집 영역의 기본 레이아웃 지정
  • white-space: pre-wrap → 줄바꿈 유지
  • word-wrap: break-word → 긴 단어 자동 줄바꿈
  • overflow-y: auto → 내용이 길면 스크롤 생김

이미지 → 기본적으로는 원본 크기로 들어가요

  • Quill은 이미지를 그대로 <img> 태그로 삽입하는데, 이미지가 편집 영역 너비보다 크면 넘쳐서 스크롤바가 생기거나 영역을 깨뜨릴 수 있어요.
  • 그래서 보통 추가 CSS를 줘서 자동 리사이즈(에디터 폭에 맞추기) 처리를 해요:
.ql-editor img {
  max-width: 100%;   /* 에디터 너비 안에 맞게 */
  height: auto;      /* 비율 유지 */
}
728x90
반응형