본문 바로가기
study/TIP

SmartEditor with upload

by 휘루걸음 2011. 12. 9.
728x90
반응형
728x90

출처 : http://blog.love-02.com
add /153-155

-- 그냥 눈으로 보면서 참고하려 했으나, 왠일인지 접속이 안돼서 캐시페이지를 복사해서 붙였다. --;

 관련 글을 확인 하실분은 아래 링크를 활용하세요.


네이버 스마트에디터에 업로드 기능 추가(PHP용)[1]
네이버 스마트에디터에 업로드 기능 추가(PHP용)[2]
네이버 스마트에디터에 업로드 기능 추가(PHP용)[3]

웹사이트 구축할 일이 있어서 좋은 이지윅 에디터를 찾던도중 네이버 스마트에디터를 알게되었습니다.
여러가지 에디터들을 살펴보면 솔직히 개발자 마음에 딱 맞게 만들어놓은것이 별로 없습니다.

특히 업로드 기능이 문제인데요... 대부분의 OpenAPI들이 Ajax 및 JSON을 기반으로 하기 때문에 서버와 연결할 필요가 있는 파일업로드 기능은 포함시키기 어렵습니다.

네이버 스마트에디터 역시 마찬가지인데요... 업로드 기능을 찾기 위해서 신나게 서핑을 해봤지만 파일 저장 기능만 가능하고 삭제 기능은 없어서 쓰레기 파일들이 마구 생성된다는 문제점이 있었습니다.

그래서 구현하기로 마음먹고 3시간 정도 삽질을 했습니다.

솔직히 실력도 자랑할 수준도 아니고, 공개해봐야 불평만 하는 인간들 때문에 공개 않할려고 하다가, 생각외로 많은 분들이 업로드 기능을 요구하고 있기 때문에 공개합니다.

허접한 실력이라도 욕하지 마시고, 좋은 제안 부탁드립니다. iframe을 적극 활용하기 때문에 Internet Explorer 8.0 에서만 가능하고, 다른 브라우져는 기능을 직접 수정하시기 바랍니다.

이제 설명 시작합니다.

일반적인 게시판의 경우 DB 구조가 글에 해당하는 레코드에 몇개의 파일 첨부 필드를 두어 파일 첨부가 한정적이고, 스마트 에디터 처럼 이지윅 에디터를 사용하는 경우 그림 첨부에 불편함을 야기할 수 있습니다.

제가 구성한 구조는 파일에 대한 테이블을 따로두고 각각의 파일의 레코드가 글에 해당하는 레코드로 연결됩니다.

글과 파일과 연결되기 위해 uuid를 생성하고, 글 및 파일 레코드에 포함됩니다.

파일의 레코드는 다음과 같습니다. db에 다음과 같은 테이블을 생성합니다.

1
2
3
4
5
6
CREATE TABLE IF NOT EXISTS `t_file` (
  `f_no` int(8) NOT NULL auto_increment,
  `f_articleid` char(15) NOT NULL,
  `f_name` varchar(40) NOT NULL,
  PRIMARY KEY  (`f_no`)
);


f_articleid 필드가 글과 연결되는 필드입니다. 다음은 글쓰는 페이지입니다. 
주요 부분만 표시하니 양해 바랍니다. 글과 파일을 연결시켜주는 ID의 중복을 방지하기 위해서 uuid를 생성합니다. $articleid에 저장됩니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<form name="frmAdd" action="sample.php" method="post">
  <?$articleid = uniqid();?
  <table width="600" align="center"><tr><td colspan="2" style="text-align:right"> powered by NAVER SmartEditor Basic<br/></td></tr></table><p></p>
<p> <textarea name="ir1" id="ir1" style="width:600px; height:200px;"></textarea>
 <table width="600" align="center">
   <tr>
     <td width="500">
       <select name="cmbUpload" size="5" style="width:100%;">
       <?
       $sql="select * from t_file where f_articleid='$articleid' order by f_name asc";
       $result = mysql_query($sql);
       while($fdata = mysql_fetch_array($result))
       {
         echo("<option value='".$fdata[f_no]."'>".$fdata[f_name]."</option>");
       }?>
       </select>
      </td>
      <td width="*">
        <input type="button" style="width:100%;" value="새 파일 업로드" onclick="showUpload();"><br/>
        <input type="button" style="width:100%;" value="그림으로 삽입" onclick="addImage();"><br/>
        <input type="button" style="width:100%;" value="링크로 삽입" onclick="addLink();"><br/>
        <input type="button" style="width:100%;" value="삭제" onclick="delItem();"><br/>
      </td>
    </tr>
  </table>
