메뉴 건너뛰기

Dev tips

Etc. 이지웍에디터 FCKEditor 설치 및 사용

taknim 2008.05.23 20:09 조회 수 : 12879 추천:2523

http://deki.kr/blog/entry/FCKeditor-설치?TSSESSION=27b517313a1ad2c420f886143580d9a9http://nalpari.springnote.com/pages/793484

< 적용방법 >

1. 압축을 푼후 fckeditor폴더를 사이트 root폴더에 풉니다.
 
2. 글쓰기(에디터)가 들어가는 페이지에 include를 합니다.

 

<? include "../fckeditor/fckeditor.php"; ?>

 


3.편집기(textarea)가 들어가는 위치에 다음의 코드를 삽입합니다.

 

<?php
$oFCKeditor = new FCKeditor('text');          // textarea name
$oFCKeditor->BasePath = '../fckeditor/';
$oFCKeditor->Value      = $CONTENT ; // 로딩시 출력
$oFCKeditor->Width      = 400;      // width

$oFCKeditor->Height     = 300;      // height
$oFCKeditor->Create();
?>

 


4. 사용법을 모르시면 sample를 통해 확인을 하실수 있습니다.

/_samples/php/sample01.php
~
/_samples/php/sample04.php

 

 


<기타 설정>

설정파일1 : /fckeditor/fckconfig.js

 

 

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;  // 기본 css

 

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;   // 기본 스킨

 

FCKConfig.DefaultLanguage  = 'en' ;    // 기본사용되는 Language

 

FCKConfig.ToolbarSets["Default"] = [
 ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
 ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
 ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
 ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
 '/',
 ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
 ['OrderedList','UnorderedList','-','Outdent','Indent'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
 ['Link','Unlink','Anchor'],
 ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
 '/',
 ['Style','FontFormat','FontName','FontSize'],
 ['TextColor','BGColor'],
 ['FitWindow','-','About']
] ;

// 사용 될 기능을 추가하고 삭제할수 있다.

 


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

// Enter와 ShiftEnter를 클릭했을때 사용되는 <br>와 <p>태그

 


등 기본단어만 아시면 바로 바로 수정을 하실수 있습니다.

 

 


설정파일2 : /fckeditor/fckeditor.js


 

this.Width   = width   || '100%' ;   
this.Height   = height  || '200' ;

에디터의 가로 및 높이 조절

 

 

기본설정변경3 : /fckeditor/fckconfig.js

 

FCKConfig.ProtectedSource.Add( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code
FCKConfig.DefaultLanguage  = 'ko' ;

FCKConfig.ToolbarCanCollapse = false ;    // open button cancel
FCKConfig.EnterMode = 'br' ;   // p | div | br
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php


 

파일업로드설정변경

 

1./home/~/public_html/fckeditor/editor/filemanager/upload/php/config.php

 

$Config['Enabled'] = true ;  // true로 변경
$Config['UserFilesPath'] = '/Upload/' ;     // 웹상 경로

$Config['UserFilesAbsolutePath'] = $_SERVER["DOCUMENT_ROOT"].'/Upload/' ;    또는
$Config['UserFilesAbsolutePath'] = '/home/~/public_html/Upload/' ;  // 실제 경로

 

ps) Upload 디렉토리의 파일 퍼미션(777) 체크 - chmod 777 /home/~/public_html/Upload

 

2./home/~/public_html/fckeditor/editor/filemanager/browser/default/connectors/php/config.php

 

$Config['Enabled'] = true ;
$Config['UserFilesPath'] = '/Upload/';
$Config['UserFilesAbsolutePath'] = $_SERVER["DOCUMENT_ROOT"].'/Upload/' ;    또는
$Config['UserFilesAbsolutePath'] = '/home/~/public_html/Upload/' ;  // 실제 경로


 

Null 체크

<script language="javascript">

var oEditor = FCKeditorAPI.GetInstance('content') ;
var content = oEditor.GetXHTML(true);

if(content == ""){
 alert('글내용을 입력하세요');
 return false;
}
</script>