지에디터와 지업로더 같이 쓰기 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

지에디터와 지업로더 같이 쓰기 정보

지에디터와 지업로더 같이 쓰기

본문

안녕하세요.
부족하지만, 필요하신 분도 계실 것 같아서 제가 쓰고 있는 방법을 공유해보려고 합니다.
사이트 운영하면서 그때그때 소스를 수정해서 쓰는 수준이라 정확히 알지는 못해요.
그래서 설명이 좀 매끄럽지 않을 수 있으니 이해해주세요.
좀더 세련되고 간편한 방법이 있다면 알려주세요. ^-^

지금 제가 운영하는 사이트에서 지에디터와 지업로더를 연결해서 사용하고 있습니다.
지블로그에서처럼 파일을 올릴 수 있고요. 그 파일들은 그누보드 DB에 저장됩니다.
지에디터가 정식 발표되었고, 저도 개인적으로 정리해야할 일이 있었는데, 겸사겸사 여기에도 남겨보네요.

좋은 점은 한꺼번에 여러파일을 올릴 수 있고요. 이미지 파일 같은 것은 본문에 바로 삽입할 수 있다는 겁니다.  파일들도 일반 파일들 처럼 /data/스킨 디렉토리에 저장되고요. 그누DB에 기록 되니까 관리하기도 편할 것 같습니다.

단점이라 하면, 파일을 한꺼번에 올릴때에 간혹 올라간 파일 목록이 제대로 뜨지 않는 경우가 있습니다. 그건 단순히 표시가 안된다 뿐이지, 파일은 정상으로 올라가고, DB에도 기록된 상태이기 때문에 새로고침하던가 쓰기 버튼 눌러서 일단 글쓰기를 마친다음에 수정하는 방법을 쓰면 됩니다. 글수정하기로 들어가면 목록을 다시 읽어보면서 제대로 표시됩니다. 그밖에 파일명이 순서대로 되어있을 경우 한꺼번에 올리면 그 순서가 유지되지 않는 다는 점도 단점입니다.
왜 그런 현상이 발생하는지는 모르겠네요.
그리고, 파일을 삭제하고 다시 올릴 경우에는 파일 테이블에서 빈 공간이 생긴다라는 것 정도 될것 같네요.


1. 지에디터 설치 (11월 20일 A/S 되었습니다.)
http://www.sir.co.kr/bbs/board.php?bo_table=geditor_pds&wr_id=3
지에디터는 위에서 받으실 수 있어요.
/geditor 디렉토리에 파일 풀어놓으시면 될것 같네요.
같이 들어있는 write.skin.php 파일은 게시판 스킨에 덮어 씌웠습니다.

덮어 씌운  write.skin.php 파일에는 아래 소스가 포함되어 있고요.
<script language="JavaScript" src="../geditor/geditor.js"></script>

내용 textarea 쪽에도 수정이 있습니다.
지에디터 설치 메뉴얼을 참고하셔서 직접 수정하셔도 됩니다.

그리고, 게시판 관리에 가셔서 DHTML 에디터 사용에 체크해주시고요. HTML 쓰기 권한을 글쓰기 권한과 일치시켜 주면 됩니다.


2. 지업로더 설치(스킨 수정)
지업로더는 따로 나와있는 게 없습니다.지블로그에는 탑재되어있지만요.
그래서, 곱슬최씨님께서 올려주신 스킨을 수정해서 사용할 거예요.
http://www.sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=58083
위 링크로 가보시면 곱슬최씨님께서 스킨을 올려주셨을 거예요.
(곱슬최씨님께 감사드리고요.^^ 미리 허락받지 못해서 죄송합니다.)

파일을 받으시고요. 그 안에서 필요한 파일은 다섯개입니다.

guploader.js
flash_uploader.swf
photo_delete_file.php
photo_upload.php
photo_upload_after.php

위 파일들만 살짝 빼서 작업하고자 하는 스킨 디렉토리에 넣습니다.

이제 본격적으로 허접 설명이어집니다.^^

