2. CKEditor 이미지를 서버에 저장하고 해당 내용을 출력해보기
CKEditor_insert.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CKEditor 연습</title>
<script src="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js"></script>
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.css">
<script type="importmap">
{
"imports": {
//웹 페이지에서 사용할 변수명 : CKEditor에서 import할 js 파일입니다.
"CKtest": "https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js",
"CKtest/": "https://cdn.ckeditor.com/ckeditor5/43.1.0/",
//CKEditor에서 지원하는 설정을 불러올 js 파일을 생성해주고 import 해줍니다.
"editorConfig": "./js/CKEditorConfig.js",
"editorConfig/": "./js/"
}
}
</script>
<script type="module" src="./js/CKEditor.js"></script>
</head>
<body>
<!-- CKEditor가 보여질 공간 -->
<form action="CKContent" method="post">
<textarea name="Content" id="editor" rows="10" cols="80"></textarea>
<button type="submit">글 작성</button>
</form>
</body>
</html>
CKEditor.js
이전 포스팅에서 import 한 Cktest와 editorConfig 를 js 파일에서 사용하기 위해 추가해주고 사용합니다.
//editorConfig.js에서 CKEditor 설정 정보 불러오기
import { editorConfig } from 'editorConfig';
import { ClassicEditor } from 'CKtest';
//CKEditor 생성
console.log('CKEditor 생성');
//CKEditor 생성하기위한 위치를 설정해줍니다.
//editorConfig = 이전 포스팅에서 설정한 CKEditor의 설정입니다.
ClassicEditor.create(document.querySelector('#editor'), editorConfig)
.then( editor => {
//form 데이터를 클릭했을때 넘어갈 데이터를 설정합니다.
window.editor = editor;
console.log('CKEditor 전송 정보 : ' + editor);
})
.catch(err => {
console.log('발생 오류 : '+err);
});
Upload_Test.java
package ckeditor_package;
import java.io.File;
import java.io.IOException;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.Part;
@WebServlet("/upload")
@MultipartConfig
public class Upload_Test extends HttpServlet {
private static final long serialVersionUID = 1L;
public Upload_Test() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
// simpleUpload 의 기본 파라미터는 "upload" 파라미터로 전송된다.
Part filePart = request.getPart("upload");
//넘어오는 파일의 명칭과 형식을 가져와서 변수에 저장합니다.
String fileName = filePart.getSubmittedFileName();
//가져온 파일을 저장할 위치를 지정해줍니다.
String uploadPath = getServletContext().getRealPath("/uploads/");
//저장될 위치를 확인하기 위한 로그
System.out.println("파일 주소 : "+uploadPath);
//해당 폴더가 없다면 새성하기 위한 코드입니다.
File uploadDir = new File(uploadPath);
if (!uploadDir.exists()) uploadDir.mkdir();
//운영체제마다 파일 구분자가 다르기 때문에 File.separator를 추가해줍니다.
filePart.write(uploadPath + File.separator + fileName);
//view로 보내줄 파일 주소를 저장해서 전달해줍니다.
String fileUrl = request.getContextPath() + "/uploads/" + fileName;
System.out.println("파일 주소 : "+fileUrl);
response.getWriter().write("{ \"url\": \"" + fileUrl + "\" }");
}
}
CKEditor_Test.java
package ckeditor_package;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;
@WebServlet("/CKContent")
public class CKEditor_Test extends HttpServlet {
private static final long serialVersionUID = 1L;
public CKEditor_Test() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//----------------------------------------------------------------------------
//UTF-8 형식으로 보내주니 UTF-8 로 인코딩 해주고
request.setCharacterEncoding("UTF-8");
String content = request.getParameter("Content");
//View에서 보내준 내용 확인합니다.
System.out.println(content);
//폴더를 명시해줍니다.
String folder = "/uploads/";
//명시된 폴더를 추가해주고 내 서버의 폴더주소를 불러옵니다.
String uploadPath = getServletContext().getRealPath(folder);
//----------------------------------------------------------------------------
//파일이 있는지 확인하기 위해 해당 폴더의 파일을 가져옵니다.
File directory = new File(uploadPath);
//폴더에 있는 파일리스트를 가져옵니다.
//배열리스트로 전환
ArrayList<File> arr_files = new ArrayList<File>(Arrays.asList(directory.listFiles()));
//보내준 파일에서 이미지 경로만 문자열 배열로 불러와 줍니다.
String[] img_paths = content.split("src=\"");
//문자열 배열을 기준으로 for문을 돌립니다.
for(String img_path : img_paths) {
System.out.println("받아온 이미지 태그 : "+img_path);
try {
//받아온 이미지 경로 끝에 큰따옴표(")가 붙어있기 때문에 제거해줍니다.
String editorContent = uploadPath+img_path.split("\"")[0].toString().substring(img_path.split("\"")[0].lastIndexOf("/")+1);
System.out.println("이미지 : "+editorContent);
File remove_file = new File(editorContent);
if(arr_files.remove(remove_file)) {
System.out.println("배열리스트에서 지워진 이미지 : " + remove_file);
}
//파일 이름만 불러오기 위해 /를 제거 해줍니다.
}catch (Exception e) {
}
}
//가져온 파일을 하나씩 확인합니다.
for (File file : arr_files) {
//파일이라면 실행합니다.
System.out.println("저장되어 있는 파일 : "+file);
file.delete();
}
//----------------------------------------------------------------------------
request.setAttribute("content", content);
request.getRequestDispatcher("/CkEditor_View.jsp").forward(request, response);
}
}
CKEditor_View.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CKEditor 확인</title>
</head>
<body>
<div id="readEditor">${content}</div>
</body>
</html>
서버에서 보내준 내용을 EL식으로 추가하면
서버에서 전달해준 HTML 태그를 출력하여 화면에 뿌려줍니다.
아래 사진들은 실행된 사진들입니다.
728x90
'추가 공부 > Web' 카테고리의 다른 글
| Chart.js 적용법과 특징 (2) | 2024.10.04 |
|---|---|
| Spring boot 사전 지식 채우 (2) | 2024.09.29 |
| CKEditor5 사용해보기 1 (1) | 2024.09.17 |
| CKEditor5 연동 (1) | 2024.09.15 |
| JSP Selenium 사용해보기 3 Naver 지도 크롤링 (0) | 2024.09.11 |
2. CKEditor 이미지를 서버에 저장하고 해당 내용을 출력해보기
CKEditor_insert.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CKEditor 연습</title>
<script src="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js"></script>
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.css">
<script type="importmap">
{
"imports": {
//웹 페이지에서 사용할 변수명 : CKEditor에서 import할 js 파일입니다.
"CKtest": "https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js",
"CKtest/": "https://cdn.ckeditor.com/ckeditor5/43.1.0/",
//CKEditor에서 지원하는 설정을 불러올 js 파일을 생성해주고 import 해줍니다.
"editorConfig": "./js/CKEditorConfig.js",
"editorConfig/": "./js/"
}
}
</script>
<script type="module" src="./js/CKEditor.js"></script>
</head>
<body>
<!-- CKEditor가 보여질 공간 -->
<form action="CKContent" method="post">
<textarea name="Content" id="editor" rows="10" cols="80"></textarea>
<button type="submit">글 작성</button>
</form>
</body>
</html>
CKEditor.js
이전 포스팅에서 import 한 Cktest와 editorConfig 를 js 파일에서 사용하기 위해 추가해주고 사용합니다.
//editorConfig.js에서 CKEditor 설정 정보 불러오기
import { editorConfig } from 'editorConfig';
import { ClassicEditor } from 'CKtest';
//CKEditor 생성
console.log('CKEditor 생성');
//CKEditor 생성하기위한 위치를 설정해줍니다.
//editorConfig = 이전 포스팅에서 설정한 CKEditor의 설정입니다.
ClassicEditor.create(document.querySelector('#editor'), editorConfig)
.then( editor => {
//form 데이터를 클릭했을때 넘어갈 데이터를 설정합니다.
window.editor = editor;
console.log('CKEditor 전송 정보 : ' + editor);
})
.catch(err => {
console.log('발생 오류 : '+err);
});
Upload_Test.java
package ckeditor_package;
import java.io.File;
import java.io.IOException;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.Part;
@WebServlet("/upload")
@MultipartConfig
public class Upload_Test extends HttpServlet {
private static final long serialVersionUID = 1L;
public Upload_Test() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
// simpleUpload 의 기본 파라미터는 "upload" 파라미터로 전송된다.
Part filePart = request.getPart("upload");
//넘어오는 파일의 명칭과 형식을 가져와서 변수에 저장합니다.
String fileName = filePart.getSubmittedFileName();
//가져온 파일을 저장할 위치를 지정해줍니다.
String uploadPath = getServletContext().getRealPath("/uploads/");
//저장될 위치를 확인하기 위한 로그
System.out.println("파일 주소 : "+uploadPath);
//해당 폴더가 없다면 새성하기 위한 코드입니다.
File uploadDir = new File(uploadPath);
if (!uploadDir.exists()) uploadDir.mkdir();
//운영체제마다 파일 구분자가 다르기 때문에 File.separator를 추가해줍니다.
filePart.write(uploadPath + File.separator + fileName);
//view로 보내줄 파일 주소를 저장해서 전달해줍니다.
String fileUrl = request.getContextPath() + "/uploads/" + fileName;
System.out.println("파일 주소 : "+fileUrl);
response.getWriter().write("{ \"url\": \"" + fileUrl + "\" }");
}
}
CKEditor_Test.java
package ckeditor_package;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;
@WebServlet("/CKContent")
public class CKEditor_Test extends HttpServlet {
private static final long serialVersionUID = 1L;
public CKEditor_Test() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//----------------------------------------------------------------------------
//UTF-8 형식으로 보내주니 UTF-8 로 인코딩 해주고
request.setCharacterEncoding("UTF-8");
String content = request.getParameter("Content");
//View에서 보내준 내용 확인합니다.
System.out.println(content);
//폴더를 명시해줍니다.
String folder = "/uploads/";
//명시된 폴더를 추가해주고 내 서버의 폴더주소를 불러옵니다.
String uploadPath = getServletContext().getRealPath(folder);
//----------------------------------------------------------------------------
//파일이 있는지 확인하기 위해 해당 폴더의 파일을 가져옵니다.
File directory = new File(uploadPath);
//폴더에 있는 파일리스트를 가져옵니다.
//배열리스트로 전환
ArrayList<File> arr_files = new ArrayList<File>(Arrays.asList(directory.listFiles()));
//보내준 파일에서 이미지 경로만 문자열 배열로 불러와 줍니다.
String[] img_paths = content.split("src=\"");
//문자열 배열을 기준으로 for문을 돌립니다.
for(String img_path : img_paths) {
System.out.println("받아온 이미지 태그 : "+img_path);
try {
//받아온 이미지 경로 끝에 큰따옴표(")가 붙어있기 때문에 제거해줍니다.
String editorContent = uploadPath+img_path.split("\"")[0].toString().substring(img_path.split("\"")[0].lastIndexOf("/")+1);
System.out.println("이미지 : "+editorContent);
File remove_file = new File(editorContent);
if(arr_files.remove(remove_file)) {
System.out.println("배열리스트에서 지워진 이미지 : " + remove_file);
}
//파일 이름만 불러오기 위해 /를 제거 해줍니다.
}catch (Exception e) {
}
}
//가져온 파일을 하나씩 확인합니다.
for (File file : arr_files) {
//파일이라면 실행합니다.
System.out.println("저장되어 있는 파일 : "+file);
file.delete();
}
//----------------------------------------------------------------------------
request.setAttribute("content", content);
request.getRequestDispatcher("/CkEditor_View.jsp").forward(request, response);
}
}
CKEditor_View.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CKEditor 확인</title>
</head>
<body>
<div id="readEditor">${content}</div>
</body>
</html>
서버에서 보내준 내용을 EL식으로 추가하면
서버에서 전달해준 HTML 태그를 출력하여 화면에 뿌려줍니다.
아래 사진들은 실행된 사진들입니다.
728x90
'추가 공부 > Web' 카테고리의 다른 글
| Chart.js 적용법과 특징 (2) | 2024.10.04 |
|---|---|
| Spring boot 사전 지식 채우 (2) | 2024.09.29 |
| CKEditor5 사용해보기 1 (1) | 2024.09.17 |
| CKEditor5 연동 (1) | 2024.09.15 |
| JSP Selenium 사용해보기 3 Naver 지도 크롤링 (0) | 2024.09.11 |
