바로 업로드 애드온
자료 유형 | 애드온 |
---|---|
간단한 소개 | CKEditor에 외부의 멀티미디어 파일을 '드롭' 또는 '붙여넣기'하면 첨부 파일로 '바로 업로드' 시켜주는 애드온 |
설치 경로 | ./addons/baro_upload |
코어 지원 범위 | Rhymix 2.0 |
PHP 지원 범위 | 기타 |
자료 구분 | 공개 자료 |
라이선스 | GPL v2 |
기타 정보 |
이미지 복사/붙여넣기의 경우 외부php 파일에서 기진곰님의 이미지 자동 첨부 애드온의 소스를 응용하였습니다. https://github.com/poesis/xe-autoattach |
파일명 | 버전 | 날짜 | 용량 | 다운 |
---|---|---|---|---|
baro_upload.0.0.3.zip | 0.0.3 | 2022.03.20 | 7.6KB | 238 |
baro_upload.0.0.2.zip | 0.0.2 | 2022.03.14 | 7.3KB | 91 |
baro_upload.0.0.1.zip | 0.0.1 | 2022.03.14 | 7.1KB | 56 |
CKEditor에 외부의 멀티미디어 파일을 '드롭' 또는 '붙여넣기'하면 첨부 파일로 '바로 업로드' 시켜주는 애드온입니다.
그렇다고 모든 파일이 다 바로 업로드되는 건 아닙니다;;;
파일 드롭과 복사/붙여넣기, 두 경우에 따라 기능이 살짝 다릅니다.
매우 제한적인 환경(윈도우11, 크롬)에서 개발 및 테스트되었기 때문에 오류 가능성이 있을 수 있습니다. 폭넓은 양해와 적극적인 제보 부탁드립니다~
0.0.3 업데이트 (2022.03.20)
- 여러 개의 이미지를 복사/붙여넣기하면 개별 파일이 업로드 완료될 때를 기준으로 업로드 프로그레스 바 업데이트
- 코드 정리
0.0.2 업데이트 (2022.03.14)
- 클립보드 이미지 붙여넣기 동작 추가
1. 파일 드롭
- [기본] 에디터 바깥의 웹브라우저 또는 파일브라우저의 이미지 파일 요소를 드래그해서 에디터 안에 드롭을 하면 작동합니다.
- [선택] 파일브라우저의 비디오 파일도 드롭할 때 바로 첨부합니다. (mp4, webm, ogv)
- [선택] 파일브라우저의 오디오 파일도 드롭할 때 바로 첨부합니다. (mp3, wav, ogg, flac, aac)
- [선택] 파일브라우저의 기타 일반 파일들도 드롭할 때 바로 첨부합니다.
2. 붙여넣기
- [기본] 웹상에서 이미지가 포함된 html요소를 복사해서 붙여넣으면 포함된 이미지가 첨부 파일로 바로 업로드됩니다.
- [선택] 움짤 gif 파일의 경우 첨부를 하지 않을 수 있습니다.
- [선택] 이미지 url만 복붙을 하더라도 바로 첨부합니다. (단, 복사된 url주소에 파일 확장자가 명시되어 있어야 합니다)
미리보기
- 체험은 여기 : https://dev.aporia.blog/board_fKje45

