<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 게시물 입력 작성 실패시 띄우는 메세지-->
<%
String msg = "";
if(request.getAttribute("msg") != null) {
msg = (String)request.getAttribute("msg");
}
if(msg != "") {
out.println("<script>alert('"+msg+"');</script>");
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글쓰기</title>
<link href= "<%=request.getContextPath()%>/resources/css/monthlyWriteStyle.css" type-"text/css" rel="stylesheet" >
<!-- TinyMCE 스크립트 추가 -->
<script src="https://cdn.tiny.cloud/1/kim30qal93k1j6w6rqi9isinuueeqjn0bb3z9m4y040lj1lg/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: "textarea", // TinyMCE를 적용할 textarea 선택
plugins: "advlist autolink link image lists charmap preview paste", // 플러그인 설정
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image", // 툴바 설정
menubar: false, // 메뉴바 비활성화
width: 900,
height: 800, // 에디터 높이 설정
paste_data_images: true, // 클립보드에서 복사한 이미지를 Base64로 처리
automatic_uploads: false, // 이미지 자동 업로드 비활성화
// 이미지 업로드를 Base64로 처리
images_upload_handler: function (blobInfo, success, failure) {
const reader = new FileReader(); // FileReader를 사용하여 파일을 Base64로 변환
reader.onload = function () {
success(reader.result); // Base64 데이터를 TinyMCE에 전달
};
reader.onerror = function () {
failure('이미지를 처리하는 동안 문제가 발생했습니다.');
};
reader.readAsDataURL(blobInfo.blob()); // 파일을 Base64로 읽기
},
// 붙여넣기 이미지를 Base64로 처리
paste_postprocess: function(plugin, args) {
console.log("붙여넣기 처리 중:", args.node.innerHTML);
}
});
function check() {
var fm = document.frm;
if(fm.msubject.value == "") {
alert("제목을 입력해주세요");
fm.msubject.focus(); // 커서가 입력안한 해당 자리로 갈수 있도록
return;
}
var ans = confirm("저장하시겠습니까?");
if(ans == true) {
fm.action="<%=request.getContextPath()%>/monthly/monthlyWriteAction.aws";
fm.method="post";
fm.enctype="multipart/form-data"; //파일을 올리기 위해서 지정해야한다.
fm.submit(); //파일 업로드를 포함한 폼 데이터를 전송할 때 필요한 인코딩 방식을 지정
}
return;
}
</script>
</head>
<body>
<form name="frm" class="form-container">
<div class="form-group">
<label for="subject">제목:</label>
<input type="text" id="msubject" name="msubject" class="input-title">
</div>
<div class="form-group">
<label for="introduction">소개글:</label>
<input type="text" id="introduction" name="introduction" class="input-introduction">
</div>
<div class="form-group">
<label for="file">썸네일:</label>
<input type="file" id="attachfile" name="attachfile" class="input-file">
</div>
<textarea name="mcontents" class="textarea-content"></textarea>
<button type="button" class="submit-button" onclick="check();">제출</button>
</form>
</body>
</html>원래는 이달의 빵집 리스트에서 보여지는 화면은 대표 이미지와 제목, 날짜, 본문 내용이 3줄 정도 나오도록 설정했는데, 에디터 때문인지 미리보기 내용도 간격이 너무 띄어져서 나오고 썸네일 이미지도 제대로 안 나와서 html에 소개글 입력과 썸네일을 넣을 수 있도록 file 타입도 하나 넣었다.
// 글쓰기 처리
@RequestMapping(value= "monthlyWriteAction.aws")
public String monthlyWriteAction(
MonthlyVo monv, // 게시글 정보를 담고 있는 객체
@RequestParam("attachfile") MultipartFile attachfile, // 업로드된 파일을 받기 위한 MultipartFile 객체
HttpServletRequest request,
RedirectAttributes rttr
)throws Exception {
MultipartFile file = attachfile; //저장된 파일 이름 꺼내기
String uploadedFileName=""; // 파일이 업로드된 후 저장된 파일명을 저장할 변수
if(! file.getOriginalFilename().equals("")) { // 해당 파일이 존재한다면
// 파일을 서버에 저장하고 저장된 파일 이름을 반환받음
uploadedFileName = UploadFileUtiles.uploadFile(uploadPath, file.getOriginalFilename(), file.getBytes());
}
// 사용자 정보 설정
String midx = request.getSession().getAttribute("midx").toString();
int midx_int = Integer.parseInt(midx);
// BoardVo 객체에 데이터 설정
monv.setMidx(midx_int);
monv.setUploadedFilename(uploadedFileName); // vo에 담아서 가져가기
// 게시글 삽입 서비스 호출
int value = monthlyService.monthlyInsert(monv);
//System.out.println("value===" + value);
// 리다이렉트 경로 설정
String path = "";
if (value == 1) { // 성공 시
path = "redirect:/monthly/monthlyList.aws";
} else {
rttr.addFlashAttribute("msg", "입력이 잘못되었습니다.");
path = "redirect:/monthly/monthlyWrite.aws";
}
return path;
}controller를 제외하고는 board드에서 사용한 코드들이 모두 똑같다.
그리고 썸네일에 들어가는 파일이 db에서 보면 -s자가 붙어 실제 원본 파일이 아닌 복사한 썸네일 파일이 들어가서 화질이 엄청 깨지는데, 이건 미리 util 폴더에 있는 UploadFileUtiles로 들어가서 썸네일을 만들어내는 코드를 주석 처리를 해서 원본 파일이 db에 들어가게 해서 원본 파일을 쓸 수 있도록 했다.
빨간 박스는 주석 처리를 하고, 밑줄 친 코드를 추가해주기.
전에는 이렇게 사진이 깨져서 나오고 있었는데
이제는 아주 깨끗한 화질로 잘 나오고 있다!!!!!
