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
반응형
'Front > JS & jQuery' 카테고리의 다른 글
[js] blob 데이터를 보여주는 방식 (새창열기, 현재페이지에 보여주기) (0) | 2025.08.25 |
---|---|
[jQuery] multiselect readonly (0) | 2025.08.18 |
[jQuery] toggleClass() (0) | 2025.08.01 |
[js] FullCalendar.js 표시 갯수 제한 ( 더보기 기능 ) (0) | 2025.07.31 |
[js] FullCalendar.js 주간 뷰에서 시간 표시 없애기 (0) | 2025.07.28 |