스프링 게시판 - ckeditor4 (ck에디터)연동 - 기본적용 (1)

 

※ 이 포스트는 스프링 Jsp 게시판의 CRUD가 완성되었다는 가정하에 CKEDITOR4 연동만 하겠다.

※  4 버전을 택한이유는 가장 많이 사용하고 사용하기도 쉽기 때문에 이 버전을 적용한다.

※ 추후 ckeditor를 통해 사진파일 업로드 및 본문에 삽입,  사진파일 삭제를 구현할 예정이다.

 

 

1. ckeditor4 다운

 

https://ckeditor.com/ckeditor-4/download/

스텐다드 버전을 다운로드한다.

 

2. 프로젝트에 적용하기



압출을 풀고 에디터 리소스를 /resource/ 하위에 넣는다.

스프링은 보통 css,이미지,기타 라이브러리는 resource/ 하위에 넣고 사용한다.

 

스프링에서 리소스 경로를 읽을 수 있게 아래와 같이 설정한다.

 

servlet-context.xml 의 내용

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

	<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
	
	<!-- Enables the Spring MVC @Controller programming model -->
	<annotation-driven />

	<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
	<resources mapping="/resources/**" location="/resources/" />
	
	<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
	</beans:bean>
	
	<!-- 파일업로드 관련 -->
	<beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- 최대 업로드 가능한 바이트 크기(바이트 단위), -1은 제한이 없음을 의미 -->
		<beans:property name="maxUploadSize" value="10485760" />
		<!-- 업로드 요청을 변환할 때 사용할 문자 인코딩 방식 -->
		<beans:property name="defaultEncoding" value="utf-8" />
	</beans:bean>
	
	<context:component-scan base-package="kr.co.study" />
	
	
</beans:beans>

 

 

3. 게시판 작성페이지에 적용하기 

본인 jsp 게시판 작성부분 상단에 ckeditor.js 를 삽입한다.

 

ckeditorWrite.jsp 내용

<!-- 헤더 임포트 -->
<jsp:include page="../../include/header.jsp"></jsp:include>
	<script type="text/javascript" src="/resources/ckeditor/ckeditor.js"></script>
	<section>
		<div class="container px-5 my-5 px-5">
			<h2>ckeditor글쓰기</h2>
			<form name="form" id="form" role="form" method="post" action="" enctype="multipart/form-data">
				<input type="hidden" name="bno" id="bno" 	value="${bbs.bno}"/>
				<div class="mb-3">
					<label for="title">제목</label>
					<input type="text" class="form-control" name="title" id="title" placeholder="제목을 입력해 주세요" 	value="${bbs.title}">
				</div>
				<div class="mb-3">
					<label for="content">내용</label>
            		<textarea class="form-control" id="ckeditor" name="content"	rows="3" name="Vboard_content">${bbs.content}</textarea>
				</div>
			</form>
			<div >
				<button type="button" class="btn btn-sm btn-success" id="writeBtn">저장</button>
				<button type="button" class="bn btn-sm btn-primary"  onclick="javascript:location.href='/bbs/list';">목록</button>
			</div>
		</div>
	</section>
<!-- 푸터 임포트 -->
<jsp:include page="../../include/footer.jsp"></jsp:include>
<script type="text/javascript">

두번째 줄에 삽입이 되었다.

 

본문에 에디트 모드가 삽입되려면 스크립트의 설정이 필요하다.

 

textarea 태그의 이름을 ckeditor로 정의하고

 

스크립트 부분에 아래의 내용을 추가한다.

$(document).ready(function() {

    CKEDITOR.replace( "ckeditor", {//해당 이름으로 된 textarea에 에디터를 적용
        width:"100%",
        height:"400px",
        filebrowserUploadUrl:  "/bbs/ckeditor/ckEditorUpload",
        image_previewText: " "
    });
});

아래의 옵션을 이미지 업로드 사용시 사용되는 옵션들이다. 추후 이미지업로드 관련 포스트에서 설명하겠다.

 

 

정상적으로 리소스가 읽히면 아래와 같이 본문에 에디트 모드가 활성화 된다.

 

2023.03.25 - [분류 전체보기] - 스프링 게시판 - ckeditor4 (ck에디터)연동 - 이미지업로드 (2)