이슈
: 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;
}