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
- 다음글 네이티브 자바스크립트 Selection API 사용 블럭 지정된 텍스트 가져오기 26.02.14
