<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>summernote</title>
<style>
/* Bootstrap 4 이상, 수정이 필요한 CSS */
.note-editor .note-dropdown-menu {
min-width: 347px !important;
}
.note-modal-footer .note-btn {
float: right;
margin-right: 20px;
margin-top: -13px;
}
.note-btn-group .note-icon-caret {
display: none;
}
.note-color .note-icon-caret {
display: inline;
}
.note-color .dropdown-toggle::after {
display: none;
}
</style>
</head>
<body>
<!-- summernote editor container -->
<div id="contents"></div>
<!-- jQuery, Bootstrap 3 or 4 or 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- summernote JS, CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.css">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/lang/summernote-ko-KR.min.js"></script>
<script>
$(document).ready(function(){
$("#contents").summernote({
// 에디터 높이
height: 500,
// 에디터 한글 설정
lang: "ko-KR"
});
});
</script>
</body>
</html>