</form></p>
<p><div id="divUpload" style="position:absolute;visibility:hidden;top:0px;left:0px;">
  <table width="400" style="border:solid 1px #000000;">
    <tr class="menubar1" style="height:25px;color:#ffffff">
      <td width="370">새 파일 업로드</td>
      <td width="30"><button class="item2" onclick="divUpload.style.visibility='hidden';">×</button></td>
    </tr>
  <form name="frmUpload" action="file_upload.php?articleid=<?=$articleid?>" target="sub_frame" method="post"  enctype="multipart/form-data">
    <tr>
      <td width="400" height="100"colspan="2">
      <input type="file" name="txtFile" style="width:90%;"><br/><br/>
      <input type="submit" class="button50" value="업로드">
      <input type="button" class="button50" value="취소" onclick="divUpload.style.visibility='hidden';">
      </td>
  </table>
    </tr>
  </form>
</div>
<iframe name="sub_frame" style="display:none;"></iframe>
<script>
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
 oAppRef: oEditors,
 elPlaceHolder: "ir1",
 sSkinURI: "SEditorDemoSkin.html",
 fCreator: "createSEditorInIFrame",
 bUseBlocker: true
});
function addImage()
{
  var cmb = frmAdd.cmbUpload;
  var si = cmb.selectedIndex; 
  if(si == -1)
  {
    alert("파일이 선택되지 않았습니다.");
    return false;
  }
  var t =cmb.options[si].text;</p>
<p> sHTML = "<img src=[파일이 저장된 웹경로]" + t + ">";
 oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);  </p>
<p>}</p>
<p>function addLink()
{
  var cmb = frmAdd.cmbUpload;
  var si = cmb.selectedIndex; 
  if(si == -1)
  {
    alert("파일이 선택되지 않았습니다.");
    return false;
  }
  var t =cmb.options[si].text;</p>
<p> sHTML = "<a href=[파일이 저장된 웹경로]" + t + ">" + t + "</a>";
 oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);  </p>
<p>}</p>
<p>function delItem()
{
  var cmb = frmAdd.cmbUpload;
  var si = cmb.selectedIndex; 
  if(si == -1)
  {
    alert("파일이 선택되지 않았습니다.");
    return false;
  }
  if(!confirm("정말 삭제하시겠습니까?"))
    return false;
  </p>
<p>  var t =cmb.options[si].text;
  var v = cmb.options[si].value;
   
  sub_frame.navigate("file_del.php?no=" + v);
  cmb.remove(si);
   
  alert("삭제되었습니다.");</p>
<p>}</p>
<p>function showUpload()
{
  var de = document.documentElement;
  divUpload.style.visibility = "visible";
  divUpload.style.top = de.scrollTop + 200;
  divUpload.style.left =((document.body.clientWidth - 400) / 2.0);
}
</script>
</p>


------------------------------------------------------------------------

이전 글을 확인 하실분은 아래 링크를 활용하세요.

네이버 스마트에디터에 업로드 기능 추가(PHP용)[1]
네이버 스마트에디터에 업로드 기능 추가(PHP용)[2]
네이버 스마트에디터에 업로드 기능 추가(PHP용)[3]

앞서 서술한 소스를 잠깐 설명하자면.

스마트에디터를 표시하고 밑에 리스트박스와 버튼들을 만듭니다. 그리고 자바스크립 소스를 잘 살펴 보시면 리스트 박스에서 선택된 파일을 이미지 또는 하이퍼링크 형식으로 스마트에디터에 추가하는겁니다. 그리고 아이프레임을 통해서 파일을 업로드하고, 삭제 기능도 하게 됩니다.

이 글을 보시는 분들은 대부분 게시판 정도는 쉽게 만드실 분들이니 글쓰기에 관한건 이야기 하지 않겠습니다.
중요한것은 생성된 uuid를 이용하여 글과 파일이 연결된다는 겁니다.