write.skin.php

이 파일을 수정할거예요.
이 파일은 아까 지에디터를 설치하면서 따로 제공되는 파일로, 작업하고자 하는 게시판 스킨에 덮어씌워진 상태입니다.

<script language="javascript">
// 글자수 제한
var char_min = parseInt(<?=$write_min?>); // 최소
var char_max = parseInt(<?=$write_max?>); // 최대
</script>

<script language="javascript">
// 글자수 제한
var char_min = parseInt(<?=$write_min?>); // 최소
var char_max = parseInt(<?=$write_max?>); // 최대
</script>
<script language=javascript src="<?=$g4[path]?>/js/prototype.js"></script> <!-- 프로토타입 발동;김철호071116 -->

주석은 신경쓰지 마시고요. 아래와 같이 한줄 추가해주시면 됩니다.^^

11월 20일에 A/S입니다.
정확히는 모르겠는데, prototype.js이라는 파일이 다른 기능을 사용할 수 있게 해주는 인터페이스 파일 같네요. 그누보드 4.21.00 버전 부터 /js 디렉토리에 탑재되어 있습니다.
따라서, 그 이전 버전을 사용하시는 분들께서는 업데이트를 하시거나, 4.21.00 이후 버전에서  prototype.js 파일만 받으셔서 /js 디렉토리에 넣어주시면 될것 같습니다.
이 파일이 없으면 업로드할때 파일이 올라가는데, 목록은 표시되지 않습니다.
11월 20일에 A/S완료 합니다.

그리고, 기존에 파일 업로드 부분을 아래 내용으로 대체해줍니다.

<!-- 지업로더 추가;김철호071116 -->
<? if ($is_file) { ?>
<tr><td colspan=2>
<script language=javascript src="<?=$board_skin_path?>/guploader.js"></script>
<script language=javascript>
var uploader = new guploader('uploader');

uploader.set_path("<?=$board_skin_path?>");

// 업로드 실행파일 경로
uploader.set_file_action("<?=$g4[url]?>/skin/board/<?=$board[bo_skin]?>/photo_upload.php?mb_id=<?=$member[mb_id]?>&wr_id=<?=$wr_id?>&bo_table=<?=$bo_table?>");

// 업로드 경로
uploader.set_file_path("<?=$g4[path]?>/data/file/<?=$bo_table?>");

// 업로드 완료 후 실행할 함수
uploader.set_after_upload("uploader.after_upload");

// 업로드 완료 후 실행할 함수의 인수
uploader.set_after_upload_val("mb_id=<?=$member[mb_id]?>&bo_table=<?=$bo_table?>&wr_id=<?=$wr_id?>");

// 파일 삭제 함수 정의
uploader.set_delete_file("uploader.delete_file");

// 업로더 실행
uploader.draw_uploader();
</script>
</td></tr>
<tr><td colspan=2 height=1 bgcolor=#e7e7e7></td></tr>
<? } ?>
<!-- 지업로더 끝;김철호071116-->

위 내용은 곱슬최씨님의 스킨에서 view.skin.php 파일을 참고했습니다.


guploader.js

그 다음은 이 파일입니다.

11월 20일에 A/S입니다.

101줄에 보시면 에디터에 삽입 부분이 주석처리 되어 있습니다.
//draw += "<input type=\"button\" id="+gup_name+"_btn_editor value=\"에디터에 삽입\" onclick=\""+gup_name+".file_to_editor()\" style=\"border:1px solid #ccc; background-color:#efefef; padding:5px;\">";

draw += "<input type=\"button\" id="+gup_name+"_btn_editor value=\"에디터에 삽입\" onclick=\""+gup_name+".file_to_editor()\" style=\"border:1px solid #ccc; background-color:#efefef; padding:5px;\">";

본문삽입 기능을 사용하기 위해서 주석처리를 해제시켜 줍니다.
(앞쪽의 슬래시 두개를 없애주면 됩니다.)
11월 20일에 A/S완료합니다.