댓글 113
혹시
이미지 화질
75% (표준)
다른 설정에 의해 이미지가 변환될 경우 화질을 조정합니다.
75% (표준) 이상으로 설정시 오히려 원본보다 용량이 늘어날 수 있습니다.
이 설정도 POST 방식으로 업로드시 적용이 안되는게 맞을까요?
우선은 제가
무조건 재인코딩
예 아니오
위에서 설정한 조건에 해당되지 않더라도 무조건 일정한 화질로 재인코딩하여 용량과 트래픽을 절약합니다.
이거 예를 안해놓긴했지만요 ㅎㅎ
확인 감사합니다~
안녕하세요. 윤삼님
https://xetown.com/questions/1793391
에디터 업데이트 이후 해당 애드온보다 에디터가 먼저 작동하는것 같습니다.
버전업하면서 생긴 ck에디터 자체 버그인 듯도 합니다.
드래그 앤 드롭하는 이미지 파일이 복수일 때는 파일로 첨부가 되는데, 파일 한 개만 드롭하는 경우는 이걸 파일로 인식하지 않고 바이너리 문자열로 인식하더라구요. (클립보드 내용을 기준으로 판별하거든요)
_ckeditor.js 파일에
if ( data.getTypes().indexOf('Files') < 0 ) {
return;
}
라는 부분이 있는데요.
여기서 data.getTypes()이라는 메소드를 통해 'Files'라는 문자열 원소가 들어간 배열을 반환받아야 하는데,
이미지 파일 한 개만 드롭하면 빈 배열을 반환받더라구요.
예전에는 이게 됐던 것 같거든요. 안 됐나.... 암튼 확인해보니 버전업된 에디터에서 안 되는 건 확실하네요ㅜㅜ
일단 땜빵으로 위에서 언급한 부분을
if ( data.getTypes().indexOf('Files') < 0 ) {
var img_regex = /^<img[^>]+src=[\"']?([^>\"']+)[\"']?[^>]*>?/;
var img_result = img_regex.exec(event.data.dataValue);
if ( img_result.length ) {
event.stop();
var dropped_file = getFileObjByDataURL(img_result[1]);
var notification = event.editor.showNotification('파일 업로드 중...', 'progress', 0);
form_data.append('Filedata', dropped_file);
procFileUpload(form_data, dropped_file.type, notification, event);
}
return;
}
이라고 수정하면 파일 첨부가 되기는 하는데, 원래 파일명을 확인할 길이 없어서;;; image.png나 image.jpg 같은 식으로 이름이 고정될 겁니다.
결국 CK 에디터의 문제이긴하네요
image.png 이거는 클립보드 이미지 붙여넣었을때와 동일하네요.
이 정도만 되어도 훌륭하죠 감사합니다.
안녕하세요 윤삼님.
해당 애드온이 CK에디어 업데이트 후에 정상 작동이 잘 안되고 있습니다.
2가지 문제가 있습니다.
1. Drag&drop으로 gif파일을 본문에 넣을때
처음에는 톰갯님의 경우처럼 1개의 파일을 올릴 땐 동작을 안해서 윤삼님이 남겨주신 소스로 작업을 해보니 이미지 파일은 잘 작동하도록 수정하였습니다.
다만 예전에도 문의를 드렸던 1개의 움직이는 GIF을 올리면 GIF가 MP4로 변경되는데(라이믹스 옵션) 소스 상에선 <VIDEO>태그가 아닌 <IMG>가 남는 상황이라 재생이 안되고 꺠지는 현상이 있습니다.
우선은 아니오로 설정값은 변경해서 쓰고 있지만 라이믹스 코어의 기능을 못 쓰는게 아쉬워서 문의 댓글 남겨봅니다.
GIF파일이 용량도 너무 커서 MP4로 파일 사이즈를 줄일 수 있는 기능을 포기하자니 사이트 운영측면에서 힘들고 바로업로드 애드온도 정말 너무 좋아서 포기가 어렵네요.
2. Copy&Paste로 이미지 1개를 댓글 에디터에 넣을 때
본문에서는 알려주신 수정방법을 통해 이미지가 잘 붙지만 댓글 에디터에서는 여전히 1개는 동작을 안 하고 있습니다. 댓글 에디터까지 잘 되려면 어디를 추가로 수정을 해야할까요?
좋은 애드온을 만들어 주셨는데 코어 업데이트 후로 동작이 잘 안되고 있어서 문의를 드립니다. 시간이 되실 때 한번 검토를 부탁 드려요.
- MP4로 변환해주는 해당 관리자 설정 변수를 갖고 와서
- 값이 '예'인 경우
- 업로드할 파일 객체를 변환된 MP4로 잡아줘야 할 것 같습니다.
그러면 태그를 video로 뿌려주는 게 되긴 할 텐데요.
라이믹스 코어의 옵션이기도 하고 해서 애드온에서도 지원을 해줘야 하는 맞긴 한데요.
문제는 애드온에서 mp4 변환을 기다렸다가 변환된 파일을 객체로 받아들이는 게 가능할지 모르겠어요.
이 애드온을 코어에서 수용해준다는 이야기가 있었는데 그렇게 되면 문제해결이 좀 더 쉬워질 것 같기도 합니다.
애드온 자체 개선은 당장에는 시간도 없고, 시간이 나더라도 기존 코드가 발코딩이다보니 유지 보수가 엄두가 나지 않네요ㅜ
1번 질문에 경우 우선은 gif로 유지하는 방법으로 해결을 하고 있습니다.(다만 gif용량이 너무 커서 그건 좀 아쉽습니다 ㅠ_ㅠ)
그리고 추가로 질문을 수정했는데 'Copy&Paste로 이미지 1개를 댓글 에디터에 넣을 때' 문제가 발생하는 건은 어떻게 해결방법이 없을까요?