Media Log

[웹에디터]에 해당되는 글 1

  1. fckeditor 사용방법 2008.11.13

요거 제대로 익혀서 사용만 하면 웹에디터로서는 최상인듯

< 적용방법 >

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>