[Spring] summernote 에디터로 이미지가 포함된 글 업로드하기

📌 환경

Spring Tool Suite 3 (STS3)

스프링 레거시 프로젝트

 

📌 흐름

1. summernote api를 추가한다.

1-1. 부트스트랩과 충돌이 일어날 수 있으므로 부트스트랩을 사용하지 않는 summernote lite를 사용한다.

2. 파일 업로드를 위해 `pom.xml`에 `gson` `common-io` `commons-fileupload` 의존성을 추가한다. 

3. `textarea` id를 summernote로 작성하면 summernote 에디터를 사용할 수 있다.

어머 미친 태그가 동작해버림

`<textarea id="summernote"></textarea>`

4. 내가 원하는 위치에 이미지를 업로드하기 위해 에디터에 summernote에서 제공하는 callbakcs 함수를 사용한다.

5. ajax로 Controller 메서드를 호출해 파일을 업로드한다. 이때 미리보기도 구현할 수 있다. 

 

📌 구현

1. summernote api를 추가한다.

1-1. summernote는 태그 자체를 몽땅 저장하는 에디터로 읽어올 때 페이지에서 사용하는 부트스트랩과 충돌이 일어날 수 있으므로 부트스트랩을 사용하지 않는 summernote lite를 사용한다. 

 

 

Summernote - Super Simple WYSIWYG editor

 

 

Getting Started를 누르면 다운로드할 수 있다.

 

 

 

 

 

 

`summernote-lite.css`

`summetnote-lite.js`

`lang` 폴더 내 `summetnote-ko-KR.js`

`font` 폴더 전체

 

요렇게 네가지만 사용할 거다!

 

 

 

 

`resources`에 넣어주고 사용할 페이지에서 script 태그를 추가해준다. 

`css`는 헤더에, `script`는 `</body>` 태그 바로 위에 넣어준당

 

<!-- summernote  -->
<link rel="stylesheet" href="${contextPath }/resources/summernote/summernote-lite.css">

.
.
.

<!--  summernote -->
<script src="${contextPath }/resources/summernote/summernote-lite.js"></script>
<script src="${contextPath }/resources/summernote/lang/summernote-ko-KR.js"></script>

 

 

 

 

2. 파일 업로드를 위해 `pom.xml`에 `gson` `common-io` `commons-fileupload` 의존성을 추가한다. 

 

<!--  파일 업로드 -->

<!--  json : gson -->
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.8.9</version>
</dependency>

<!--  fileutils -->
<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.11.0</version>
</dependency>

<!-- commons-fileupload -->
<!-- multipart등을 사용할수 있음 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>

 

 

3. `textarea` id를 summernote로 작성하면 summernote 에디터를 사용할 수 있다.

 

<form method="post" action="${contextPath }/insert">
    <input class="form-control" placeholder="제목" style="width:100%" name="title" required/>
    <textarea id="summernote" name="content" required></textarea>
    <button class="btn btn-primary">작성</button>
</form>

 

 

 

 

 

4. 내가 원하는 위치에 이미지를 업로드하기 위해 에디터에 summernote에서 제공하는 callbacks 함수를 사용한다.

5. ajax로 Controller 메서드를 호출해 파일을 업로드한다. 이때 미리보기도 구현할 수 있다. 

onImageUpload는 에디터에 이미지가 업로드되면 실행된다.

ajax의 insertImage는 에디터에 미리보기 이미지를 붙여주는 함수.

 