다음은 업로드 소스입니다.
file_upload.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?
  $save_dir = "[파일이 업로드될 유닉스 절대경로]";
   
 $file_temp = $_FILES['txtFile']['tmp_name'];
 $file_name = $_FILES['txtFile']['name'];
 $file_size = $_FILES['txtFile']['size'];
        
 $current_file=$file_name;
 $file_name=substr($current_file,0,strrpos($current_file,"."));
 $file_ex=strrchr($current_file,".");<p></p>
<p> //확장자 검사
 if(!strcmp($file_ex,".html") ||
    !strcmp($file_ex,".htm") ||
    !strcmp($file_ex,".php") ||
    !strcmp($file_ex,".phtml") ||
    !strcmp($file_ex,".inc") ||
    !strcmp($file_ex,".txt") ||
    !strcmp($file_ex,".asp")) show_error_java("허용된 파일이 아닙니다.");
    
 //중복파일 검사 - 중복된 파일이 있을경우 인덱스를 붙인다.
 $fn_t=$file_name;
 $fileindex=0;
    
 while(file_exists($save_dir . "/" . $fn_t . $file_ex))
 {
  $fn_t=$file_name . "(" . $fileindex . ")";
  $fileindex++;
 };
    
 $realfile = $fn_t. $file_ex; //실제파일명
  $dest = $save_dir."/".$realfile;
  $srcf = $file_temp;
 if(!move_uploaded_file($srcf,$dest)) show_error_java("업로드 실패");
  
 $sql="insert into t_file(f_articleid, f_name) values('$articleid', '$realfile')";
  mysql_query($sql);
?></p>
<p><script language="javascript">
  var item = document.createElement("option");
  item.text="<?=$realfile?>";
  item.value="<?=$realfile?>";
  parent.frmAdd.cmbUpload.add(item);
  parent.divUpload.style.visibility="hidden";
  alert("새로운 파일이 저장되었습니다.");
</script>
</p>


이 소스를 설명하자면 앞글에 있는 소스에서 파일 업로드가 되면 파일을 [절대경로]에 업로드하고, DB에 파일에 대한 정보를 저장합니다. 그리고 파일리스트박스에 파일을 추가합니다. 다시한번 말하지만 iframe을 사용합니다. 소스 잘 따라가세요. 그냥 붙여 넣기 하면 잘 안될겁니다.

그리고 삭제하는 부분 소스입니다.
file_del.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?
  include "../lib.php";
   
  $db=dbconn();<p></p>
<p>  $save_dir = $appitem_path."data/";
   
  $sql="select f_name from t_file where f_no=$no";
  $filename = mysql_result(mysql_query($sql), 0, 0);
  @unlink($save_dir.$filename);
   
  $sql="delete from t_file where f_no=$no";
  mysql_query($sql);
?>
</p>

 

여기가 끝입니다.

앞선 네이버 스마트에디터에 업로드 기능 추가(PHP용)[1] 글과 이 글을 합쳐봐야 파일 3개 입니다. 즉 파일 세개만 잘 분석해서 웹사이트에 적용한다면 스마트에디터에 업로드 기능을 추가할 수 있을겁니다.

다음글은 실행 모습을 보여드리겠습니다.



----------------------------------------------------

이전 글을 확인 하실분은 아래 링크를 활용하세요.

네이버 스마트에디터에 업로드 기능 추가(PHP용)[1]
네이버 스마트에디터에 업로드 기능 추가(PHP용)[2]
네이버 스마트에디터에 업로드 기능 추가(PHP용)[3]

이번 글을 테스트용으로 만든 게시판을 보입니다.
첫 페이지 모습입니다.
사용자 삽입 이미지

업로드 모습입니다.
사용자 삽입 이미지
사용자 삽입 이미지

그림으로 삽입, 링크로 삽입 했을 때의 모습입니다.

사용자 삽입 이미지


이 기능에서 주의해야 할 것은 UUID가 생성된 후 파일을 업로드 하고 "새로고침" 해버리면 쓰레기 파일이 남을 수 있다는 점입니다.
이문제는 조금만 신경쓰면 해결할 수 있습니다.

그럼 모두 멋있는 웹사이트 만드시길 바랍니다. 
728x90
반응형
저작자표시 비영리

'study > TIP' 카테고리의 다른 글

php 문자열 함수  (0) 2012.02.27
fat32 usb convert to ntfs  (0) 2011.12.25
프로젝트 산출 목록  (0) 2011.12.02
request path  (0) 2011.07.29
정규식  (0) 2010.12.10

관련글

티스토리툴바