전자정부 표준프레임워크 - CKEditor 적용하기

전자정부 표준크레임워크의 Portal Site 템플릿 프로젝트에 HTML 위지윅 에디터인 CKEditor 를 적용해 보겠습니다. Portal Site 템플릿을 설치하고 보니 에디터가 적용이 되어 있지 않았습니다. 공통컴포넌트 다운로드에서 에디터로 검색해서 다운 받은 것은 htmlarea 였습니다. 그래서 all in one 템플릿 프로젝트의 게시판에 적용되어 있던 CKEditor를 Portal Site 템플릿으로 옮겨보았습니다.

 

이 글에서는 Portal Site 템플릿의 자유게시판 글쓰기에 CKEditor를 적용합니다.

 

 

1. 사전에 필요한 것들

 

- Portal Site : "전자정부 표준프레임워크 - Portal Site(Oracle) 템플릿 프로젝트 설치" 를 참고하여 설치합니다.

- All in one : "전자정부 표준프레임워크 및 all in one 샘플 프로젝트 설치" 를 참고합니다. 

 

 

2. pom.xml 파일에 필요한 의존성을 추가 합니다.

 

- ckeditor-java-core는 CKEditor의 서버측 라이브러리 입니다.

- jodconverter는 CKEdit용 필터에서 사용되는 라이브러리 입니다.

- ajaxtags-resources는 실제 apache commons-lang 이 필요한데 All in one 프로젝트에서 여기에 들어 있어서 그대로 옮겼습니다.

- 위 두 개의 라이브러리에서는 필요한것만 추출해서 사용할 수도 있겠습니다.

 

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

<!-- PDF변환용 라이브러리 -->
<dependency>
	<groupId>com.artofsolving</groupId>
	<artifactId>jodconverter</artifactId>
	<version>2.2.1</version>
	<exclusions>
		<exclusion>
			<artifactId>slf4j-api</artifactId>
			<groupId>org.slf4j</groupId>
		</exclusion>
		<exclusion>
			<artifactId>commons-io</artifactId>
			<groupId>commons-io</groupId>
		</exclusion>
	</exclusions>
</dependency>

<!-- Ajax -->
<dependency>
	<groupId>net.sourceforge.ajaxtags</groupId>
	<artifactId>ajaxtags-resources</artifactId>
	<version>1.5.7</version>
</dependency>

 

 

3. All in one 프로젝터에서 필요한 자바 파일들은 옮깁니다.

 

패키지 전체를 옮길때는 이클립스에서 패키지를 복사해서 붙여넣기 하면 쉽게 옮길 수 있습니다.

 

- egovframework.com.utl.wed.filter 패키지

- egovframework.com.utl.wed.web 패키지

- egovframework.com.utl.fcc.service 패키지

- egovframework.com.cmm.util 패키지

- egovframework.com.cmm.exception 패키지

- egovframework.com.cmm.EgovWebUtil.java 자바 파일

- egovframework.com.utl.wdd.web.EgovWebEditorImageController.java 파일에서 egovframework.com.cmm.service.EgovProperties.java 파일을 사용하고 있는데, 이 파일내의 getProperty(String keyName) 메소드가 주석처리 되어 있습니다. Portal Site로 경량화 과정에서 그렇게 한 것으로 보입니다. 이 부분 주석을 해제 합니다.

- 위 주석 해제로 인한 java.util.Properties, java.io.FileNotFountException, java.io.IOException 클래스를 import 합니다.(클래스명에 커서를 두고 Ctrl + Space키를 눌러 선택하면 편리합니다.)

 

 

4. CKEditor파일과 설정파일을 옮깁니다.

 

- CKEditor 본체가 src/main/webapp/html/egovframework/com/cmm/utl/ckeditor폴더 입니다.

- Portal Site로 src/main/webapp/html/com/cmm/utl/ckeditor 폴더 구조로 옮깁니다. Portal Site에서는 webapp 아래 정적 파일들에 대해서 egovframework 폴더가 없는 구조라 맞추기 위해서 뺐습니다. html 폴더를 생성하고 com 폴더를 복사해서 붙여넣기 하면 됩니다.

- src/main/resources/egovframework/egovProps/ck.properties 파일을 같은 위치로 옮깁니다. CKFilter 가 사용하는 설정 파일 입니다.

 

 

5. 설정파일들 및 자바 파일을 수정합니다.

 

- web.xml 파일에 CKFilter를 추가합니다. 이 필터가 CKEditor에서 이미지 업로드를 처리합니다. /ckupload URL로 요청이 들어올 때 필터가 동작합니다. encodingFilter 아래에 넣으면 되겠습니다.

 

<filter>
	<filter-name>CKEditor</filter-name>
	<filter-class>egovframework.com.utl.wed.filter.CkFilter</filter-class>
	<init-param>
		<param-name>properties</param-name>
		<param-value>egovframework/egovProps/ck.properties</param-value>
	</init-param>
</filter>

<filter-mapping>
	<filter-name>CKEditor</filter-name>
	<url-pattern>/ckupload</url-pattern>
</filter-mapping>

 

