웹모아 
웹모아  로그인  회원가입   
웹모아
 
php와 웹서버
 


  FCKeditor 설치법 정리
  등록: 2013-12-14 20:09:38 조회:12726



FCK데모보기  http://www.fckeditor.net/Demo/
FCK에디터다운로드   http://www.fckeditor.net/ 

1. 다운받아 자신의 계정에 업로드한다. (bbs 폴더 아래에 풀었음)

2. 설치할 스킨 write.php 상단에 인클루드 문장 추가한다.(홈피 amen의 경우)

<? include "/home/amen/public_html/bbs/fckeditor/fckeditor.php"; ?>

3. 다음 라인을 찾아

<?=$hide_html_start?> <input type=checkbox name=use_html <?=$use_html?> value=1> HTML사용 <?=$hide_html_end?>

아래것으로 수정한다.

<?=$hide_html_start?> <input type=hidden name=use_html checked <?=$use_html?> value=2> HTML사용 <?=$hide_html_end?>


4. 다음 라인을 찾아

<td colspan=2 style=padding:5px><textarea name=memo <?=size2(90)?> rows=18 class=zv3_w_textarea><?=$memo?></textarea></td>

이것으로 수정한다.

<?php
      $oFCKeditor = new FCKeditor('memo');          // textarea name
      $oFCKeditor->BasePath = '../../../bbs/fckeditor/'; // 설치한 폴더 지정
      $oFCKeditor->Value      = $memo ; // 로딩시 출력
      $oFCKeditor->Width      = 780;      // width
      $oFCKeditor->Height     = 600;      // height
      $oFCKeditor->Create();
?>

 - 여기까지가 설치 끝 -



5. 엔터 입력시 두줄 나오는 문제 

fckconfig.js 파일안에 보면 115번째 줄
FCKConfig.EnterMode = 'p' ;   // p | div | br
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br

이런 두 줄이 있는데 설명은
Enter는 p 기능이므로 한 줄 띄기가 된다. shift-Enter는 br 기능이므로 줄바꿈만 된다.
이것을 p와 br을 바꿔서 적용하거나 둘다 br 태그가 되게 할 수도 있다.

구버젼의 경우 엔터키 입력 시 <p> 태그가 아닌 <br> 태그가 적용 되도록 하려면 
FCKConfig.UseBROnCarriageReturn 값을 false에서 true로 변경

그러나 글보기에서는 p 태그가 다시 삽입됨. ...미해결 상태

6. 테이블 생성시 밑으로 쭉 밀려나는 문제
생성된 소스 코드를 보니 "100%" 이렇게 나와야 될것이 "100" 요런 식으로 생성됨.zboard 폴더의 write_ok.php 130줄 정도에 

$memo=addslashes($memo); // 이 라인을 아래처럼 주석 처리
// $memo=addslashes($memo);

이렇게 처리를 하니 테이블이 제대로 생성된다는데 해보니 안됨..ㅎ
이것이 해결 안되면 사용이 어렵겠다.....

7. 업로드 이미지 기능을 위한 수정 (미확인)

1. FCKeditor/filemanager/upload/php/디렉토리 안의 upload.php를 수정한다.

$UPLOAD_BASE_URL = '/FCKeditor/filemanager/userimages/';
//위와 같이 경로를 변경해 준다.

FCKeditor/filemaneger/디렉토리에 userimages디렉토리를 만들어주고 권한을 707로 준다.

2.FCKeditor js폴더안의 fck_config.js를 수정한다.
각각 php관련 되는 것을 고쳐준다.

//##
//## Image Browsing
//##
config.ImageBrowser = true ;
config.ImageBrowserURL = config.BasePath + "filemanager/browse/sample_php/browse.php" ;
config.ImageBrowserWindowWidth = 400 ;
config.ImageBrowserWindowHeight = 250 ;
//## Image Upload
//##
config.ImageUpload = true ;
config.ImageUploadURL = config.BasePath + "filemanager/upload/php/upload.php" ;
config.ImageUploadWindowWidth = 300 ;
config.ImageUploadWindowHeight = 150 ;
config.ImageUploadAllowedExtensions = ".gif .jpg .jpeg .png" ;
//## Link Browsing
//##
config.LinkBrowser = true ;
config.LinkBrowserURL = config.BasePath + "filemanager/browse/sample_html/browsefile.html" ;
config.LinkBrowserWindowWidth = 400 ;
config.LinkBrowserWindowHeight = 250 ;
//## Link Upload
//##
config.LinkUpload = true ;
config.LinkUploadURL = config.BasePath + "filemanager/upload/php/upload.php" ;
config.LinkUploadWindowWidth = 300 ;
config.LinkUploadWindowHeight = 150 ;
config.LinkUploadAllowedExtensions = "*" ; // * or empty for all
config.LinkUploadDeniedExtensions = ".exe .asp .php .aspx .js .cfm .dll" ;

