|
다른 곳에 업로드 하기 위한 글작성용으로
전체 게시판 중 하나는 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() ;
}
}
와 같
즉 config.EditorAreaCSS의 값은 CSS 파일의 경로가 됩니다.
이를 적용해 보면 실제 Rich Editor control에서 해당 CSS가 적용된 상태로 보이게 됩니다.
|
△[푸른산]