Summernote에서 전체 화면(Fullscreen) 모드 적용 > 자료실

회원로그인

오늘 본 게시물

오늘 본 페이지

없음

오늘 본 C.m.A Util

없음

자료실

자료실

Summernote에서 전체 화면(Fullscreen) 모드 적용

페이지 정보

본문

// 기본 설정 (툴바 추가)
$('#summernote').summernote({
  toolbar: [
    ['view', ['fullscreen', 'codeview', 'help']] // 툴바에 fullscreen 추가
  ]
});

// 자동 전체 화면 (초기화 시) : 페이지 로딩 시 바로 전체 화면으로 시작하려면 callback을 사용
$('#summernote').summernote({
  callbacks: {
    onInit: function() {
      $(this).summernote('fullscreen.toggle');
    }
  }
});
// 전체 화면 적용시 기본 레이아웃 css 컨트롤을 위함
$(document).on('click', '.note-editor .note-toolbar .note-btn-group button.btn-fullscreen', function(e){ 
	var isFullscreen = $('#summernote').summernote('fullscreen.isFullscreen'); /* 전체화면 상태 체크 */
	//console.log('Is Fullscreen:', isFullscreen);
	
	if(isFullscreen == true) { // 전체화면 true 일때
		if( $('body').hasClass('summernote-fullscreen') === true ) {
			/* class 존재 */
		} else {
			$('body').addClass('summernote-fullscreen'); 
		}
	}
	if(isFullscreen == false) { // 전체화면 false 일때
		if( $('body').hasClass('summernote-fullscreen') === true ) {
			$('body').removeClass('summernote-fullscreen'); 
		} else {
			/* class X */
		}
	}
});
.note-editor.note-frame.fullscreen {z-index: 9999 !important; background-color: white !important; height: 100vh !important;}
.note-editor.note-frame.fullscreen .note-toolbar{}
.note-editor.note-frame.fullscreen .note-toolbar .note-btn-group{}
.note-editor.note-frame.fullscreen .note-toolbar .note-btn-group button.btn-fullscreen{}
.note-editor.note-frame.fullscreen .note-editable { overflow-y: scroll !important; }

/* 전체 화면 적용시 기본 레이아웃 css 컨트롤 아래는 자신에 맞게 알맞게 설정 */
body.summernote-fullscreen{} 
body.summernote-fullscreen #hd, 
body.summernote-fullscreen #hd_wrapper {display: none;}




추천 0 비추천 0

  • 회사 : Cginjs
  • 대표 : Cginjs
  • 주소 :
  • 메일 : admin@mysample.com
  • 사업자 등록번호 :
Copyright © Cginjs All rights reserved.
notice
Warning: Undefined variable $HTTP_ACCEPT_LANGUAGE in /cginjs/www/bbs/visit_insert.inc.php on line 131