버전 정보 : v0.8.20
<!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>
summernote
wysiwygeditor
©2024, DevDream