diff --git a/WebContent/addon/summernote/summernote-custom.css b/WebContent/addon/summernote/summernote-custom.css new file mode 100644 index 0000000..b84bb22 --- /dev/null +++ b/WebContent/addon/summernote/summernote-custom.css @@ -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; +} diff --git a/WebContent/addon/summernote/summernote-custom.js b/WebContent/addon/summernote/summernote-custom.js new file mode 100644 index 0000000..5682528 --- /dev/null +++ b/WebContent/addon/summernote/summernote-custom.js @@ -0,0 +1,247 @@ +/** + * Summernote Custom JavaScript + * - 에디터 초기화, 이미지 처리, 붙여넣기 처리 등 + */ + +/** + * 이미지 다이얼로그에 안내 문구 추가 + * @param {jQuery} $modal - 모달 jQuery 객체 + */ +function addImageUploadGuide($modal) { + // 이미 안내 문구가 있으면 무시 + if ($modal.find('.image-upload-guide').length) return; + + var guideHtml = + '