FCK 에디터 설치, 그리고 기본 설정 (FCK Editor)

 

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

6. 편집기 안의 툴바에서 폰트목록에 굴림, 돋움체 추가하기

/fckeditor/fckconfig.js 파일을 열자.

아래 내용으로 변경하고 더 원하는 폰트가 있으면 추가한다.

FCKConfig.FontNames  = '굴림;굴림체;돋움;돋움체;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

 

위처럼 추가를 해도 처음 편집기안에 커서가 위치하게 되면 기본 폰트가 굴림이 아니라 Arial로 되어있다. 매번 변경할 필요 없이 스타일 파일의 기본 폰트를 변경하여 매번 폰트를 바꿔줘야 하는 불편함을 없앨 수 있다.

/fckeditor/editor/css/fck_editorarea.css

body, td
{
 font-family: Gulim, Arial, Verdana, Sans-Serif;
 font-size: 12px;
}

[출처] FCK 에디터 설치, 그리고 기본 설정 (FCK Editor)|작성자 미첼