$(document).ready(function() {
	
//	summernote 에디터 설정 
	$('#summernote').summernote({
		  height: 300,
		  minHeight: null,
		  maxHeight: null,
		  focus: true,
		  lang: "ko-KR",
		  placeholder: '내용을 입력하세요.',
//		 에디터 리사이즈 금지 
		  disableResizeEditor : true,
//		  콜백 함수
//		  omImageUpload 이미지가 업로드 되었을 때 실행되는 함수
		  callbacks : {
			onImageUpload: function (files, editor, welEditable){
				 
				 	// 여러개의 이미지 업로드
                    for (var i = files.length - 1; i >= 0; i--) {
                        var fileName = files[i].name      

                        uploadSummernoteImageFile(files[i], this, fileName)
                    }// for
                    }// onImageUpload
		}// callbacks 
		 
	
	}); // summernote
}


// 이미지 업로드 ajax
function uploadSummernoteImageFile(file, el, caption) {
    data = new FormData()
    data.append('file', file)
    $.ajax({
        data: data,
        type: 'POST',
        url: 'uploadSummernoteImageFile',
        contentType: false,
        enctype: 'multipart/form-data',
        processData: false,
        dataType : 'json',
        success: function (data) {
            console.log(data);
            console.log(data.url);
            console.log(data.responseCode);
            
            $("#summernote").summernote(
                'insertImage', data.url
             );
        },
    })
}

 

 

 

 

`UploadController.java`

 

//	summernote 이미지 업로드
@PostMapping("/uploadSummernoteImageFile")
@ResponseBody
public String uploadSummernoteImageFile(@RequestParam("file")MultipartFile multipartFile, HttpServletRequest request){

//	json 객체 얻기
//	JSONObject와 다른 클래스임 
//	JSONObject == org.json.simple
//	JsonObject == com.google.json
	JsonObject jsonObject = new JsonObject();

//	저장 경로 설정(절대경로)
	String uploadPath = request.getSession().getServletContext().getRealPath("resources"); 
	String fileRoot = uploadPath + "/images";

//	업로드 파일 원본 이름, 확장자 추출
	String originalFileName = multipartFile.getOriginalFilename();
	String extension = originalFileName.substring(originalFileName.lastIndexOf("."));

//	새로운 파일명 생성(중복 방지) 랜덤 UUID
//	파일명에 한글이 들어가면 오류, 같은 이름의 다른 파일이 들어왔을 경우 덮어써지는 문제를 방지하기 위함
	String saveFileName = UUID.randomUUID() + "";

	File targetFile = new File(fileRoot + saveFileName);

	try {
//	업로드 파일의 inputstream 얻기
        InputStream fileStream = multipartFile.getInputStream();

//	파일을 지정된 경로(uploadPath)에 저장
        FileUtils.copyInputStreamToFile(fileStream, targetFile);

//	Json 객체에 이미지 url과 응답 코드 추가
//	프로젝트 resources에 넣었으니까 해당 경로를 불러옴
//	{"url" : 프로젝트명/resources/images/파일명}
        jsonObject.addProperty("url", "/프로젝트명/resources/images/" + saveFileName);
        jsonObject.addProperty("responseCode", "success");

        } catch (IOException e) {
    //	파일 저장 중 오류 발생하면 해당 파일 삭제, 에러 코드 추가 
            FileUtils.deleteQuietly(targetFile);
            jsonObject.addProperty("responseCode", "error");
            e.printStackTrace();
        }

    return jsonObject.toString();

}

 

 

request.getSession().getServletContext().getRealPath("resources"); 

절대 경로를 불러온다. 프로젝트에서 확인할 수 없고 `.metadata`에 들어감.

맥에서는 command + shift + . 으로 숨겨진 폴더를 볼 수 있다.

 

 

 

 

 

실행했을 때 개발자 도구 콘솔에 요렇게 뜨면 성공

 

 

 

@PostMapping("insert")
public String noticeInsert(HttpSession session, Board board) {
    Member member = (Member)session.getAttribute("member");
    board.setId(member.getId());
    board.setNickname(member.getNickname());

    int result = boardService.insert(board);

    return "redirect:/listAll";
}

 

 

이건 form 액션되면 실행되는 함수(글 작성 함수)

form 태그에서 input에 작성했던 name으로 getter가 동작하면서 객체를 매핑해주기 때문에 파라미터를 `Board`로 받아올 수 있음.

 

 

 

 

 

미리보기도 잘 구현되는 것을 볼 수 있당

 

 

 

 

 

 

📌 참고

[썸머노트] 썸머노트 에디터에 업로드한 이미지를 원하는 내부 경로에 저장하고 경로값을 DB에

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

Summernote[썸머노트] (1) : 웹 에디터 기본 설정과 사용 방법 Blog(6)