😌 간단한 게시판 구현을 위해 썸머노트를 이용하기로 했다
1. 썸머노트 기본세팅
- CDN방식 연결
// 썸머노트 연결
<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>
// 부트스트랩, jQuery 연결 (없다면 적어줘야한다)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>- <style>
// 보기편하려고 잠시 넣어둠
<style type="text/css">
.write{
width: 760px;
margin: 50px;
display: flex;
flex-direction: column;
}
</style>- <body>
<div class="write">
<input type="text" placeholder="제목" id="title">
<textarea class="summernote" id="content"></textarea>
</div>- <script>
<script>
$(document).ready(function() {
$('.summernote').summernote();
});
</script>
이렇게만 세팅해두면 썸머노트가 잘 구현된 것을 확인할 수 있다
2. 썸머노트 메뉴 커스텀
- 메뉴바의 구성요소를 커스텀할 수 있다
<script>
$(document).ready(function() {
$('.summernote').summernote({
placeholder : '',
tabsize : 2,
height: 300,
minHeight : 300,
maxHeight : 300,
disableResizeEditor : true,
lang : 'ko-KR',
toolbar : [
['style', ['style'] ],
['fontsize', ['fontsize']],
['font',['bold','italic','underline','strikethrough','clear']],
['color',['color']],
['para',['paragraph']],
['height',['height']],
['table',['table']],
['insert',['picture','link','hr']],
['view',['codeview']]],
fontSizes : ['8','10','12','14','16','18','20','22','24','28','30','36','50','72'],
lineHeights : ['0.2','0.3','0.4','0.5','0.6','0.8','1.0','1.2','1.4','1.5','2.0','3.0'],
});
});
</script>
변경된 화면
'개발 > SpringBoot' 카테고리의 다른 글
| [SpringBoot] OAuth 로그인 - 1 사전 준비 (구글, 네이버, 카카오) (0) | 2024.02.14 |
|---|---|
| [SpringBoot] SpringSecurity - 2 로그인 실패 (0) | 2024.02.14 |
| [SpringBoot] SpringSecurity - 1 로그인 (0) | 2024.02.13 |
| [SpringBoot] 썸머노트(summernote) - 3 이미지 S3 저장 (1) | 2024.02.13 |
| [SpringBoot] 썸머노트(summernote) - 2 이미지 저장 (1) | 2024.02.13 |