그리고, 231줄 쯤 될거예요. 위 내용을 아래 내용으로 고칩니다.

this.insert_editor = function(html) {
    geditor_content.get_range();
    geditor_content.insert_editor(html);
}

this.insert_editor = function(html) {
    geditor_wr_content.get_range(); //content->wt_content로 수정;김철호071116
    geditor_wr_content.insert_editor(html); //content->wt_content로 수정;김철호071116
}


photo_delete_file.php
photo_upload.php
photo_upload_after.php


그 다음 세 파일에 공통으로 수정되는 부분입니다. 12줄 쯤에 추가해주시면 될거예요.
다른 소스들과 겹치지 않게 추가해주시면 될거예요.
photo_upload.php 파일의 경우에는 if (!$wr_id) $wr_id = 0; 라는 소스가 있습니다.
그것을 삭제하고 아래 소스로 대체하면 됩니다.

if (!$wr_id) { //새글일 경우;김철호071116
 $wr_id=abs(ip2long($_SERVER['REMOTE_ADDR'])); //IP를 임시로 사용;김철호071116
 if($wr_id >= 2147483647) //IP가 너무 클경우;김철호071116
  $wr_id=substr($wr_id,-9); //아홉자리로 자름;김철호071116
}

그냥 아래 처럼 써줘도 될것 같네요. 테스트는 안해봤습니다.^^

if (!$wr_id) {
 $wr_id=substr(abs(ip2long($_SERVER['REMOTE_ADDR'])),-9);
}

이거는, 업로더에서 파일을 올리면 곧바로 DB에 기록되는데, 파일이 기록되는 테이블을 보시면 wr_id를 기록하게 되어있습니다.
그런데, 새로 글을 쓰는 경우에는 wr_id 값이 없지요. 그래서 임시방편으로 (중복 가능성이 적은) IP값을 wr_id에 넣어주었습니다.
그리고, 나중에 글 쓰기를 완료하는 시점에서 wr_id 값이 결정되면, IP값을 넣어주었던 곳에 다시 wr_id값을 넣어줍니다. 그러면, 정상적으로 업로드가 됩니다.

위 소스는 제가 임시방편으로 여기저기 기웃거리면서 만든 건데, 보시고, 좀더 좋은 방법이 있으면 알려주세요. ^^


photo_upload.php

위에서 한번 수정했었던 파일입니다.
위 소스를 아래 소스로 대체합니다.
bt_no 값이 0부터 시작하게 합니다.

$bf_no = $row['fn']+1;

if($row['fn']=='') //파일 누적 번호가 없다면, 0부터 시작
 $bf_no = 0;
else
 $bf_no = $row['fn']+1; //파일 누적 번호가 있다면, 그 다음부터 시작

이것도 제가 한번 작성해 본것인데요. 좀더 좋은 방법이 있으면 알려주세요.^^

그리고, 아래쪽 보면 썸네일 소스가 있는데, 저는 따로 썸네일을 쓰고 있어서 삭제하겠습니다.

//썸네일 관련 소스로, 사용하지 않으므로 일단 삭제
    include_once("$board_skin_path/skin.lib.php");

    list($img2_width, $img2_height) = explode("x", $board[bo_2]);
    if (!($img2_width && $img2_height)) $img2_width = $img2_height = 100;

    $thumb_path = $dir.'/thumb';

    @mkdir($thumb_path, 0707);
    @chmod($thumb_path, 0707);

    $file = $dir .'/'. $upload['file'];
    if (preg_match("/\.(jpg|gif|png)$/i", $file) && file_exists($file)) {

        // 원본 비율에 맞춰 섬네일 크기 조정
        $size = @getimagesize($file);
        if ($size[0] > $size[1]) {
            $rate = $board[bo_1] / $size[0];
            $height = (int)($size[1] * $rate);
            $img_width = $board[bo_1];
            $img_height = $height;
            createThumb($img_width, $img_height, $file, $file);
        } else {
            $rate = $board[bo_1] / $size[1];
            $width = (int)($size[0] * $rate);
            $img_width = $width;
            $img_height = $board[bo_1];
            createThumb($img_width, $img_height, $file, $file);
        }

        $thumb_file = "{$thumb_path}/{$wr_id}_{$bf_no}_{$img2_width}x{$img2_height}";
        createThumb($img2_width, $img2_height, $file, $thumb_file, true);
    }

