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 |
SWFUpload + CKEditor4 or SmartEditor2 멀티 업로드 그리고 파일 에디터 연동 : 스마트에디터 , 위지윅에디터 (10) | 2013.06.20 |
jQuery Action (ajax 전송 컨트롤러, 유효성검사, 데이타 변경, 인터셉터 이벤트) (2) | 2013.05.25 |
소셜네트워크 글 내보내기 : SNS (0) | 2013.04.24 |
스마트에디터2 최신버전으로 한번 사용해봤는데요.
첨부파일에서 선택을 하고 100%는 되는데, 썸네일이 보이지 않고
삽입 버튼도 작동이 안됩니다 ㅠ.ㅠ
뭐 따른 설정이 필요한가요??
파일 업로드되서 xml로 리턴해주는 노드에서 folder 노드의 값을 파일 첨부 상대경로를 입력해주셔야합니다
비밀댓글입니다
syaku.upload.php 소스를 확인하시면됩니다.
첨부파일정보는 기본적으로 file_upload 이름을 가지고있습니다.
$_FILES["file_upload"] 하면 PHP 에서 파일정보를 읽습니다.
[참고] file_post_name : 'file_upload',
syaku.file.js 파일에서
if ( chk.indexOf(".") > -1) {
ret_size = size.toFixed(2);
}
아래와 같이 바꿔야 될것 같습니다.
if ( chk.indexOf(".") > -1) {
ret_size = size.toFixed(2);
}else{
ret_size = chk;
}
수정페이지 onload시 jQuery.syakuFileUpload.size_sum(swfu); 호출하여 첨부파일 총크기 계산될때 0으로 나오는 버그입니다.
확인 부탁드립니다.
^^ 감사합니다~
안녕하세요 이거 이미지 업로더 사용해 보려고 테스중인데요~ 파일 얿로드해서 미리보기까지
되는데요 (첨에 경로 때문에 좀 해메다가) 선택 삭제시 실제 파일은 삭제가 안되는데 직접 만들어야
하는건지요~ 처리 방법을 알고 싶습니다.
그리고 에디터에 삽입되는것도 안되는데 어떻게 하는지 알고 싶습니다.~~
예제는 php를 이용하여 구현한것이고 삭제는 직접 구현하셔야 합니다. 그리고 php 언어만 사용할 수 있는 스크립트가 아닌 공통 스크립트 입니다.
안녕하세요 질문 한가지 더 드리겠습니다. 게시판에 붙여서 이미지 업로드 후 게시물에 이미지가 반영 되도록 처리 하였습니다.
문제는 게시물 수정 시에 업로드 했던 이미지들이 업로드 박스에 로디 되야 하는데 그부분은 업로드할 때 쓰는 경로 만 맞으면 되는건지요
일단 아직 첨부는 DB처리는 하지 않은 상태입니다.
서버에 저장된 경로가 맞으면 됩니다.
기존에 무엇이 저장되었는 지 기록이 있어야하는 데 디비에 저장하지 않고는 노출할 수 없겠죠.
디비에 저장하시고 해당 데이터를 셀렉트박스 안에 포문으로 <!--
<option value="{
file_orl : '파일 번호' ,
file : '파일명' ,
re_file : '변경된 파일 명' ,
folder : '폴더경로' ,
file_size : '파일사이즈' ,
extension : '파일 확장자명' ,
type : '파일 형식'
}">파일명 (파일용량)</option>
--> 이런 형태로 넣어주시면 됩니다.