FCK Editor v2.4.3 > script

FCK Editor v2.4.3

 

복사만으로 간단하게 설치가 되지만, 그대로는 사용할 수가 없다.

설치후에 기본적으로 설정해야 하는 것들을 정리해 본다.

 

 

 

 

  

 

1. 환경 설정하기

fckeditor/fckconfig.js 파일에 필요한 대부분의 필요한 환경 설정을 할 수 있다.

먼저 기본으로 설정해야 할 환경에 대해서 알아본다.

 

서버스크립트별로 주석으로 표시되어 있는 부분을 해제 시켜준다.

FCKConfig.ProtectedSource.Add( /<%[\s\S]*?%>/g ) ; // ASP style server side code <%...%>

 

기본언어를 한글로 바꿔준다.

FCKConfig.DefaultLanguage  = 'kr' ;

 

편집중 엔터 또는 쉬프트+엔터에 대한 사입할 태그를 선택한다.

FCKConfig.EnterMode = 'div' ;   // p | div | br
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br

링크 서버 보기 기능을 없애준다. 서버보기를 통해 불필요한 파일에 대한 업로드 방지와 보안의 일환으로 없애는 것이 좋다.

FCKConfig.LinkBrowser = false ;

이미지 서버 보기 기능을 없애준다.

FCKConfig.ImageBrowser = false ;

플래시 서버 보기 기능을 없애준다.

FCKConfig.FlashBrowser = false ;

여기까지는 보통 새 버전이 나올때마다 또는 새로 설치할 때마다 반드시 확인해줘야 하는 사항이다.

두번째로 종종 사용되는 기능에 대해 알아본다.

 

이모티콘을 추가해보자. 자신만의 이모티콘이 있다면 별도의 폴더에 저장하고 경로를 설정해준 다음 각각의 파일명을 등록하면 된다.

FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif',

'tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif',

'angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif',

'thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;

툴바를 내맘데로 바꿔보자.

FCKConfig.ToolbarSets["MyToolbar"] = [
 ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
 ['OrderedList','UnorderedList','-','Outdent','Indent'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
 ['Link','Unlink','Anchor'],['Image']
] ;
이렇게 별도로 추가한 다음에 fckeditor를 생성하는 스크립트에서는 아래처럼 지정해 주면 된다.

Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.ToolbarSet = "MyToolbar"
oFCKeditor.BasePath = "/fckeditor/"
oFCKeditor.Value = ""
oFCKeditor.Height = 400
oFCKeditor.Width = 780
oFCKeditor.Create "content"

2. 용량이 큰 이미지를 업로드 하기 위하여 설정할 사항

가끔 이미지가 크다 싶으면 업로드가 안되는 경우가 있다. 이것은 서버의 설정 문제이다.

아래 포스트에 자세한 내용이 있다.

http://blog.naver.com/neofanta.do?Redirect=Log&logNo=120039036389

 

3. 한글로된 이미지파일명을 제대로 업로드하고 보여주기

한글이 섞인 파일명으로된 이미지를 업로드하면 업로드는 되는데 표시가 안되고 엑스박스가 나오게 된다. 페이지 케릭터셋을 변경해주어 해결할 수 있다. 아래 굵은 글씨로 되어있는 부분을 추가한다.

 

fckeditor/editor/filemanager/upload/asp/upload.asp

<%@ CodePage=65001 Language="VBScript"%>
<%
Option Explicit
Response.Buffer = True
Response.CharSet = "UTF-8"

 

4. 이미지 업로드 경로를 변경하기

fckeditor/editor/filemanager/upload/asp/config.asp 파일에서 아래의 내용을 변경하면 원하는 곳에 저장할 수 있다.

ConfigUserFilesPath = "/files/fck/"

 

5. 이미지 주소 형태 변경하기

이미지를 업로드하게 되면 주소가 /files/fck/image.gif 처럼 전체 경로로 되어있지 않아서 사이트 내에서는 아무런 오류가 없지만, 만약 입력된 내용으로 이메일이라도 보내게 되면 이미지가 하나도 나오지 않게 된다.

이미지 태그가 아래처럼 만들어지기 때문이다.

<img src="/files/fck/image.gif">

그렇기 때문에 이미지가 어느 서버에 있는지 알수가 없어서 엑스박스로 나오게 된다. 이것은 이미지를 입력할때 해당 이미지의 전체 주소의 형태로 태그가 만들어지면 해결될수 있는 문제이다.

아래의 포스트에 자세한 내용이 있다.

http://blog.naver.com/neofanta.do?Redirect=Log&logNo=120045457520

 

 

 

 

===================================================================================================================

※ 필자같은경우 fck에디터 셈플을 바로 테스트해볼수 있도록 배포버전을 다운받아 그대로 옮겨썼다... 더 좋은 방법이 있을경우 다른방법을 써도 무방하다.ㅋ

 

1. 아래의 주소에서 fck에디터 배포버전인 war파일을 다운받아 웹에플리케이션 홈디렉토리로 설정되어있는 위치 (TOMCAT_HOME\webapps) 아래에 놓으면 톰캣 구동시 자동으로 압축이 풀린다.

http://sourceforge.net/project/downloading.php?group_id=75348&use_mirror=nchc&filename=fckeditor-java-demo-2.4.1.war&82577010

 

2. 이제 테스트를 열씸히 해보자!!! 톰캣을 처음 설치후 아무 설정도 하지않고 war파일을 webapps아래에 두었다면 톰캣구동시 압축이 자동적으로 풀렸음을 확인했을것이다.

http://localhost:8080/fckeditor-java-demo-2.4.1/index.jsp

페이지를 들어가면 테스트 index페이지가 나타난다. 열씸히 테스트해보고 필요한기능을 배껴쓰면된다.ㅋ

 

3. 배껴쓸 준비가 되었다면

  1) TOMCAT_HOME/fckeditor-java-demo-2.4.1/fckeditor 폴더를 실제 적용하고자할 웹애플리케이션 원하는 위치에 복사하자. 

  2) WEB-INF/lib 아래의 jar파일들도 적용할 애플리케이션의 lib폴더로 복사하자. 

  3) 적용하고자할 웹애플리케이션의 WEB-INF/classes/아래에 fckeditor.properties파일을 생성한다. 아래 내용은 필자가 적용한 내용이다.ㅋ

connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

fckeditor.basePath=/resources/fckeditor
# fckeditor의 home지정. 필자의 경우 웹홈 아래 resource 폴더 아래에 fckeditor 폴더를 복사했다.
connector.userFilesPath=/resources/upload/fckeditor

# fck에디터관련 업로드 이미지, 플래시, 기타 파일들이 업로드될 위치를 지정한다.(파일 업로드 기능이 필요하다면 설정하면 된다.)

 

기타 설정값들은 http://java.fckeditor.net/properties.html 페이지를 참조한다.

 

 

다음으로 fck에디터의 파일 업로드기능이 필요하다면 설정해야할부분이다.

첫번째로 웹어플리케이션의 web.xml파일내에 아래부분을 추가한다.

 

 <servlet>
  <servlet-name>Connector</servlet-name>
  <servlet-class>
   net.fckeditor.connector.ConnectorServlet
  </servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>

 <servlet-mapping>
  <servlet-name>Connector</servlet-name>
  <!-- Do not wrap this line otherwise Glassfish will fail to load this file -->
  <url-pattern>/resources/fckeditor/editor/filemanager/connectors/*</url-pattern>
 </servlet-mapping>

 

붉은색 경로를 보면 /resources/ 부터 설정된것을 확인할수 있다. 설치한 위치를 지정하면 된다.

위의 패턴으로 호출될때 ConnectorServlet이 불려진다는 내용이다.

 

자 이제 적용한 웹애플리케이션을 확인해보면 되겠다.

 

혹 부족한사항이나 필자가 잘못쓴 내용이 있다면 아래의 주소로가면 기타 설정내용이 상세하게 잘 나와있으니 참고하기 바란다.~!

http://java.fckeditor.net/

 

그리고 하나 fck에디터가 한글파일업로드시 파일이 깨여져서 업로드되어 이미지가 깨어짐을 확인할수 있을것이다. 이는 기본적으로 fck에디터가 utf-8만을 지원하기 때문이다. 국내 개발은 보통 euc-kr로 개발하기때문에 지원을 하지 않는다. 필자가 소스파일을 내려받아 여기저기 수정하다... 귀찮아서 포기했다..--ㅋ 하고자 하시는 분들은 직접 소스파일을 내려받아 수정하시면 되겠다.ㅋ