DB에서 받아온 데이터를 DKEditor에 추가하고
이미지가 변경되거나 추가된다면 원래 있던 이미지 폴더에 이미지를 수정하는 코드를 작성했습니다.
우선 Javascript 와 jsp 파일을 확인해 봅시다.
코드
CKEditor_read.js
CKEditor를 불러오기 위해 자바스크립트 파일을 작성해 줍니다.
//editorConfig.js에서 CKEditor 설정 정보 불러오기
import { editorConfig, setContentsLength, setTextLength, setImgLength } from 'editorConfig';
import { ClassicEditor } from 'CKEditor';
//CKEditor 생성
console.log('CKEditor 생성');
ClassicEditor.create(document.querySelector('#readEditor'), editorConfig)
.then( editor => {
window.editor = editor;
console.log('CKEditor 전송 정보 : ' + editor);
// editor가 변경되면 현재 글자수와 이미지 개수를 출력해줍니다.
editor.model.document.on('change:data', function () {
//CKEditor에 작성된 정보를 가져옵니다.
var str = editor.getData();
setTextLength(str);
setImgLength(str);
});
//editor 의 id 값을 넣어줍니다.
var editorStatus = false;
// 폼을 제출할 때 이벤트 리스너 추가
const form = document.querySelector('form'); // 폼 선택
form.addEventListener('submit', function(event) {
//CKEditor에 작성된 정보를 가져옵니다.
var str = editor.getData();
editorStatus = setContentsLength(str, 2, 255);
console.log("form.addEventListener 실행 : " + editorStatus);
if (!editorStatus) {
console.log("if (!editorStatus) 실행 : " + editorStatus);
event.preventDefault(); // 폼 제출 방지
}
});
//게시글 받아오기
editor.setData(contentData);
})
.catch(err => {
console.log('발생 오류 : '+err);
});
updateEditing.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="mytag"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>코마 : 글수정</title>
<!-- Fonts and icons -->
<script src="assets/js/plugin/webfont/webfont.min.js"></script>
<script src="https://kit.fontawesome.com/7f7b0ec58f.js"
crossorigin="anonymous"></script>
<!-- CSS Files -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/plugins.min.css" />
<link rel="stylesheet" href="assets/css/kaiadmin.css" />
<!-- CKEditor cdn -->
<script src="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js"></script>
<!-- CKEditor css -->
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.css">
<!-- CKEditor Js Import -->
<script type="importmap">
{
"imports": {
"CKEditor": "https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js",
"CKEditor/": "https://cdn.ckeditor.com/ckeditor5/43.1.0/",
"editorConfig": "./js/CKEditorConfig.js"
}
}
</script>
<script type="text/javascript">
//외부 js 파일에서 사용하기 위해 전역변수로 설정하여 데이터를 불러옵니다.
var contentData = '${BOARD_CONTENT}';
</script>
<script type="module" src="./js/CKEditor_read.js"></script>
<style type="text/css">
.ck.ck-editor{
width: 100%;
max-width: 1500px;
}
.ck-editor__editable {
min-height: 350px;
}
.ck-content{
height: 350px !important;
}
</style>
</head>
<body>
<!-- GNB 커스텀 태그 -->
<mytag:gnb member_id="${MEMBER_ID}" ></mytag:gnb>
<!-- container start -->
<div class="container">
<div class="page-inner">
<div class="row py-3">
<div class="col-12">
<!-- 작성 글 C로 보내기 -->
<h1 class="text-center">글수정</h1>
</div>
</div>
<!-- C에게 보낼 값 설정 FORM -->
<form action="BOARDUPDATEACTION.do" method="POST"
name="updateediting">
<div class="row">
<div
class="col-md-1 d-flex align-items-center justify-content-center justify-content-md-end">
<h3>제목</h3>
</div>
<div class="col-md-11">
<div class="form-group">
<!-- C에서 DATA 가져오기 -->
<input type="text" class="form-control" id="title" name="VIEW_TITLE" value="${BOARD_TITLE}" required
placeholder="글의 제목을 입력해주세요" />
<input type="hidden" class="" id="" name="VIEW_BOARD_NUM" value="${BOARD_NUM}"/>
<!-- 바이트 제한을 넘어서면 작게 안내문구 보이도록 설정 -->
<div id="titleError" class="byte-error">제목은 100자를 넘을 수 없습니다.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1 d-flex align-items-center justify-content-center justify-content-md-end">
<h3>지역</h3>
</div>
<div class="col-md-11">
<div class="form-group">
<select class="form-control form-select" id="location" name="VIEW_BOARD_LOCATION">
<option value="" class="text-muted">지역</option>
<option value="SEOUL">서울특별시</option>
<option value="SEJONG">세종특별자치도</option>
<option value="BUSAN">부산광역시</option>
<option value="DAEGU">대구광역시</option>
<option value="DAEJEON">대전광역시</option>
<option value="INCHEON" >인천광역시</option>
<option value="GWANGJU">광주광역시</option>
<option value="ULSAN">울산광역시</option>
<option value="GYEONGGI">경기도</option>
<option value="CHUNGCHEONGNAMDO">충청남도</option>
<option value="CHUNGCHEONGBUKDO">충청북도</option>
<option value="JEONLANAMDO">전라남도</option>
<option value="JEONLABUKDO">전라북도</option>
<option value="GYEONGSANGNAMDO">경상남도</option>
<option value="GYEONGSANGBUKDO">경상북도</option>
<option value="GANGWONDO">강원도</option>
</select>
</div>
</div>
</div>
<div class="row">
<div
class="col-md-1 d-flex justify-content-center justify-content-md-end">
<h3>내용</h3>
</div>
<div class="col-md-11">
<div class="form-group">
<div class="input-group" style="height: 400px !important;">
<!-- C에서 DATA 가져오기 -->
<textarea id="readEditor" class="form-control" name="VIEW_CONTENT">
<!-- 수정할 게시글을 불러올 영역 -->
</textarea>
</div>
<hr>
<div class="text-group" style="text-align:right; height: 40px !important;">
현재 이미지 개수 : <span class="img-length">0장</span> <br>
현재 글자 수 : <span class="text-length">0자</span>
</div>
</div>
</div>
</div>
<div class="row pt-5">
<div class="col-12 d-flex justify-content-center">
<!-- 취소 클릭시 cancelEditing 함수 호출 -->
<button type="button" class="btn btn-black me-4"
onclick="cancelEditing()">취소</button>
<!-- 버튼 클릭시 폼을 제출 (C로 보냄) -->
<button type="submit" class="btn btn-primary">수정</button>
</div>
</div>
</form>
</div>
</div>
<!-- Core JS Files -->
<script src="assets/js/core/jquery-3.7.1.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script type="text/javascript">
function cancelEditing() {
// 취소버튼을 누르면 메인페이지 C로 이동
window.location.href = 'MYPAGEPAGEACTION.do';
};
document.addEventListener("DOMContentLoaded", function() {
var select = document.getElementById("location");
select.value = "${BOARD_LOCATION}"; // Controller에서 보내주는 지역 옵션 선택
});
</script>
<!-- 제목 수 확인용 Script -->
<script type="text/javascript">
// 바이트 계산 함수
function getByteLength(str) {
// TextEncoder를 사용하여 문자열의 바이트 길이 계산
return new TextEncoder().encode(str).length; // 바이트 길이 반환
}
// 제목과 내용의 입력 체크 함수
function updateByteCount() {
// 제목과 내용 입력 필드 값 가져오기
const title = document.getElementById('title').value;
// 가져온 입력 값들의 바이트 길이 계산
const titleByteCount = getByteLength(title);
// 오류 메시지를 표시할 요소를 가져옴
const titleError = document.getElementById('titleError');
// 제목 바이트가 100을 넘었다면
if (titleByteCount > 100) {
// 바이트 초과 오류 메시지 표시
titleError.style.display = 'block';
// 초과된 문자를 제거하여 제목의 길이를 100 이하로 강제로 설정
document.getElementById('title').value = title.slice(0, 100);
} else {
// 기본값 : none, 오류메시지 숨김
titleError.style.display = 'none';
}
}
// 제목 입력 필드와 내용 입력 필드에 대한 'input' 이벤트 리스너
// 실시간 바이트 체크
document.getElementById('title').addEventListener('input', updateByteCount);
// 폼 검증 함수
function validateForm() {
// 폼 제출 전에 바이트 수를 업데이트하여 현재 상태를 반영
updateByteCount();
// 제목과 내용의 오류 메시지 표시 상태를 확인하여 폼 제출을 허용할지 결정
const titleError = document.getElementById('titleError').style.display === 'block';
if(titleError){ // 제목과 길이 제한을 초과한 채로 제출한다면
alert('제목과 내용의 길이 제한을 다시 확인해주세요!'); // 경고창 띄우기
}
return !titleError; // 에러가 없으면 폼 제출
}
function cancelEditing() {
window.location.href = 'MainCommunityPage.do';
}
// 페이지 로드 시 초기 바이트 수 업데이트
window.onload = updateByteCount;
</script>
</body>
</html>
코드 설명
CKEditor를 불러오고 웹에 보여주는 코드는 이전 포스팅과 다른 게 없으니 패스하겠습니다.
DB에서 전달해 준 글 내용을 외부에서 불러온 JS 파일에서 사용하기 위해
글 내용을 담을 전역변수를 하나 추가해 줍니다.
<script type="text/javascript">
//외부 js 파일에서 사용하기 위해 전역변수로 설정하여 데이터를 불러옵니다.
var contentData = '${BOARD_CONTENT}';
</script>
<script type="module" src="./js/CKEditor_read.js"></script>
jsp 파일에서 선언한 전역변수를 CKEditor_read.js에서 받아와
웹에 추가된 CKEditor에 받아온 글 내용을 추가해 주면 준비가 VIEW 파트에서 준비가 끝이 납니다.
//게시글 받아오기
editor.setData(contentData);
728x90
'팀 프로젝트 > Web' 카테고리의 다른 글
| 팀 프로젝트 전체 로직 (0) | 2024.09.23 |
|---|---|
| 게시판 페이지 CKEditor 글 수정 파트 (Controller) (1) | 2024.09.22 |
| 게시판 페이지 CKEditor 글 작성 파트 (3) | 2024.09.21 |
| 게시판 페이지 CKEditor 추가 (0) | 2024.09.21 |
| 2024-09-06 암벽장 메인 페이지, 상세페이지 한글코딩 (1) | 2024.09.07 |
