summernote 일부 개선
This commit is contained in:
Rinjae
@@ -0,0 +1,187 @@
|
||||
/**
|
||||
* Summernote Custom Styles
|
||||
* - 이미지 리사이징, 레이아웃, 다이얼로그 스타일 등
|
||||
*/
|
||||
|
||||
/* 에디터 이미지 스타일 */
|
||||
.note-editable img {
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.note-editable img.note-image-resizing {
|
||||
outline: 2px solid #007bff;
|
||||
}
|
||||
|
||||
/* 이미지 리사이즈 핸들 스타일 */
|
||||
.note-control-sizing {
|
||||
display: block !important;
|
||||
}
|
||||
.note-control-holder {
|
||||
position: relative;
|
||||
}
|
||||
.note-control-holder .note-control-sizing {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1px solid #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 코드뷰 모드 가로 사이즈 고정 */
|
||||
.note-editor.note-frame {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
display: block !important;
|
||||
}
|
||||
.note-editor .note-editing-area {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.note-editor .note-codable {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
resize: vertical !important;
|
||||
white-space: pre-wrap !important;
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-all !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
|
||||
/* Summernote 부모 컨테이너 오버플로우 방지 */
|
||||
.table_row td .note-editor,
|
||||
td .note-editor,
|
||||
div .note-editor {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* 테이블 레이아웃 고정 - Summernote 포함 테이블 */
|
||||
.table_row {
|
||||
table-layout: fixed !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Summernote가 있는 td 스타일 */
|
||||
td:has(.note-editor) {
|
||||
overflow: hidden !important;
|
||||
word-break: break-all !important;
|
||||
}
|
||||
|
||||
/* IE/구형 브라우저 대응 - summernote 래퍼 클래스 */
|
||||
.summernote-wrapper {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* 이미지 다이얼로그 버튼 overflow 수정 */
|
||||
.note-image-dialog .note-modal-footer {
|
||||
padding: 10px 15px !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.note-image-dialog .note-modal-content {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.note-image-dialog .note-btn {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* 이미지 업로드 안내 문구 스타일 */
|
||||
.image-upload-guide {
|
||||
margin: 0 0 15px 0;
|
||||
padding: 10px 12px;
|
||||
background: #e8f4fd;
|
||||
border: 1px solid #b8daff;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #004085;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.image-upload-guide i.material-icons {
|
||||
font-size: 16px;
|
||||
margin-right: 6px;
|
||||
color: #0056b3;
|
||||
}
|
||||
.image-upload-guide strong {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* 색상 팔레트 UI overflow 수정 */
|
||||
.note-editor .note-toolbar {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.note-editor .note-btn-group {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.note-editor .note-toolbar .note-color.open .note-dropdown-menu {
|
||||
min-width: 340px !important;
|
||||
overflow: visible !important;
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
.note-editor .note-holder {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* 색상 팔레트 2컬럼 레이아웃 유지 */
|
||||
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette {
|
||||
display: inline-block !important;
|
||||
vertical-align: top !important;
|
||||
width: auto !important;
|
||||
min-width: 160px !important;
|
||||
margin: 0 5px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title {
|
||||
margin: 0 0 5px 0 !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-palette {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
/* 드롭다운 메뉴 위치 조정 */
|
||||
.note-editor .note-dropdown-menu {
|
||||
z-index: 1050 !important;
|
||||
}
|
||||
|
||||
/* 전체화면 모드 배경색 */
|
||||
.note-editor.note-frame.fullscreen,
|
||||
.note-editor.note-airframe.fullscreen {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
.note-editor.note-frame.fullscreen .note-editable,
|
||||
.note-editor.note-airframe.fullscreen .note-editable {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
/* 이미지 다이얼로그 수정 */
|
||||
.note-modal .note-modal-content {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.note-modal .note-modal-footer {
|
||||
overflow: hidden !important;
|
||||
height: auto !important;
|
||||
padding: 10px 15px !important;
|
||||
}
|
||||
.note-modal .note-modal-footer .note-btn {
|
||||
float: right !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.note-modal .note-modal-footer::after {
|
||||
content: "" !important;
|
||||
display: table !important;
|
||||
clear: both !important;
|
||||
}
|
||||
Reference in New Issue
Block a user