FCKeditor

FCKeditor 는데스크톱의막강한기능을가진워드를웹으로가져온 HTML text 편집기이다.

FCKeditor 는아주경량의어플리케이션으로컴퓨터에설치를요구하지않는다.

특징

• 인터넷익스플로어, 모질라, 파이어폭스, 네스케이스와 호환됨
• XHTML 1.0 지원
• 폰트 설정 : 글씨체, 크기, 색상, 스타일, 볼드체, 이탤릭체 등등 지원
• 텍스트 설정 : 정렬, 들여쓰기, 리스트 등등 지원
• 복사, 붙이기, 텍스트로 붙이기, 취소
• 워드프로그램에서 복사해서 붙이기할때 자동인식해서 복사됨.
• 링크 기능
• 이미지 삽입 기능
• 테이블 생성, 편집, 줄 추가/삭제
• 테이블 셀 편집기능 (크기, 색상 ...)
• 폼 필드
• 마우스 오른쪽 버턴 클릭시 메뉴 제공
• 툴바 커스터마이징
• 스킨 지원
• 스펠링 체크
• CSS 지원
• 가볍고 빠름
• 자동으로 브라우저 종류 인식 및 커스터마이징 가능
• 관리자에게는 설치하기 쉽고 커스트마이징 가능
• 사용자는 사용하기 매우 쉽다.

설치

설치방법은아래의 URL 을 참조한다. http://wiki.fckeditor.net/Developer's_Guide/Installation

실행방법

• FCKeditor 를 실행하기 위해서 아래와 같이 javascript 를 추가한다..

<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>

• FCKeditor 실행

var aform = document.forms[0];
var oEditor = new FCKeditor('body');
oEditor.Width = aform.body.offsetWidth;
oEditor.Height = aform.body.
offsetHeight;oEditor.ReplaceTextarea();

• FCKeditor 내용 가져오기

var aform = document.forms[0];
aform.body.value = FCKeditorAPI.GetInstance ('body').GetXHTML(true);

환경설정

• 언어설정

언어 설정은 FCKeditor 가 설치된 디렉터리 fckconfig.js 파일로 아래와 같이 설정한다.

FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = "kr" ;
---
AutoDetectLanguage 는 페이지에 설정된 언어로 자동설정되는 것을 의미한다.

• 환경파일 변경

만약, fckconfig.js을 가지고 별도의 Config 파일을 구성하여 사용하고자 한다면, FCKeditor 실행 시 아래와 같이 설정한다.

oEditor.Config["CustomConfigurationsPath"] = "/myconfig.js";

• FCKeditor 위치 설정

FCKeditor는 웹상에서 javascript 로 로드되기 때문에 FCKeditor 를 로드할때 기본 basepath 를 지정해야 한다. FCKeditor가 설치된 디렉터리 fckeditor.js 파일을 아래와 같이 수정한다.

this.BasePath           = 'FCKeditor/';

설치된 디렉터리가 webapps/context/FCKeditor 인 경우를 예로한 것이다.

Customization

• 기본 언어 수정

FCKeditor 는 기본적으로 많은 나라의 언어를 지원하고 있고, 특히 설정되어 있는 언어변수를 수정하고자 한다면 FCKeditor/editor/lang 디렉터리에서 해당 하는 언어의 <local>.js 파일을 수정할 수있다.

...
Done : "완료",
...

"완료", "확인"으로 수정하고, 저장하면 완료된다.

※ 주의 사항 : acsii 문자를 제외한 모든 문자는 UTF-8 로 저장되어야 하므로, GUI 변집기를 사용할 경우 이 부분을 주의해야 한다.

• 언어 변수 사용 방법

FCKeditor 언어 변수는 INPUT, SPAN, LABEL, OPTION 의 value 나 innerHTML 의 값을 대치하도록 되어 있다.

### HTML SOURCE 에서 사용
# value 변경
<input .... value="Browse Server" fckLang="DlgImgBtnSel">

# innerHTML 변경
<span fckLang="DlgImgSrcPath">SOURCE PATH</span>
<option fckLang="DlgImgAlignLeft" value="left">Left</option>
<label for="txtFind" fckLang="DlgReplaceFindLbl">Find what:</label>

# 변경 시점은 HTML 에서 onload 이벤트가 발생 시 FCKLanguageManager.TranslatePage(document)
호출하여 HTML Source 상에 있는 INPUT, SPAN, LABEL, OPTION 순으로 언어가 변경된다.

### javascript 에서 사용
var FCKLang = oEditor.FCKLang;
alert(FCKLang.Done);    <-- 위에서 "완료"를 "확인" 으로 변경하였을 경우, alert 창에 확인으로 나타난다.

대치되는 방법에 대해 자세한 내용을 확인해야 할 경우 FCKeditor/editor/_source/internals/fcklanguagemanager.js 를 참조하기 바란다.

FCKeditor Wiki

보다 자세한 정보를 원하면 아래의 FCKeditor Wiki page 를 참고하길 바란다.

FCKeditor Wiki