- src/main/webapp/html/com/cmm/utl/ckeditor/config.js 파일을 수정합니다. 이미지 업로드 URL을 지정합니다. /pst_webapp 가 Portal Site의 기본 컨텍스트 URL 입니다. 자신에 맞게 변경하면 됩니다.

 

config.filebrowserUploadUrl = '/pst_webapp/ckupload';

 

- src/main/resources/egovframework/spring/com/context-properties.xml 파일을 수정합니다. 아래 내용을 추가합니다. 이 설정은 이미지 보기용 프로그램이 업로드된 이미지 파일을 찾기 위해 사용됩니다.

 

<entry key="Globals.imageStorePath" value="/user/file/upload"/>

 

※ 참고

All in one 프로젝트에서는 게시판에서 파일 업로드 경로를 globals.properties 파일에서 Globals.fileStorePath 로 지정하고 있으나, Portal Site 에서는 context-properties.xml 파일에서 지정하고 있습니다.

 

<entry key="Globals.fileStorePath" value="/user/file/sht/"/>

 

"/user/file/sht" 폴더가 게시판에서 첨부파일이 업로드 되는 폴더 입니다. UNIX 스타일로 되어 있는데, 그대로 사용한다고 가정할 때 Windows 에서는 Tomcat 이 D 드라이브에서 실행되면 D:/user/file/sht 폴더에 파일이 저장됩니다. Windows 스타일의 Path 로 변경해도 되겠습니다.

 

 

보안, 이중화 등의 목적으로 첨부 파일을 웹루트 밖에 저장하므로 파일을 다운로드하기 위해서는 다운로드용 프로그램이 필요합니다.

 

 

- src/main/resources/egovframework/egovProps/ck.properties 파일을 수정합니다. CKFilter가 사용하는 설정파일로 이미지 업로드 폴더(/user/file/upload)와 이미지 보기 URL(/pst_webapp/utl/web/imageSrc.do?path=) 을 지정합니다.

 

ck.image.dir=/user/file/upload
ck.image.url=/pst_webapp/utl/web/imageSrc.do?path=

 

- src/main/java/egovframework/com/utl/wed/EgovWebEditorImageController.java 파일을 수정합니다. 이 컨트롤러에 "/utl/web/imageSrc.do" 로 맵핑되어 있는 download() 메소드가 CKEditor 에서 업로드한 이미지를 보기 위한 기능을 합니다. 원래는 globals.properties 파일에서 Globals.fileStorePath 정보로 업로드 위치를 찾지만 Portal Site에서는 이 정보가 context-properties.xml 파일에 있으므로 값을 가져오는 부분을 수정합니다.

 

import egovframework.rte.fdl.property.EgovPropertyService;

...

	/** 첨부파일 위치 지정 */
	//private final String uploadDir = EgovProperties.getProperty("Globals.fileStorePath");

	@Resource(name = "propertiesService")
	protected EgovPropertyService propertyService;
	...
	@RequestMapping(value="/utl/web/imageSrc.do",method=RequestMethod.GET)
	public void download(HttpServletRequest request, HttpServletResponse response) throws Exception {
		String subPath = request.getParameter("path");
		String physical = request.getParameter("physical");
		String mimeType = request.getParameter("contentType");
		String uploadDir = propertyService.getString("Globals.imageStorePath");
		EgovFormBasedFileUtil.viewFile(response, uploadDir, subPath, physical, mimeType);
	}

 

- src/main/java/egovframework/com/utl/fcc/service/EgovFormBasedFileUtil.java 파일을 수정합니다. 이 파일의 viewFile 메소드가 파일을 읽어서 보내주는데, 이번 수정에서는 String where과 String serverSubPath 인자만 사용됩니다. serverSubPath에 파일명까지 붙어서 들어 옵니다. 이 부분을 수정합니다.

 

//String downFileName = where + SEPERATOR + serverSubPath + SEPERATOR + physicalName;
String downFileName = where + serverSubPath;

 

 

6. 게시판 쓰기 페이지에 CKEditor를 적용합니다.

 

- src/main/webapp/WEB-INF/jsp/cop/bbs/EgovNoticeRegist.jsp 파일을 수정합니다.

  + ckeditor 태그 라이브러리를 추가합니다.

  + submit시 내용이 입력되었는지 체크를 위한 코드를 추가합니다.

  + textarea 를 CKeditor로 치환하는 태그를 추가합니다.

 

...

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

...

function fn_egov_regist_notice() {
	//document.board.onsubmit();
	CKEDITOR.instances.nttCn.updateElement();
    
...

<textarea id="nttCn" name="nttCn" class="textarea" cols="95" rows="28"></textarea>
<ckeditor:replace replace="nttCn" basepath="${pageContext.request.contextPath}/html/com/cmm/utl/ckeditor"/>
...

 

 

7. 실행결과 입니다.

 

 

이상으로 전자정부 표준프레임워크 Portal Site 템플릿에 CKEditor를 적용해 보았습니다. 실제 사용시에는 EgovWebEditorImageController.java 파일의 이미지 보기 기능 처리를 제대로 처리해야 할 것입니다. 현재는 기능이 되는것만을 위해서 코드가 제대로 정리되어 있지 않습니다.