SWFUpload + CKEditor4 or SmartEditor2 멀티 업로드 그리고 파일 에디터 연동 : 스마트에디터 , 위지윅에디터
"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 에서 받으실 수 있습니다.
syaku,ckeditor.upload.html ----> CKEditor4 에디터 화면
syaku,smarteditor.upload.html ----> SmartEditor2 에디터 화면
브라우져에서 실행시키면 됩니다.
syaku.file.js 열어 알맞게 수정합니다.
upload_url: "syaku.upload.php", // 파일 업로드
delete_url : "syaku.delete.php" , // 파일 삭제
* 파일업로드 경로 작업
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 화면
'개발노트 > jQuery' 카테고리의 다른 글
jQuery 페이지 네비게이션 : jQuery PageNavigator (1) | 2014.04.03 |
---|---|
jQuery rolling slider : 자동 슬라드 롤링 블릿 플러그인 (14) | 2014.02.21 |
jQuery Action (ajax 전송 컨트롤러, 유효성검사, 데이타 변경, 인터셉터 이벤트) (2) | 2013.05.25 |
소셜네트워크 글 내보내기 : SNS (0) | 2013.04.24 |