Bootstrap 5.3.3 + Summernote Lite 최신 버전 환경에서 에디터 UI가 완벽하게 작동하도록 구성 > 코딩게시판

제목
???? Summernote 전체화면 모드 시 기존 메뉴 겹침 현상 해결 (Bootstrap 5 + Summernote Lite 환경)
???? 변경 내용 요약
구분  변경 전  변경 후
CSS 기본 z-index: 1050  z-index: 2147483647 (최상단 고정)
JS  클릭 이벤트 기반 제어 (.note-btn-fullscreen) MutationObserver 기반 자동 감시
Body  스크롤 유지됨 overflow: hidden으로 차단
Editor 위치 원래 부모 div 안에 유지 전체화면 시 body 최상단 고정 위치로 변경
⚠️ 문제점 설명

summernote의 전체화면 버튼을 클릭하면 에디터가 커지지만,
화면 상단의 기존 메뉴 / 헤더 / 네비게이션 바 / 고정 요소가 여전히 보이거나 겹치는 문제가 발생합니다.

원래 summernote의 fullscreen 클래스는 z-index: 1050 으로 설정되어 있음

Bootstrap 5의 navbar, modal, offcanvas 등의 기본 z-index가 1055~1070 이상

따라서 Summernote가 아무리 position: fixed라도 브라우저의 stacking context에 갇혀서
메뉴보다 뒤에 표시되는 현상 발생

???? 원인 분석
원인 구분 설명
1. CSS 한계 .note-editor.fullscreen의 z-index가 낮아 Bootstrap 5의 UI 위로 오르지 못함
2. body scroll 미제한  전체화면 전환 후에도 body 스크롤이 남아 외부 레이아웃과 겹침
3. DOM 위치 문제  Summernote 에디터가 .content 내부에 있을 때 stacking context 영향 받음
4. Summernote Lite 변경점  Bootstrap 기반 이벤트(enterFullScreen, exitFullScreen) 지원 중단됨
✅ 대응 및 해결 방법
핵심 아이디어

전체화면 모드시 .note-editor 요소를 body의 최상단으로 이동시키고,
position: fixed + z-index: 2147483647 로 고정하며,
동시에 body의 스크롤을 차단하는 방식으로 해결.

???? 전체 적용 소스
① CSS (???? style.css 또는 summernote.css 맨 하단 추가)
/* ✅ Summernote fullscreen z-index 충돌 및 스크롤 차단 해결 */
.note-editor.note-frame.fullscreen,
.note-editor.note-airframe.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #fff !important;
  z-index: 2147483647 !important; /* 브라우저 최대값 */
}

/* 리사이즈 바 숨김 */
.note-editor.note-frame.fullscreen .note-resizebar,
.note-editor.note-airframe.fullscreen .note-resizebar {
  display: none !important;
}

/* body 스크롤 제한 */
body.note-fullscreen-mode {
  overflow: hidden !important;
}

② JavaScript (???? config.js 내부 추가)
(function ($) {
  $(document).ready(function () {

    $(".summernote").summernote({
      lang: 'ko-KR',
      height: 300,
      dialogsInBody: true,
      fontNames: ['맑은 고딕', '굴림', '돋움', '바탕', '궁서', 'Arial', 'Courier New', 'Comic Sans MS', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
      fontNamesIgnoreCheck: ['맑은 고딕', '굴림', '돋움', '바탕', '궁서'],
      toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
        ['fontname', ['fontname']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']],
        ['table', ['table']],
        ['insert', ['link', 'picture', 'video']],
        ['view', ['fullscreen', 'codeview']],
        ['help', ['help']]
      ]
    });

    /** ✅ fullscreen 상태 감시 (Bootstrap5 + summernote-lite 대응) */
    const observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        if (mutation.attributeName === "class") {
          const editor = $(mutation.target);
          if (editor.hasClass('fullscreen')) {
            // 전체화면 진입
            $('body').addClass('note-fullscreen-mode');
            editor.css({
              'z-index': '2147483647',
              'position': 'fixed',
              'top': 0,
              'left': 0,
              'width': '100%',
              'height': '100%'
            });
          } else {
            // 전체화면 해제
            $('body').removeClass('note-fullscreen-mode');
            editor.removeAttr('style');
          }
        }
      });
    });

    // 모든 에디터를 감시
    $('.note-editor').each(function () {
      observer.observe(this, { attributes: true });
    });

  });
})(jQuery);

⚙️ 적용 방법
단계  설명
1단계 W:\g5\plugin\editor\summernote-master_11q_0.90\config.js에 위 JS 코드 추가 (기존 summernote 설정 안에 포함)
2단계 W:\g5\plugin\editor\summernote-master_11q_0.90\summernote\summernote.css 또는 style.css 맨 하단에 위 CSS 추가
3단계 브라우저 캐시 삭제 (Ctrl + F5) 후 새로고침
4단계 에디터에서 "전체화면" 버튼 클릭 → 메뉴가 사라지고 에디터만 표시되는지 확인
???? 테스트 체크리스트
테스트 항목  기대 결과
전체화면 진입 시 메뉴/헤더 완전히 사라지고 에디터만 보임
body 스크롤  비활성화됨 (페이지 고정)
이미지 삽입, 폰트 변경 등 정상 작동
전체화면 해제 시 원래 위치/레이아웃으로 복귀
다른 Bootstrap 요소 (Modal 등) 충돌 없음
???? 기술적 핵심 요약

MutationObserver 사용 이유
summernote-lite는 Bootstrap의 이벤트(enterFullScreen, exitFullScreen)를 emit하지 않으므로,
DOM의 class 속성 변화를 감지하여 fullscreen 상태를 추적.

z-index: 2147483647
브라우저 최대 z-index 값 (signed 32-bit 정수 한계치).
Bootstrap의 modal(1050)이나 offcanvas(1045)보다 훨씬 높아 겹침 완전 방지.

body overflow 차단
스크롤로 인한 배경 메뉴 노출 문제 해결.

???? 결과

✅ 전체화면 모드 시 오직 Summernote 에디터만 화면에 보이고
✅ 상단 메뉴, 헤더, 푸터, 사이드바 모두 가려지며
✅ Bootstrap 5 환경에서도 완전 호환.

원하신다면 ???? “전체화면 진입 시 배경 흐림(blur) 효과”
또는 ???? “해제 시 부드러운 fade-out 전환 효과” 도 추가할 수 있습니다.

인기검색어

메뉴
검색
HomePC.11q.kr

Bootstrap 5.3.3 + Summernote Lite 최신 버전 환경에서 에디터 UI가 완벽하게 작동하도록 구성

Bootstrap 5.3.3 + Summernote Lite 최신 버전 환경에서 에디터 UI가 완벽하게 작동하도록 구성

자료 저장 보관 합니다 >>

글쓰기 해보세요

커뮤니티

최근글

새댓글

W:\g5\theme\BS4-Basic\side\side-basic.php

작성자 정보

컨텐츠 정보

본문

﻿Bootstrap 5.3.3 + Summernote Lite 최신 버전 환경에서 에디터 UI가 완벽하게 작동하도록 구성

자료 저장 보관 합니다 >>

글쓰기 해보세요

ChatGPT의 말:

관련자료

커뮤니티

최근글

새댓글 W:\g5\theme\BS4-Basic\side\side-basic.php

Bootstrap 5.3.3 + Summernote Lite 최신 버전 환경에서 에디터 UI가 완벽하게 작동하도록 구성

새댓글

W:\g5\theme\BS4-Basic\side\side-basic.php