다른 곳에 업로드 하기 위한 글작성용으로
전체 게시판 중 하나는 FCKeditor를 설치 사용한다.
해결되지 않는 문제.. 저장하면 줄마다 p 태그가 먹는다. 구형버젼 테스트 했는데 마찬가지.
결국 사용은 입력 게시판 하나만 적용하고 작성후 본 게시판에 복사해야한다.
그래도 사용해야 하는 이유는 기능이 막강하니까..
강력한 에디터. 에디터 포함 800px 이상 요구됨. 에디터 자체만 가로 780px
 다른 게시판에 글 올리기 위한 준비글 작성에 매우 좋다. 그림/플래시/기타 적용 최상.

(그런 것이 불편한 분은 제가 만든 제로보드 일반게시판으로 에디터를 자체 포함한 스킨을 사용해 보시기 바랍니다. 현재의 폼피에 적용된 스킨입니다.)

참고/ 3가지 에디터 게시판을 비교해 보시기 바랍니다.  

메뉴-Bulletin의 3가지 게시판 비교 ☞  http://amen.maru.net/bbs/zboard.php?id=51 
  
PHP ASP JSP등 모두 지원하고, 또 에디터를 표현 한 것은 자바스크립트로만으로도
되어 있어, 어디든 된다는 것입니다. 또, 2.0 RC3에서 파이어폭스에서도 완벽히
지원되고 있습니다. 또 메뉴들은 자동으로 인식하여 그것에 맞는 국가의 언어로 나옵니다.
이미지 파일 업로드와 스타일 설계등 그 특징이 많습니다. 
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가 적용된 상태로 보이게 됩니다.