[스프링]20. summernote를 이용한 글쓰기 폼 구현

1.summernote light 버전 다운

https://summernote.org/

Summernote - Super Simple WYSIWYG editor

 

2.개인 프로젝트에 디렉토리 만들기

 

나는 resources 파일에 4개의 파일들을 위치 시켰다,

 

3.글쓰기.jsp 에서 다운파일 적용

<div class="form-group">
  <label>Text area</label>
  <textarea class="summernote" style="width: 100%; height:412px;" class="form-control" rows="3" name='content'></textarea>
</div>

textarea 태그의 클래스에 "summernote" 를 지정한다.

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

<script src=" https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/lang/summernote-ko-KR.min.js"></script>

<script src="/resources/summernote/summernote-lite.js"></script>

<script src="/resources/summernote/lang/summernote-ko-KR.js"></script>

<link rel="stylesheet" href="/resources/summernote/summernote-lite.css">


<script>
$('.summernote').summernote({
height: 150,
lang: "ko-KR"
});
</script>

그리고 해당 구문을 선언해주자.

 

 

4.적용 확인!!!