> Hello World !!!

     

@syaku

SWFUpload + CKEditor4 or SmartEditor2 멀티 업로드 그리고 파일 에디터 연동 : 스마트에디터 , 위지윅에디터

728x90
반응형


written by Seok Kyun. Choi. 최석균

"SWFUpload + CKEditor4 or SmartEditor2"



Github: https://github.com/syakuis/jquery.syaku.file


본 프로그램의 기능은 아래와 같습니다.


SWFUpload 를 이용하여 멀티 파일업로드 UI 를 제공합니다.

첨부된 파일을 에디터에 삽입시킬 수 있게 UI 를 제공합니다.

대표 오픈소스 에디터 CKEditor4 와 네이버 스마트에디터2 를 이용하였습니다.

파일 업로드 데모는 php로 제작하였습니다. 하지만 어떤 언어에도 사용이 가능합니다.


압축 파일에는 에디터 소스는 포함되어 있지 않습니다. 직접 내려받아서 해당 위치에 복사하시면 됩니다.


오픈소스

jQuery : http://jquery.com

SWFUpload : http://swfupload.org

CKEditor4 : http://ckeditor.com/download

Naver SmartEditor2 : http://dev.naver.com/projects/smarteditor/download


CKEditor 4 이상 , SmartEditor 2 이상


- [2014.02.18] syaku.에디터명.upload.html 즉, 에디터 화면의 소스 중에 용량설정 부분 file_size_limit : 용량 * 1024 로 되어있는 부분이 잘못되었습니다. * 1024 를 제거해주세요. (swfupload 용량제한은 kb 단위로 입력하게 되어있습니다.)


- v1.0.2 첨부 파일수가 무제한(0) 인 경우 삭제후 다시 첨부할 수 없는 문제 해결

   최신 버전은 상단에 있는 Github 에서 받으실 수 있습니다.


jquery.syaku.file.v1.0.2.zip


jquery.syaku.file.v1.0.1.zip


jquery.syaku.file.v1.0.0.zip





syaku,ckeditor.upload.html ----> CKEditor4 에디터 화면

syaku,smarteditor.upload.html ----> SmartEditor2 에디터 화면


브라우져에서 실행시키면 됩니다.


syaku.file.js 열어 알맞게 수정합니다.


        upload_url: "syaku.upload.php", // 파일 업로드

        delete_url : "syaku.delete.php" , // 파일 삭제

        flash_url : "./SWFUpload/swfupload.swf", // SWFUpload swf 파일 위치


* 파일업로드 경로 작업


D:/http/files 폴더가 파일 첨부 폴더일 경우

syaku.file.js 파일을 열어 아래와 같이 경로를 수정합니다.

file_folder : '/files' 


또 파일 업로드 처리 페이지에서 폴더를 생성할 경우 리턴하는 xml 노드의 folder 에 경로를 리턴해야합니다.

aaa 폴더를 생성하고 해당 폴더에 업로드된 파일을 저장할 경우 아래와 같이 합니다.

<folder>/aaa</folder>



* 파일업로드 및 삭제 로직 실행 후 리턴할 xml 형식


> syaku.upload.php 파일 참조

error = false 에러 없음 : true 에러 있음


<data>
    <item>
    <error>false</error>
    <message></message>
    <file_orl>디비에 등록된 파일 고유 번호</file_orl>
    <filename>파일 실제명</filename>
    <re_file>파일 변경된 명</re_file>
    <folder>파일 업로드된 경로 폴더</folder>
    <file_size>파일 용량</file_size>
    <extension>파일 확장자명</extension>
    <type>파일형식</type>
  </item>
</data>


* CKEditor 4 화면





* 네이버 스마트에디터2 화면







posted syaku blog

Syaku Blog by Seok Kyun. Choi. 최석균.

http://syaku.tistory.com


728x90
반응형