웹에디터 FCKeditor (J2EE 환경에서 사용)

얼마전 nhn에서 스마트베이직에디터를 오픈소스로 발표해서 한번 써봤는데.

깔끔하고 심플하고 뭐 나쁘진 않았다.

다른분들처럼 API사용하여 플러그인만들어서 기능추가도 해보고 싶지만..

일단 자바스크립트에서 좀 딸리고.

혼자 공부삼아 하는게 아니라 프로젝트에 반영해야되서 다른걸 찾다가 보니. (시간이 없다능..변명변명변명;;)

FCKeditor라는걸 찾게되었다. (많은 분들이 쓰시는듯하다. 나만 몰랐던건가.-_-)

나중에 또 써먹기위해.. 그리고 검색하여 이블로그를 찾아주신 분들에게 조금이라도 보답하기위해

간단히 사용법을 적는다.

http://www.fckeditor.net/

사이트 접속 후 데모페이지도 볼 수 있다.

우상단에 보면 Download 메뉴가 있다.

Download 페이지 하단에 FCKeditor.Java에 "Click here to download the latest version" 를 클릭.

이동하는 화면에서 보면 버젼별로 다운로드 받을 수 있다.

현재 가장 최신버젼(2.4.1 - 2008-10-14)인 fckeditor-java-demo-2.4.1.war파일을 다운로드 받는다.

톰캣루트의 webapp폴더에 파일을 이동한 후 톰캣을 가동시키면 자동으로 파일이 압축해제되면서 데모사이트가 가동된다.

http://localhost/컨텍스트로 접속하면

샘플페이지를 볼 수 있다.

현재 테스트하는 나의 개발환경은 다음과 같다.

WAS : apache-tomcat-6.0.18
Charset : UTF-8

jsp폴더안에 샘플페이지들이 있으니 참고하여 자신의 상황에 맞게 커스터마이징하여 사용하면된다.

이 샘플페이지의 코드를 이용하여 간단히 에디터를 불러오는 소스를 만들어보면 아래와 같다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="net.fckeditor.*" %>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<title>FCKeditor Example</title>
<link rel="shortcut icon" href="fckeditor.gif" type="image/x-icon" />
<script type="text/javascript">
    function FCKeditor_OnComplete(editorInstance) {
        window.status = editorInstance.Description;
    }
    function sendForm(frm) {
        var oEditor = FCKeditorAPI.GetInstance('content');
        var div = document.createElement("DIV");

        div.innerHTML = oEditor.GetXHTML();
        if (isNull(div.innerHTML)) {
            alert("내용을 입력하세요.");
            oEditor.Focus();
            return false;
        }
        return true;
    }
    function isNull(text) {
        if (text == null)
            return true;
        var result = text.replace(/(^\s*)|(\s*$)/g, "");
        if (result)
            return false;
        else
            return true;
    }
</script>
</head>
<body>
<ul>
    <li><FCK:check command="CompatibleBrowser" /></li>
    <li><FCK:check command="FileBrowsing" /></li>
    <li><FCK:check command="FileUpload" /></li>
</ul>
<form name="frmFckEditor" action="sampleposteddata.jsp" method="post" onsubmit="return sendForm(this)">
<FCK:editor instanceName="content" toolbarSet="MyToolbar" width="750" height="350">
    <jsp:body>
        <FCK:config SkinPath="skins/silver/"/>
    </jsp:body>
</FCK:editor>
<br />
<input type="submit" value="Submit" /></form>
</body>
</html>

<FCK:editor> 태그는 editor를 로딩하는 태그이다. instanceName은 HTML Element의 name속성으로 생각하고 원하는 이름을 설정하여 준다. 위는 content이다. toolbarSet속성은 MyToolbar라는 이름으로 커스터마이징한 툴바이름을 설정해 주었다. 넓이와 높이도 px단위로 설정해 주었다.

원하는 툴바설정은 fckeditor/fckconfig.js파일을 열어 FCKConfig.ToolbarSets["Default"]라고 되있는 부분을 먼저 찾는다. 기본설정이므로 삭제하지말고 복사한후 이름을 MyToolbar로 정한후 JSON형식으로 정의된 툴바들을 원하는 대로 정의한다.(자세한 내용은 사이트를 참조).
그외의 폰트, 사이즈, 업로드 등등 여러가지 설정을 할 수 있다.

<FCK:config>태그안의 SkinPath속성은 총 3가지의 스킨중 실버스킨을 적용한 것이다.
form의 action의 sampleposteddata.jsp파일은 jsp폴더안에 존재한다. 자신의 경로에 맞게 설정을 해주면 되며(아니면 샘플페이지를 jsp폴더로 이동) 폼으로 전송한 editor의 내용값을 확인할 수 있다.
한글은 깨지니 sampleposteddata.jsp파일을 열어 상단에 request.setCharacterEncoding("UTF-8");를 추가하여 준다. EUC-KR환경이라면 EUC-KR로 변경.

이로서 기본적으로 editor의 설정은 해보았지만. 이미지 업로드 같은 경우 한글이미지는 깨지게 된다.

한글이미지를 업로드 하려면 WEB-INF/lib/에 있는 java-core-2.4.1.jar파일안에 있는 소스를 직접수정하여야 한다. (수정을 하지 않고도 하는 방법을 아시는 분은 댓글좀 남겨주세요.ㅠㅋ )

fckeditor download사이트로 가서 fckeditor-java-2.4.1-src.zip를 다운받으면 소스코드가 있다.

변경할 소스는 net.fckeditor.connector.ConnectorServlet파일에 243라인에
ServletFileUpload upload = new ServletFileUpload(factory); 이 부분이 있다.
이 밑에 upload.setHeaderEncoding("UTF-8");를 추가한다.(자신의 환경에 맞는 Charset으로)
그리고 이미지업로드를 해보면 한글파일이 깨지지 않고 업로드가 정상적으로 된다.

대략적인 사용방법 끝.

아. 블로그에 글쓰기 힘들다...

저작자표시 비영리 변경금지

'language > javascript' 카테고리의 다른 글

자바스크립트로 시스템 클립보드 접근하기 (Access to the system clipboard in JavaScript.) (0)	2015.09.22
Euclidean Distance (유클리디안 거리) (2)	2010.04.11
Google Closure Tools (0)	2010.02.18

코드 리뷰의 대부분은 네이밍

웹에디터 FCKeditor (J2EE 환경에서 사용)

'language > javascript' 카테고리의 다른 글

티스토리툴바

웹에디터 FCKeditor (J2EE 환경에서 사용)

'language > javascript' 카테고리의 다른 글

관련글

티스토리툴바