이 썸네일 소스를 사용하시려면 skin.lib.php 파일이 필요할겁니다. 곱슬최씨님 스킨에 들어있어요.


write_update.skin.php

마지막 파일입니다. 이건 글쓰기가 완료되는 시점에서 실행되는 파일 같네요.
그래서, 아까 IP로 wr_id값을 기록했는데, 여기에서 다시 본래 wr_id 값으로 지정해 줍니다.

if ($w == ''){ //새글이면;김철호071116
 $wr_id_code=abs(ip2long($_SERVER['REMOTE_ADDR'])); //IP값을 일단 기억;김철호071116
 if($wr_id_code >= 2147483647) //IP값이 크면;김철호071116
  $wr_id_code=substr($wr_id_code,-9); //아홉자리로 자름;김철호071116

 $sql = " update $g4[board_file_table] set wr_id = '$wr_id' where bo_table = '$bo_table' and wr_id = '$wr_id_code'";
 sql_query($sql); //IP값을 이용해 임시 저장해 놓은 파일을 원래 wr_id값으로 업데이트 시킨다.
}

이것도 제가 써 본건데요. 쿼리나 소스나 더 좋은 방법이 있으면 알려주세요.

끝났네요.^^
저는 UTF-8 환경입니다.
그런데, 저의 경우 photo_upload_after.php 이 파일을 UTF-8로 저장했더니 제대로 동작하지 않더군요.
그래서 ANSI로 저장해서 쓰고 있습니다. 그러니까 작동은 잘 되더라고요.

첫번째 링크에서 테스트 해보실 수 있을 거예요.
두번째 링크는 지금 운영하고 있는 홈페이지입니다.
이 방식을 쓰고 있어요.

나중에 기본 스킨도 한번 올려보겠습니다. ^-^

11월 20일 A/S 내역
- 지에디터 설치 부분 약간 수정되었습니다.(본문에 찾아보시면 있습니다.)
- 에디터 삽입 기능 발동시키기(본문에 찾아보시면 있습니다.)
- prototype.js 파일 유무에 따른 목록 표시(본문에 찾아보시면 있습니다.)
추천
8

댓글 13개

추천 감사하게 받겠습니다. ^-^

아, 그리고 투사님.
업로드 후에 파일 목록부분에 파일명이 누락될 수가 있는데, 일단, 글쓰기를 완료하신후(글을 쓰지 않으셨다면 새로고침)에 다시 수정모드로 들어가면 제대로 표시될것 같습니다.
왜 이런 현상이 발생하는진 모르겠는데, 곱슬최씨님께서 올려주셨던 스킨에서도 파일목록이 누락되는 경우가 발생하더라고요.

그리고, 본문에도 수정해놓았는데요. /js 디렉토리에 prototype.js 파일이 있어야 합니다. 파일이 없으면, 파일은 올라가는데 목록 표시가 안되더라고요.
4.21.00 이전 버전을 사용하고 계시다면, 최신 버전 그누에서 그 파일만 받으시고 /js 디렉토리에 넣어주시면 될것 같습니다.

오늘 그누 다시 깔고 본문대로 하나하나 적용시켜 보았는데, 잘 작동하였습니다. ^^
찾던 내용이었던 적용해 봐야겠네요...
그런대 지에디터의 geditor.js 파일이 저랑 틀리네요 -ㅁ-;
지업로더가 그래서 정상적으로작동을 하지 않네요 ㅠㅠ
지업로드로 올린 이미지 클릭시 팝업으로 원본이미지의 크기로 보이지 않고 글쓰기시 줄여놓은 이미지의 사이즈로 팝업이 뜹니다.
전체 3,313 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT