부트스트랩 5버젼과 섬머노트 부트스트랩 4버젼 충돌 해결

아래 포스트 참고하여 섬머노트 라이트 버젼을 설치하면 충돌이 해결된다. 

 

https://programmer93.tistory.com/27

Summernote 사용법 , 썸머노트 사용법 - 삽질중인 개발자

 

 

 

 

1.다운 받고 압축 풀어서

 

 

 

 

 

2. 해당 필요한 파일만 복붙으로 폴더 구성하고

 

 

 

 

 

<!-- summer note -->
<script src="/js/summernote/summernote-lite.js"></script>
<script src="/js/summernote/lang/summernote-ko-KR.js"></script>
<link rel="stylesheet" href="/css/summernote/summernote-lite.css">

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

3. jsp파일 헤더부분 안에 위 내용 복붙해주고

 

 

 

<form method="post">
	<textarea id="summernote" name="editordata"></textarea>
</form>

4. html 내용 구성시 저런식으로 해주고

 

 

<script>
$(document).ready(function() {
	//여기 아래 부분
	$('#summernote').summernote({
		  height: 300,                 // 에디터 높이
		  minHeight: null,             // 최소 높이
		  maxHeight: null,             // 최대 높이
		  focus: true,                  // 에디터 로딩후 포커스를 맞출지 여부
		  lang: "ko-KR",					// 한글 설정
		  placeholder: '최대 2048자까지 쓸 수 있습니다'	//placeholder 설정
          
	});
});
</script>

 

5. 웹에디터 로딩 스크립트 구문 붙여주면 끝

위 이미지는 4,5번 작성시 참고하라고 넣은 이미지이다.

 

4.html구성은

27,32,39행에 해당한다.

 

5.스크립트 구문은 44행부터 블럭영역부분이다.