이번 프로젝트에서 Jsp 프로젝트를 Spring으로 이관하는 과정에서 비동기 Servlet으로 사용한CKEditor API를 POJO 형식인 일반 Java 로 변환 하여 흐름을 다시 정리 하려고 합니다. HttpServletRequest 내장 객체인 getPart로 받아오는 것이 아닌Spring에서 지원하는 MultipartFile 을 사용하려고 합니다. 전체 흐름Was(Web Application Server) 설정 및 실행 흐름게시글 등록 페이지 이동 및 CKEditor API 호출CKEditor 이미지 업로드게시글 등록  1.  Was(Web Application Server) 설정 및 실행 흐름프로젝트 Was 는 톰캣을 선정했습니다.이때 Multipart 를 사용할때 form-data 규칙을 완화..

jsp 프로잭트 원본 내용더보기@WebServlet("/ckupload")@MultipartConfigpublic class CKEditor_Upload extends HttpServlet { private static final long serialVersionUID = 1L; public CKEditor_Upload() { super(); } //현재 폴더 개수를 가져오는 함수 private static int member_folder_num(String uploadPath) { //폴더 위치를 불러옵니다. File directory = new File(uploadPath); //폴더에 있는 파일리스트를 가져오고 배열리스트로 전환합니다. ArrayList arr_file..

이전 포스팅에서 VIEW에서 CKEditor에 글 내용을 담는 방법을 소개했습니다.이번 포스팅에서는 Controller에서 수행한 기능에 대해 설명해보겠습니다. 코드BoardUpdatePageAction.javapackage controller.community;import java.util.HashMap;import java.util.Map;import controller.common.Action;import controller.common.ActionForward;import controller.function.LoginCheck;import jakarta.servlet.http.HttpServletRequest;import jakarta.servlet.http.HttpServletResponse;i..

DB에서 받아온 데이터를 DKEditor에 추가하고이미지가 변경되거나 추가된다면 원래 있던 이미지 폴더에 이미지를 수정하는 코드를 작성했습니다.우선 Javascript 와 jsp 파일을 확인해 봅시다. 코드CKEditor_read.jsCKEditor를 불러오기 위해 자바스크립트 파일을 작성해 줍니다.//editorConfig.js에서 CKEditor 설정 정보 불러오기import { editorConfig, setContentsLength, setTextLength, setImgLength } from 'editorConfig';import { ClassicEditor } from 'CKEditor';//CKEditor 생성console.log('CKEditor 생성');ClassicEditor.crea..

이전에 작성한 클래스들을 활용하여 사용자가 글을 작성하면 폴더를 생성하고생성된 폴더에 이미지를 저장하는 코드를 작성해보겠습니다. BoardInsertAction.javapackage controller.community;import java.io.UnsupportedEncodingException;import java.util.HashMap;import java.util.Map;import controller.common.Action;import controller.common.ActionForward;import controller.function.CKEditorDeleteFile;import controller.function.LoginCheck;import jakarta.servlet.http.Ht..

이번 팀프로젝트중 CKEditor를 추가해보았습니다. 기본 설정은 이전에 작성한 포스팅을 참고 부탁드립니다.https://nam-00.tistory.com/60 CKEditor5 사용해보기 11. CKEditor 사용 준비하기CKEditor CDN 설정 및 import 설정 CKEditorConfig.js 만들기import { AccessibilityHelp, Autoformat, AutoImage, Autosave, BlockQuote, Bold, CloudServices, Essentials, Heading, ImageBlock, ImageInline, ImageInsert, ImageInam-00.tistory.com Controller Code(CKEditor를 사용하기 위해 생성한 클래스 및 필..

2. CKEditor 이미지를 서버에 저장하고 해당 내용을 출력해보기CKEditor_insert.jsp 글 작성  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..

1. CKEditor 사용 준비하기CKEditor CDN 설정 및 import 설정 CKEditorConfig.js 만들기import { AccessibilityHelp, Autoformat, AutoImage, Autosave, BlockQuote, Bold, CloudServices, Essentials, Heading, ImageBlock, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, Paragraph, SelectAll, Si..