다음 스마트에디터 파일첨부 예제

사진 첨부하기 너무 어렵네요. 혹시 튜토리얼을 가지신 분이나 간단하게 설명해주실 분~?

Comment 1 by rockmkd, Sep 21, 2009 네 처음 보시는 분들은 생소하실 듯 하지만 전혀 어렵지 않습니다^^; 여기서는 파일 첨부를 예로 들겠습니다.(이미지첨부는 파일첨부와 95.23423% 비슷합니다.) [파일]버튼을 클릭하면 첨부를 위한 팝업창이 나타나고 이 팝업을 통해 에디터로의 파일첨 부가 이루어집니다. 팝업창은 소스트리에서 pages/popup/file.html에서 확인하실 수 있는 데요. 이 파일의 상단부분에 있는데 20줄가량이 javascript가 파일첨부의 핵심입니다. 일반적으로 웹상에서의 파일업로드는 php나 jsp같은 serverside만을 통해 이루어집니다. multipart-form에 file을 올린 후 서버쪽 모듈로 업로드 시키고 필요하다면 file메타정보들 을 남기는 식으로 말이죠. 다음에디터에서는 에디터와의 연동을 위해 이와 같이 serverside 모듈에 추가적인 javascript가 더 들어가게 됩니다. php 코드로 예를 들어보겠습니다. [일반적인 경우] =========== upload_form.html ============== <form method="post" enctype="multipart/form-data" action="uploader.php"> 제목 : <input type="text" name="subject"> <input type="file" name="upload_file"> <input type="submit"> </form> =========== uploader.php =================== <?php $subject = $_POST['subject']; $tmpfilename = $_FILES['upload_file']['tmp_name']; $filename = $_FILES['upload_file']['filename']; $filetype = $_FILES['upload_file']['type']; $filesize= $_FILES['upload_file']['size'] $destination = "/upload/" . $filename; $fileurl = "http://my.homepage.com/upload/" . $filename; move_uploaded_file ( $tmpfilename, $destination ); write_into_db_filemeta($filename, $desination, $filesize, $filetype, $fileurl); //업 로드한 이름과 파일의 사이즈나 mime/type들을 읽어서 DB에 저장하는 사용자 함수 ?> <script type="text/javascript"> alert('파일 업로드가 성공되었습니당~~'); </script> ================================================================= 위와같이 사용자에게 파일을 입력받을 폼 파일과 입력받은 파일을 서버에 저장하고 서버모 듈이 일반적인 경우입니다. 위의 예제에서는 약간의 수정을 가한것이 서버모듈이 실행된후 사용자에게 업로드가 완료되었음을 알려주는 alert창을 띄워보았습니다. 에디터와 연동되는 javascript는 저 부분에 들어가면 됩니다. alert창 대신 서버에 올라간 파일의 데이터를 에디터에 전달해주는 스크립트를 삽입하는것이지요. ============== uploader.php ========================= //여기까지는 위와같습니다. write_into_db_filemeta($filename, $desination, $filesize, $filetype, $fileurl); ?> <script type="text/javascript"> if (typeof(execAttach) == 'undefined') { //Virtual Function return; } var _mockdata = { 'attachurl': '<?=$fileurl?>', 'filemime': '<?=$filetype?>', 'filename': '<?=$filename?>', 'filesize': <?=$filesize?> }; execAttach(_mockdata); closeWindow(); </script> ===================================================== php에서 받은 파일의 정보를 javascript의 execAttach 함수에 넘겨주기만 하면 됩니다. 그전에 업로드 창에서는 에디터 객체를 알고 있어야 하기 때문에 다음과 같은 초기화 구문 이 필요합니다. =======================초기화 구문(uploader.php 포함됨) ========= var _opener = PopupUtil.getOpener(); var _attacher = getAttacher('file', _opener); registerAction(_attacher); ======================================================================= 요약하자면 file.html 을 위에서 만든 upload_form.html로 대체한 후 uploader.php 으로 업로드 모듈을 넣어주고 file.html 에서 쓰던 에디터 연동용 javascript코드를 uploader.php에서 실행시켜 주면 간단하게 업로드를 구현하실 수 있습니다.