전자정부프레임워크 ckeditor 웹에디터 적용

 

작업 환경

eGovFramework Version : 3.8

Eclipse Version : Oxygen.3a Release (4.7.3a)

JDK Version : 1.8

 

전자정부 프레임워크에 기본적으로 적용되어 있는 웹에디터가 있는데 이것이 ckeditor 입니다.  물론 처음부터 바로 사용할 수 있도록 되어 있는것은 아니고 프로그램 내에 포함은 되어 있는데 개발자가 다른 웹에디터를 적용할 수도 있기 때문에 ckeditor가 기본으로 설정이 되어 있지는 않고 사용을 하려면 조금 손을 봐야 합니다.

처음 게시판에 글을 쓰려고 하면 나오는 화면이 아래와 같이 일반 텍스트 모드의 입력 폼이 나타 납니다.

1. ckeditor lib 폴더복사

내용 입력 부분에 ckeditor를 포함하도록 하려면 ckeditor 라이브러리가 있어야 합니다.  egovframework template project에서 common all-in-one 프로젝트를 설치 하거나

all-in-one 압축파일을 해제 합니다. 

그리고 /src/main/webapp/html/egovframework/com/cmm/utl/ckeditor 폴더를 찾습니다.

 

ckeditor 폴더를 개발 프로젝트의 동일한 위치로 복사해 놓습니다.

 

2. pom.xml 설정 확인

 

pom.xml에 다음과 같이 dependency가 설정 되어 있는지 확인합니다.

기본적으로 설정이 되어있는데 없다면 추가해주면 됩니다.

<dependency>             <groupId>com.ckeditor</groupId>             <artifactId>ckeditor-java-core</artifactId>             <version>3.5.3</version>         </dependency>

 

3. jsp 파일 수정

이제 게시판에 사용되는 jsp 파일을 수정 합니다.

/프로젝트명/src/main/webapp/WEB-INF/jsp/egovframework/com/cop/bbs/EgovArticleRegist.jsp

기본적으로 ckeditor 관련 설정들이 jsp 파일에 포함되어 있습니다.

<script type="text/javascript" src="<c:url value='/html/egovframework/com/cmm/utl/ckeditor/ckeditor.js?t=B37D54V'/>" ></script>   var ckeditor_config = {                   //filebrowserImageUploadUrl: '${pageContext.request.contextPath}/utl/wed/insertImageCk.do', // 파일 업로드를 처리 할 경로 설정.                   filebrowserImageUploadUrl: '${pageContext.request.contextPath}/ckUploadImage', // 파일 업로드를 처리 할 경로 설정(CK필터).          };          CKEDITOR.replace('nttCn',ckeditor_config);   CKEDITOR.instances.nttCn.updateElement();

 

여기에 추가적인 작업을 해줘야 사용이 가능 합니다.

먼저 상단 taglib들이 있는 곳에 ckeditor taglib를 추가해 줍니다.

<%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>

 

글 내용 부분에 ckeditor 를 추가 합니다.  처음에는 ckeditor내용 없이 되어 있습니다.

<!-- 글 내용  --> <c:set var="title"><spring:message code="comCopBbs.articleVO.regist.nttCn"/> </c:set> <tr>          <th><label for="nttCn">${title } <span class="pilsu">*</span></label></th>          <td class="nopd" colspan="3">                   <form:textarea path="nttCn" title="${title} ${inputTxt}" cols="300" rows="20" />              ============================ CKeditor 관련 추가 ============================                   <div><form:errors path="nttCn" cssClass="error" /></div>           </td> </tr>

여기에 하단처럼 한줄을 추가 합니다.

<!-- 글 내용  --> <c:set var="title"><spring:message code="comCopBbs.articleVO.regist.nttCn"/> </c:set> <tr>          <th><label for="nttCn">${title } <span class="pilsu">*</span></label></th>          <td class="nopd" colspan="3">                   <form:textarea path="nttCn" title="${title} ${inputTxt}" cols="300" rows="20" />                     <ckeditor:replace replace="nttCn" basePath="${pageContext.request.contextPath}/html/egovframework/com/cmm/utl/ckeditor/" />                   <div><form:errors path="nttCn" cssClass="error" /></div>           </td> </tr>

 

이제 화면을 새로고침 하고 다시 입력화면을 클릭하면

짜잔.  적용이 되었습니다.

ckeditor 폴더를 복사하고 jsp 파일에 두줄 추가하면 되는군요.

- copy coding -