반응형
썸머노트(Summernote) 란?
이지웍 에디터로 "What You See Is What You Get 보는대로 얻는다라는 의미를 가지고 있습니다. 이 말은 즉 html처럼 따로 css문법을 이용해 디자인 편집을 하는것이 아닌 문서 편집 과정에서 화면에 포맷된 낱말 및 문장이 출력물과 동일하게 나오는 방식을 말합니다. 또 썸머노트는 bootstrap4에 기반을 둔 버전과 독립적으로 사용이 가능한 라이트버전을 선택해서 사용할 수 있겠습니다.
썸머노트(Summernote) 사용법
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
버튼 클릭후 다운로드가 끝나면
summernote-0.8.18=dist => lang => summernote-ko-KR.js 라이브러리를 넣어줘야한다.
넣는 방법은
[Spring boot] 이미지, JS, CSS 적용하는 방법
Spring Boot css, js, img 경로 추가하는 방법 Spring Boot가 아닌 Spring에서는 xml에서 따로 리스소 경로를 입력해줘야하지만 너무나 편한 Spring Boot는 spring-boot-starter-web에서 이러한 작업을 미리 해주..
soulno.tistory.com
2. 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>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/lang/summernote-ko-KR.min.js"></script>
마무리
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script>
<!-- include summernote-ko-KR -->
<script src="/resources/js/summernote-ko-KR.js"></script>
<title>글쓰기</title>
<script>
$(document).ready(function() {
$('#summernote').summernote({
placeholder : 'content',
minHeight : 370,
maxHeight : null,
focus : true,
lang : 'ko-KR'
});
});
</script>
</head>
<body>
<h2 style="text-align: center;">글 작성</h2>
<br>
<br>
<br>
<div style="width: 60%; margin: auto;">
<form method="post" action="/write">
<input type="text" name="writer" style="width: 20%;" placeholder="작성자" /><br> <input type="text" name="title" style="width: 40%;" placeholder="제목" />
<!-- 파일 업로드 시작 -->
<br><br>
<div class="row" id="fileContainer">
<div class="file-field input-field col s12">
<div class="btn">
<span><i class="material-icons left"></i></span> <input type="file" name="files" multiple>
</div>
<div class="file-path-wrapper">
<br>
</div>
<span class="helper-text">첨부파일로 업로드 가능한 용량은 최대 50MB 입니다.</span>
</div>
</div>
<!-- 파일 업로드 끝 -->
<br>
<br>
<textarea id="summernote" name="content"></textarea>
<input id="subBtn" type="button" value="글 작성" style="float: right;" onclick="goWrite(this.form)" />
</form>
</div>
</body>
</html>반응형
'Back-End > Java' 카테고리의 다른 글
| [Spring boot] 이미지, JS, CSS 적용하는 방법 (0) | 2021.07.13 |
|---|---|
| [Spring] Annotation 정의와 정리 (0) | 2021.07.05 |
| JPA와 MyBatis의 차이를 알아보자 (0) | 2021.07.01 |
| [Spring Boot] 스프링 부트 처음부터 시작하기 (0) | 2021.06.26 |
| [Spring] 스프링 Security 게시판 및 파일첨부 예제 (1) | 2021.06.24 |