다른 곳에 업로드 하기 위한 글작성용으로 전체 게시판 중 하나는 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가 적용된 상태로 보이게 됩니다.
|