[SummerNote] 로딩이 되지 않는 현상

Spring Boot에서 jsp를 통해 게시판을 구현하는 도중, 게시글 작성 페이지를 만드는데, Summer Note 에디터를 불러오는 코드를 작성했음에도 불구하고, 적용이 되지 않았다.
사유는 다음과 같다.

Summer note의 경우  $(document).ready 안에서 실행되어야 한다는 것이다.
이 코드가 DOM이 완전히 로드되기 전에 실행되면 Summernote가 동작하지 않는다.

 

$(document).ready(function() {
        $('#summernote').summernote({

            // 에디터 크기 설정
            height: 800,
            // 에디터 한글 설정
            lang: 'ko-KR',
            toolbar: [
                ['fontsize', ['fontsize']],
                // 글자 [굵게, 기울임, 밑줄, 취소 선, 지우기]
                ['style', ['bold', 'italic', 'underline','strikethrough', 'clear']],
                // 글자색 설정
                ['color', ['color']],
                // 표 만들기
                ['table', ['table']],
                // 서식 [글머리 기호, 번호매기기, 문단정렬]
                ['para', ['ul', 'ol', 'paragraph']],
                // 줄간격 설정
                ['height', ['height']],
                ['insert',['picture']]
            ],
            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','96'],
            // focus는 작성 페이지 접속시 에디터에 커서를 위치하도록 하려면 설정. true/false
            focus : true,
            // callbacks은 이미지 업로드 처리
            callbacks : {
                onImageUpload : function(files, editor, welEditable) {
                    // 다중 이미지 처리를 위한 for문
                    for (var i = 0; i < files.length; i++) {
                        imageUploader(files[i], this);
                    }
                }
            }
        });
    });
    </script>