8. 작업툴바 설정하여 불필요한 것 정리할 수 있다.

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']
] ;


9. 스킨 변경 3가지
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;   // 기본 스킨 default

10.  내용을 저장할때 내용을 입력하라는 에러 임시해결 
   
제로보드 script 폴더에서 script_write.php를 열어 아래 부분을 주석처리하였습니다. 

  /*
  if(!document.write.memo.value)
  {
   alert('내용을 입력하여 주세요.');
   document.write.memo.focus();
   return false;
  }
 */

10. FCKconfig.js를 열어 툴바에서 기능 삭제/추가할 수 있다.

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']
] ;

11. 공백 값 입력을 방지하기 위해선 스크립트를 다음과 같이 수정합니다.

/* 데이터 전송전 체크 */
function send()
{
 var oEditor = FCKeditorAPI.GetInstance('contents') ;

 var div = document.createElement("DIV");
 
 div.innerHTML = oEditor.GetXHTML();

 if( isNull( div.innerText ) )
 {
  alert("내용을 입력하세요."); 
  oEditor.Focus();
  return false; 
 }

 create_form.submit();
}

12.
FCKEditor의 문제중의 하나는 Enter를 입력하는 경우에 문단이 바뀌면서 P 태그가 붙게 되고 따라서 줄간격이 커진다는 큰 단점이 있죠. 이것은 CSS의 수정으로 간단히 처리할 수 있습니다.
일단 css 디렉토리의 editoarea.css 파일의 P 태그 부분의 주석을 풀어주면 1차적으로 적용이 됩니다. 소스를 분석해 보면



function initEditor()
{
  if (! bInitialized)
  {
    bInitialized = true ;
    loadToolbarSet() ;
    loadToolbarSourceSet() ;
    objContent.BaseURL = config.BaseUrl ;
  }
  if (! bDataLoaded && ! objContent.Busy)
  {
    bDataLoaded = true ;
    objContent.DOM.body.onpaste = onPaste ;
    objContent.DOM.createStyleSheet(config.EditorAreaCSS) ; setLinkedField() ;
  }
}
와 같
이 되어 있는데 위의 굵은 글씨 부분이 바로 CSS가 적용되는 부분이죠.
즉 config.EditorAreaCSS의 값은 CSS 파일의 경로가 됩니다.
이를 적용해 보면 실제 Rich Editor control에서 해당 CSS가 적용된 상태로 보이게 됩니다.
11.
에디터에서 기본 폰트를 변경하기 위해서, FCKeditor/editor/css/fck_editorarea.css 파일 안의
Body 부분 font-family 순서와 종류를 바꿈

 

body
{
 font-family: Arial;Verdana;굴림;돋움;바탕;궁서;Comic Sans MS;Courier New;
 font-size: 12px;
 padding: 5px 5px 5px 5px;
 margin: 0px;
 border-style: none;
 background-color: #ffffff;
}



 

 





php와 웹서버
페이지: 1 / 1   

   서브도메인 자동셋팅 Rewrite(리눅스 BIND,2600
   HTML에서 한글이 깨진다1175
   html문서에 한글 인코딩 지정 방법1476
   PHP 한글 깨짐현상 해결하기(html, mysql2162
   CKEDITOR 설치 및 설정4886
FCKeditor 설치법 정리12727
   브라우저 기반의 위지윅(WYSIWYG) 에디터(ED2859
     FCKeditor Version 2.1 간단설치2039
       FCK 에디터 설치, 그리고 기본 설정 (FCK E2106
   Tinymce 설치3471
   php-mysql 한글 깨짐 현상2441
   iis 서비스 설치3145
   윈도우용 mysql사용을 위한 환경설정3153
   윈도우용 mySql5 설치와 설정 13226
   제1강 php의 개념과 웹상에 게시된 php에 대한3154
   아파치의 httpd.conf 환경 설정3167
   윈도우용 php 5 설치3372
   아파치(Apache) 웹서버 설치3329
   php와 웹 강좌 - 초급부터 간단한 방명록을 작3224
≪ [1]   ≫

복수단어 검색은 공백(space)로 구분해 주세요.



 
인기 글
4886
3747
4961
20126
4898
4249
7053
9663
3919
10190
4359
8042
6614
10256
4451
 
최근 글
72
88
99
67
63
73
2844
707
685
872
774
3918
3309
3370
3726