43) CkEditor4 설치 및 사용법(이미지 업로드)

22.6.17

 

 - CkEditor4를 사용해서 게시판 에디터를 자동으로 적용!!! CDN과 다운로드 형식 2가지가 있는데 다운로드는 에러가 많아서 CND을 추천(물론 커스텀 설정을 하려면 다운로드로 받아서 해야만 한다)

 - 게시판 에디터와 더불어 이미지 업로드까지 구현해 보았다.

 

---

 

1. CkEditor 다운로드 및 설치

  - CkEditor는 최신버전은 5버젼이지만, 4버젼이 가장 널리 쓰이는 것 같아 4 버젼(4.19.0)으로 간택!

  - 아래 링크에서 다운!

https://ckeditor.com/ckeditor-4/download/?undefined-addons=

CKEditor 4 - Download Latest Version

 - 아래 링크는 원하는 걸 선택할 수 있는 Onilne Builder 사이트

https://ckeditor.com/cke4/builder

CKEditor 4 online builder

 

 - 둘 중 원하는걸 선택해서 쓰자. 여기서는 첫 번째 방식을 간략히 설명

 

 - 원하는 패키지를 선택, 스탠다드 혹은 풀 패키지를 선택해서 다운로드

 - 압축된 파일이 다운로드 되는데, 이를 압축을 풀어서 webapp(or webcontent)안에 넣어주면 됨(WEB-INF안에 넣으면 인식 못함!!!! 중요!!!)

 - 나는 webapp/resources/cdeditor로 경로를 설정함

 - 이런식으로 경로가 설정된다(에러는 무시, 변경점 파일이라 실행에 영향을 주지 않는다)

 

 - 혹은 CDN 경로를 복사하여 Header 부분에 바로 넣어줘도 된다(오히려 에러가 적게 난다)

 - 첫번째는 CDN 2번째는 다운로드 받아서 내 프로젝트에 넣은 경로를 적어주면 된다.

<script src="//cdn.ckeditor.com/4.19.0/full/ckeditor.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/ckeditor/ckeditor.js"></script>

 - 그리고 원하는 testarea 태그가 있는 view에 아래의 코드를 넣어주면

<script>
$(function () {
	CKEDITOR.replace('contents', {
		filebrowserUploadUrl : '${pageContext.request.contextPath}/adm/fileupload.do'
	});
});
</script>

 - 이렇게 게시판이 에디터가 자동으로 불러와진다!

 - 여기서 filebrowserUploadUrl는 Controller에서 설정한 매핑 주소! 실제 주소가 아니니 착각하면 안됨!

 

2. 이미지 업로드 구현하기

 

 1) pom.xml 에 Maven Dependency 추가하기

<dependency>
	<groupId>com.google.code.gson</groupId>
	<artifactId>gson</artifactId>
	<version>2.8.9</version>
</dependency>
        
<dependency>
	<groupId>org.apache.commons</groupId>
	<artifactId>commons-lang3</artifactId>
	<version>3.4</version>
</dependency>
        
<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>1.3.3</version>
</dependency>

 

2) RootConfig에 Bean 등록하기

@Bean
	public CommonsMultipartResolver multipartResolver() {
		CommonsMultipartResolver resolver = new CommonsMultipartResolver(); 
		resolver.setMaxUploadSize(5248800);
		resolver.setMaxInMemorySize(10485760);
		return resolver; 
	}

 - 혹은 contexts-servlet.xml 에 추가해도 됨

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	//최대 업로드 가능한 바이트 사이즈( -1로 설정할 경우 언리미티드! 제한없음!)
    <property name="maxUploadSize" value="52428800" />
    //최대 메모리 설정 바이트 사이즈
	<property name="maxInMemorySize" value="10485760" />
</bean>

 - 여기서 클래스의 마지막 이름이 Spring Bean의 클래스 네임, id가 메서드 이름이다.

 

3) Controller 설정

package com.hoon.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import com.google.gson.JsonObject;

@Controller
@RequestMapping("/adm/")
public class CkeditorFileUploadController {

	@PostMapping("/fileupload.do")
	@ResponseBody
	public String fileUpload(HttpServletRequest request, HttpServletResponse response,
			MultipartHttpServletRequest multiFile) throws IOException {
	
		//Json 객체 생성
		JsonObject json = new JsonObject();
		// Json 객체를 출력하기 위해 PrintWriter 생성
		PrintWriter printWriter = null;
		OutputStream out = null;
		//파일을 가져오기 위해 MultipartHttpServletRequest 의 getFile 메서드 사용
		MultipartFile file = multiFile.getFile("upload");
		//파일이 비어있지 않고(비어 있다면 null 반환)
		if (file != null) {
			// 파일 사이즈가 0보다 크고, 파일이름이 공백이 아닐때
			if (file.getSize() > 0 && StringUtils.isNotBlank(file.getName())) {
				if (file.getContentType().toLowerCase().startsWith("image/")) {

					try {
						//파일 이름 설정
						String fileName = file.getName();
						//바이트 타입설정
						byte[] bytes;
						//파일을 바이트 타입으로 변경
						bytes = file.getBytes();
						//파일이 실제로 저장되는 경로 
						String uploadPath = request.getServletContext().getRealPath("/resources/ckimage/");
						//저장되는 파일에 경로 설정
						File uploadFile = new File(uploadPath);
						if (!uploadFile.exists()) {
							uploadFile.mkdirs();
						}
						//파일이름을 랜덤하게 생성
						fileName = UUID.randomUUID().toString();
						//업로드 경로 + 파일이름을 줘서  데이터를 서버에 전송
						uploadPath = uploadPath + "/" + fileName;
						out = new FileOutputStream(new File(uploadPath));
						out.write(bytes);
						
						//클라이언트에 이벤트 추가
						printWriter = response.getWriter();
						response.setContentType("text/html");
						
						//파일이 연결되는 Url 주소 설정
						String fileUrl = request.getContextPath() + "/resources/ckimage/" + fileName;
						
						//생성된 jason 객체를 이용해 파일 업로드 + 이름 + 주소를 CkEditor에 전송
						json.addProperty("uploaded", 1);
						json.addProperty("fileName", fileName);
						json.addProperty("url", fileUrl);
						printWriter.println(json);
					} catch (IOException e) {
						e.printStackTrace();
					} finally {
						if(out !=null) {
							out.close();
						}
						if(printWriter != null) {
							printWriter.close();
						}
					}
				}
			}
		}
			return null;
	}

}

 

 - 많은 내용이 있는데, 주석으로 갈음함

 

 

3. CkEditor4 를 이용해 이미지 업로드 하기!

 

 - 이미지 업로드 아이콘을 선택!

 - 이미지 정보창이 먼저 뜨지만, 업로드 탭을 선택해 파일선택 후 서버로 전송 클릭!!!!

 

 - 그러면 이렇게 설정된 URL이 등록되면서 미리보기에 사진이 뜬다.

 - 이런식으로 CkEditor로 게시판 내용 편집 및 이미지 업로드를 할 수 있다.

 

---

 - 여기까지 CkEditor와 이미지 업로드에 대해서 포스팅

 - 다음은 이 과정에서 일어났던 오류에 대해서 작성. 너무나도 많은(하지만 너무나도 허무했던 오류들) 오류들에 대해 포스팅할 것