Jechue World

이슈

: summernote toolbar 내 화살표 아이콘 중복 현상

이슈 스크린샷

환경

bootstrap.min.js (4.x 버전)

summernote-lite.js (v0.8.18 버전)

jquery.js (3.x버전)

summernote 호출 js

$("#summernote").summernote({
    height: 300,        // 에디터 높이
    minHeight: 300,    // 최소 높이
    maxHeight: null,    // 최대 높이(null 제한없음)
    focus: false,        // 에디터 로딩후 포커스를 맞출지 여부
    lang: "ko-KR",      // 한글 설정
    toolbar: [
                ['fontname', ['fontname']],     // 글꼴 설정
                ['fontsize', ['fontsize']],    // 글자 크기 설정
                ['style', ['bold', 'italic', 'underline','strikethrough', 'clear']], // 굵기, 기울임꼴, 밑줄,취소 선, 서식지우기
                ['color', ['forecolor','color']],    // 글자색
                ['table', ['table']],    // 표만들기
                ['para', ['ul', 'ol', 'paragraph']],    // 글머리 기호, 번호매기기, 문단정렬
                ['height', ['height']],    // 줄간격
                ['insert',['picture','link','video']],    // 그림첨부, 링크만들기, 동영상첨부
                ['view', ['fullscreen', 'codeview', 'help']]    // 코드보기, 확대해서보기, 도움말
    ],
      // 추가한 글꼴
    fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New','맑은 고딕','궁서','굴림체','굴림','돋음체','바탕체'],
     // 추가한 폰트사이즈
    fontSizes: ['8','9','10','11','12','14','16','18','20','22','24','28','30','36','50','72']

});

원인

:  bootstrap css내 .dropdown-toggle 속성, summernote css 내 .note-icon-caret 중복 노출

처리

: bootstrap 4.x 이상 사용시 dropdown-toggle 요소 때문에 중복 노출, 에디터 화면에서는 해당 요소 무시 처리

.dropdown-toggle::after {
    display:none;
}