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

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

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

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

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

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

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

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

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

이제 설명 시작합니다.

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

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

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

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

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에 저장됩니다.

<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>

 <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>

<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;

 sHTML = "<img src=[파일이 저장된 웹경로]" + t + ">";
 oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]); 

}

function addLink()
{
  var cmb = frmAdd.cmbUpload;
  var si = cmb.selectedIndex;  
  if(si == -1)
  {
    alert("파일이 선택되지 않았습니다.");
    return false;
  }
  var t =cmb.options[si].text;

 sHTML = "<a href=[파일이 저장된 웹경로]" + t + ">" + t + "</a>";
 oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]); 

}

function delItem()
{
  var cmb = frmAdd.cmbUpload;
  var si = cmb.selectedIndex;  
  if(si == -1)
  {
    alert("파일이 선택되지 않았습니다.");
    return false;
  }
  if(!confirm("정말 삭제하시겠습니까?"))
    return false;
 

  var t =cmb.options[si].text;
  var v = cmb.options[si].value;
  
  sub_frame.navigate("file_del.php?no=" + v);
  cmb.remove(si);
  
  alert("삭제되었습니다.");

}

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>

 

글이 너무 길어지는군요. 다음 글에서 계속 쓰겠습니다.

“네이버 스마트에디터에 업로드 기능 추가(PHP용)[1]”의 2개의 댓글

    1. jQuery를 사용함으로 해서 달라지는게 뭐죠? 사람들이 좋다고 하니 다들 좋은지 아시는데, 이 기능 하나 때문에 jQuery를 쓰는건 참 어이없죠??

답글 남기기