방장은 누규? 채팅사이트 조이팅스토리를 운영하며 마케팅, 사업 등에 관심이 많은 철이
아래강좌는 open.net 에서 퍼온글입니다. ^^;
#######################################################################################################
새해 복~ 많이 받으세요~
이번 강좌는 FCKeditor의 구성설정에 대해 간단히 알아보려고하는데요 아마도 FCKeditor관련해서는 마지막 강좌가 될 것 같네요.
강좌소스는 역시 지난번에 사용했던 웹사이트로 진행하겠습니다. 이미 지난번 강좌에서 FCKeditor를 설치하고 사용했는데요, 필요에 따라서 설정을 변경해야 하는 일이 생기게 됩니다. 스킨을 바꾸고, 툴바도 바꾸고, 이모티콘도 추가하고, 한글폰트도 넣고 등등... 그럼 먼저 구성파일이 어떻게 생겼는지 한번 봅시다~
우리는 웹루트의 fckeditor라는 폴더에 설치를 했는데 이 폴더 안에 fckconfig.js라는 파일이 바로 그것입니다. 열어보면 라이센스가 써있고 각종 설정들이 쭉~~ 있고, 중간중간 주석도 간간히 보이지만 영어라 패스~ 이 파일을 직접 수정해도 되고 따로 자기만의 파일을 사용해도 되는데 우리는 후자로 해보겠습니다. 그럼 먼저 fckconfig.js를 다른 이름으로 복사합니다. MyConfig.js라고 이름을 지었습니다.
[그림1]
구성파일로 MyConfig.js를 사용한다고 FCKeditor한테 알려줘야 되겠죠? 원래의 fckconfig.js를 열어서 처음으로 나오는 설정이 바로 이것입니다.
[소스코드1 - fckconfig.js]
FCKConfig.CustomConfigurationsPath = '/fckeditor/MyConfig.js';
이제 MyConfig.js를 입맛에 맞게 고쳐서 쓰면 되겠습니다.
스킨바꾸기
에디터의 스킨을 바꿔보겠습니다. 기본적으로 /fckeditor/editor/skins안에 default, office2003, silver등 3가지가 들어 있습니다. silver로 바꿔보겠습니다. 45번째줄 정도에 보면~
[소스코드2 - MyConfig.js]
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;
참 쉽조잉~ 스타일이 맘에 안든다면 기본 스타일을 참고로 직접 만들어 사용하면 되겠습니다.
에디터에 기본 포커스
에디터가 로드 되었을때 커서가 편집창에 위치하도록 포커스를 설정해 보겠습니다. 82번째줄 정도에 보면~
[소스코드3 - MyConfig.js]
FCKConfig.StartupFocus = true ;
툴바셋 만들기
툴바에 너무나도 많은 버튼들이 나열되어 있는데 원하는 버튼만 추려서 간단하게 사용하면 좋겠죠. 그래서 원하는 툴바셋을 여러개 만들고 필요에 따라 선택해서 사용하면 되겠습니다. 101번째줄 정도에 보면~
[그림2]
'default'라는 툴바에는 모든 버튼이 다 들어 있고, 'basic'는 아주 단순합니다. 이 녀석을 복사해다가 이름을 바꾸고 원하는 버튼만 나열하면 되겠습니다. []는 버튼그룹을 짓고 '/'는 줄바꿈이 되겠습니다. 그래서 'MyToolBarSet'이라고 한줄짜리로 만들어 보죠.
[소스코드4 - MyConfig.js]
1
2
3
4
5
2
3
4
5
FCKConfig.ToolbarSets["MyToolbarSet"] = [
['Bold', 'Italic', 'Underline', 'StrikeThrough', 'FontSize', 'TextColor', 'BGColor', 'RemoveFormat'],
['Blockquote', 'Link', 'Unlink', 'Image', 'Smiley', 'SpecialChar'],
['About']
];[소스코드5 - mytoolbarset.aspx]
<FredCK:FCKeditor ID="FCKeditor1" runat="server" ToolbarSet="MyToolbarSet" />
[그림3]
Enter 모드 바꾸기
편집창에서 Enter를 누르면 기본적으로 P태그가 만들어집니다. 우리는 보통 Enter를 누르면 줄만 바뀌는게 익숙하기 때문에 P태그는 불편한감이 있습니다. 그래서 Shift+Enter를 누르면 P태그가 아닌 BR태그로 줄바꿈이 되는데 보통 사용자들은 이런 기능을 잘모르고 불편하게 생각할 수도 있습니다. 그래서 Enter를 사용자들에게 익숙하게 동작하도록 Enter와 Shift+Enter를 바꾸겠습니다. 위에서 했던 툴바셋 아래에 보면~
[소스코드6 - MyConfig.js]
1
2
2
FCKConfig.EnterMode = 'br' ; // p | div | br
FCKConfig.ShiftEnterMode = 'p' ; // p | div | br
이제 Enter를 누르면 BR태그가 먹히고, Shift+Enter를 누르면 P태그가 먹히게 됩니다. 줄바꿈태그로 br대신 div를 사용해도 됩니다.
글꼴 추가하기
FCKeditor가 외국에서 만든거다 보니 글꼴선택에 한글글꼴이 없습니다. 그래서~ 한글글꼴을 추가해보도록하죠~ 글꼴은 세미콜론(;)으로 구분해주면 됩니다.
[소스코드7 - MyConfig.js]
FCKConfig.FontNames = '맑은 고딕; 돋움; 굴림; 궁서; 바탕; Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
[그림4]
웹이라는 환경을 생각해서 일반적으로 운영체제에 포함되어 있는 글꼴을 추가해야 겠죠.
팝업다이얼로그 배경 바꾸기
에디터의 몇몇 기능은 팝업다이얼로그를 띄워서 동작하게 되는데, 팝업다이얼로그 뒷배경의 색깔과 불투명도를 바꿀수 있습니다. 기본값은 흰색에 불투명도 50%로 되어 있는데 이걸 녹색에 불투명도 30%로 해보겠습니다. 구성파일의 거의 마지막으로 내려와 보면~
[소스코드8 - MyConfig.js]
1
2
2
FCKConfig.BackgroundBlockerColor = '#00FF00' ;
FCKConfig.BackgroundBlockerOpacity = 0.30 ;
[그림5]
파일업로드/파일탐색기
고맙게도 에디터에 파일업로드 기능과 파일탐색기가 들어있습니다. 요것도 사용해봅시다. 탐색기와 업로드로 사용할 서버측 언어를 선택합니다. 우리는 ASP.NET을 사용하므로 'aspx'라고 주면 되겠네요. 그 아래로 탐색기와 업로드를 사용할지 여부를 설정하면 되겠습니다.
[소스코드9 - MyConfig.js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
FCKConfig.LinkBrowser = true ;
...
FCKConfig.ImageBrowser = true ;
...
FCKConfig.FlashBrowser = true ;
...
FCKConfig.LinkUpload = true ;
...
FCKConfig.ImageUpload = true ;
...
FCKConfig.FlashUpload = true ;
...
이걸로 다 된게 아니고, 추가로 해줘야 될게 더 있습니다. 서버환경에 맞게 connector를 구성해야 합니다. /fckeditor/editor/filemanager/connectors에 보면 각 언어별로 폴더가 들어 있습니다. aspx폴더도 보이네요. 이 폴더 안에 config.ascx를 열어서 사용자인증, 업로드폴더등을 설정합니다.
[소스코드10 - config.ascx]
1
2
3
4
2
3
4
private bool CheckAuthentication()
{
return true; //인증시스템에 따라 인증확인 성공하면 true, 아니면 false를 리턴하도록 작성.
}
업로드 폴더 위치나 나머지 설정들은 public override void SetConfig()를 보시면 충분히 알 수 있습니다. 각자 해보세요.
이제 에디터에서 이미지나, 플래쉬, 링크등의 버튼을 눌러 팝업다이얼로그를 열어 "서버보기"버튼과 "업로드"탭이 잘 되는지 확인해봅시다.
[그림6]
이모티콘 바꾸기
위지윅에디터의 기능중 가장 많이 사용될것이라 생각되는 이모티콘! FCKeditor에는 기본적으로 MSN메신저의 이모티콘이 들어 있습니다. 이것 말고 좀더 크고 움직이는 이모티콘을 사용하고 싶다면? 그까이꺼 대충~ 해봅시다. 먼저 이쁜 이모티콘이 있어야 하는데... 인터넷에 찾아보면 어렵지 않게 무료 이모티콘을 구할 수 있습니다. 역쉬 무료가 쵝오♬♬♬ 우리 사이트의 링크페이지에도 무료이모티콘사이트 몇개 올려놨으니 한번 방문해보세요.
자, 이모티콘을 구했다면 /fckeditor/editor/images/smiley 폴더에 my라는 폴더를 만들고 이 안에 이모티콘을 복사합니다. 파일이름은 1.gif~4.gif까지 총 4개.
[그림7]
이제, MyConfig.js로 돌아와서 이모티콘 폴더 위치와 파일 이름을 고쳐줍니다.
[소스코드11 - MyConfig.js]
1
2
3
4
5
6
2
3
4
5
6
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/my/' ; //폴더 위치
FCKConfig.SmileyImages = ['1.gif', '2.gif', '3.gif', '4.gif'] ; //파일 이름
//아래는 이모티콘 팝업다이얼로그설정
FCKConfig.SmileyColumns = 2 ; //가로 이모티콘 개수
FCKConfig.SmileyWindowWidth = 320 ; //팝업다이얼로그 너비
FCKConfig.SmileyWindowHeight = 210 ; //팝업다이얼로그 높이
[그림8]
이상, 준비한 4편의 FCKeditor강좌를 모두 마쳤습니다. 깊이있는 내용 없이 간단하게 FCKeditor사용방법에 대해 알아 봤는데, 여러분에게 도움이 되었는지 모르겠네요. 강좌와 관련된 궁금한 점이나 잘못된 점 등등 의견 있으시면 댓글, 포럼, Email(도움말/운영자에게)을 이용해 주세요. 열심히 강좌를 읽어주신 분들께 감사드리고 더 좋은 내용의 강좌로 만나 뵙도록 하겠습니다. 감사합니다
댓글 없음:
댓글 쓰기