summernote 0.90  그누보드 웨지익 에디터  설치방법 및 호환설정  폰트 적용 방법 > 2025_1108_1434_16

https://www.11q.kr/bbs/board.php?bo_table=sw_free&wr_id=15

제목: 그누보드 웨지익 에디터 찾기/바꾸기메뉴) summernote-master_11q_0.90\config.js

gnuboard 의 설정

> plugin/editor/ 디렉토리에 summernote 이름으로 넣어주세요.

summernote  원본 소스 업데이트는

w:\g5\plugin\editor\summernote-master_11q_0.90\summernote\

에 원본을 복사 업데이트 하세요

* 그누보드 플러그인 에디터 설정 사용

summernote 를 선택 각각의 게시판 보드 설정에 에디터 적용 


* 지원 기능 특징 > 반응형 에디터에 최적 사용 추천 합니다
- summernote 기본 기능
- drag&drop 형태로 Image Upload 지원 
- video 태그 입력 플러그인

* 이미 bootstrap css 를 사용하는 경우
  editor.lib.php  에서 사용하지 않는 css 를  수정 해주시면 됩니다.

summernote 구성 방법 파일 구성

기본 그누보그 썸머노트 플러그인  다운로드

https://github.com/easylogic/gnuboard5-summernote

그누보드 에 설치

w:\g5\plugin\editor\summernote-master_11q_0.90\

업데이트 방법

w:\g5\plugin\editor\summernote-master_11q_0.90\summernote\ 폴더에 붙여 널기 합니다

https://summernote.org/getting-started/

여기는 조금 늦은 업데이트 되어 github 애서 다운로드 합니다

https://github.com/summernote/summernote

복사후 사용 가능 

아래 내용은 최종 파일 첨부 참조 하세요

w:\g5\plugin\editor\summernote-master_11q_0.90_find (2).7z

config.js 중요 변경 >

 // 한글 폰트및 클립보드 이미지 이중 삽입 방지

w:\g5\plugin\editor\summernote-master_11q_0.90\config.js

editor.lib.php 변경수정>

bootstrap js 최신 버전으로 업데이트 합니다

관련전체 소스 editor.lib.php

<style.css 추가항목>

css 원본 수정을 하지 않고 수정 추가작업으로 수정 합니다

w:\g5\plugin\editor\summernote-master_11q_0.90\style.css

 /* style.css 파일 내용 (예시) */

/* 전체화면 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;
}

/* ???? style.css 예시 */
/* 에디터 기본 폰트 변경 */
.note-editor.note-frame {
  font-family: 'Noto Sans KR', '맑은 고딕', sans-serif;
  font-size: 15px;
}
/* 제목 스타일 강조 */
.note-toolbar .note-btn {
  font-weight: 600;
  border-radius: 6px;
}
/* 에디터 영역 padding 조정 */
.note-editable {
  padding: 15px 20px;
  line-height: 1.7;
}
/* 이미지가 넘칠 때 반응형 처리 */
.note-editable img {
  max-width: 100%;
  height: auto;
}
/* 툴바 색상 커스터마이징 */
.note-toolbar {
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
}
/* 전체 border-radius 조정 */
.note-editor {
  border-radius: 10px;
}
/*  */
/* ???? Summernote 제목 크기 커스터마이징 */
.note-editable h1 { font-size: 2.2em; font-weight: 700; margin: 0.6em 0; }
.note-editable h2 { font-size: 1.8em; font-weight: 700; margin: 0.6em 0; }
.note-editable h3 { font-size: 1.5em; font-weight: 600; margin: 0.6em 0; }
.note-editable h4 { font-size: 1.3em; font-weight: 600; margin: 0.5em 0; }
.note-editable h5 { font-size: 1.15em; font-weight: 500; margin: 0.4em 0; }
.note-editable h6 { font-size: 1.0em; font-weight: 500; margin: 0.4em 0; }
/* 제목과 본문 간격 조정 */
.note-editable p {
  margin: 0.5em 0;
  line-height: 1.7;
}
/* 주) */
/* // 그누보도 sumernote 제목1,2,,,폰트적용 스킨적용1
// W:\g5\skin\board\BS4-Basic-Webzine_11q_pdf_php82\write.skin.php
$write['wr_content'] = htmlspecialchars_decode($write['wr_content']);
// 그누보도 sumernote 제목1,2,,,폰트적용 그누보도 sumernote 제목1,2,,,폰트적용 스킨적용1 */

그누보드 스킨보드 설정>

초기 제목1(h1),, 적용후 초기 입력시 적용후  수정시 적용 문제 대응

/* // 그누보도 sumernote 제목1,2,,,폰트적용 스킨적용1
// W:\g5\skin\board\BS4-Basic-Webzine_11q_pdf_php82\write.skin.php
$write['wr_content'] = htmlspecialchars_decode($write['wr_content']);
// 그누보도 sumernote 제목1,2,,,폰트적용 그누보도 sumernote 제목1,2,,,폰트적용 스킨적용1 */

을 추가 합니다

설정사례 일부 > summernote  폰트 적용 방법

// [config.js 파일 내] .summernote({...}) 부분 수정

      // toolbar

end > 2025_1108_1428_08