자료실

바로 업로드 애드온

2022.03.14 10:41
1,653
12
자료 유형 애드온
간단한 소개 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

윤삼 Lv. 19
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.

댓글 113

  • 2023.08.11 06:22 #1779941

    혹시

    이미지 화질

    75% (표준)
    다른 설정에 의해 이미지가 변환될 경우 화질을 조정합니다.
    75% (표준) 이상으로 설정시 오히려 원본보다 용량이 늘어날 수 있습니다.

    이 설정도 POST 방식으로 업로드시 적용이 안되는게 맞을까요?

     

    우선은 제가 

    무조건 재인코딩

     예  아니오

    위에서 설정한 조건에 해당되지 않더라도 무조건 일정한 화질로 재인코딩하여 용량과 트래픽을 절약합니다.

     

     

    이거 예를 안해놓긴했지만요 ㅎㅎ

  • 2023.08.11 11:26 #1780044
    저, 새로운 미션을 만난 건가요 ㄷㄷ
  • 2023.08.11 11:24 #1780041
    이걸 어떻게 해석해야 하나 하고 난감해 하고 있었는데 잘 된다니 당장의 걱정은 덜었네요.
    확인 감사합니다~
  • 2023.08.17 06:02 #1780862
    좋은 애드온 감사합니다. 강추입니다
  • 2023.11.08 00:26 #1793980

    안녕하세요. 윤삼님

    https://xetown.com/questions/1793391
    에디터 업데이트 이후 해당 애드온보다 에디터가 먼저 작동하는것 같습니다.

  • 2023.11.08 10:56 #1794099
    용량 초과 문제가 아니었어요?
  • 2023.11.08 13:07 #1794162
    넵 용량문제가아니고 이미지첨부가 텍스트화돼어서 먼저첨부되는 증상입니다!
  • 2023.11.08 20:01 #1794245

    버전업하면서 생긴 ck에디터 자체 버그인 듯도 합니다.


    드래그 앤 드롭하는 이미지 파일이 복수일 때는 파일로 첨부가 되는데, 파일 한 개만 드롭하는 경우는 이걸 파일로 인식하지 않고 바이너리 문자열로 인식하더라구요. (클립보드 내용을 기준으로 판별하거든요)

    _ckeditor.js 파일에
    if ( data.getTypes().indexOf('Files') < 0 ) {
    return;
    }
    라는 부분이 있는데요.

    여기서 data.getTypes()이라는 메소드를 통해 'Files'라는 문자열 원소가 들어간 배열을 반환받아야 하는데,
    이미지 파일 한 개만 드롭하면 빈 배열을 반환받더라구요.
    예전에는 이게 됐던 것 같거든요. 안 됐나.... 암튼 확인해보니 버전업된 에디터에서 안 되는 건 확실하네요ㅜㅜ

  • 2023.11.08 20:38 #1794251

    일단 땜빵으로 위에서 언급한 부분을

    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 같은 식으로 이름이 고정될 겁니다.

  • 2023.11.09 01:13 #1794279
    바쁜 와중에 감사합니다.
    결국 CK 에디터의 문제이긴하네요
    image.png 이거는 클립보드 이미지 붙여넣었을때와 동일하네요.
    이 정도만 되어도 훌륭하죠 감사합니다.
  • 2024.02.22 10:28 #1810983

    안녕하세요 윤삼님.

    해당 애드온이 CK에디어 업데이트 후에 정상 작동이 잘 안되고 있습니다.

     

    2가지 문제가 있습니다.

     

    1. Drag&drop으로 gif파일을 본문에 넣을때


    처음에는 톰갯님의 경우처럼 1개의 파일을 올릴 땐 동작을 안해서 윤삼님이 남겨주신 소스로 작업을 해보니 이미지 파일은 잘 작동하도록 수정하였습니다.

    다만 예전에도 문의를 드렸던 1개의 움직이는 GIF을 올리면 GIF가 MP4로 변경되는데(라이믹스 옵션) 소스 상에선 <VIDEO>태그가 아닌 <IMG>가 남는 상황이라 재생이 안되고 꺠지는 현상이 있습니다.

     

    2024-02-22 19 28 38.jpg

     

     

    우선은 아니오로 설정값은 변경해서 쓰고 있지만 라이믹스 코어의 기능을 못 쓰는게 아쉬워서 문의 댓글 남겨봅니다.

     

    GIF파일이 용량도 너무 커서 MP4로 파일 사이즈를 줄일 수 있는 기능을 포기하자니 사이트 운영측면에서 힘들고 바로업로드 애드온도 정말 너무 좋아서 포기가 어렵네요.

     

     

    2. Copy&Paste로 이미지 1개를 댓글 에디터에 넣을 때

     

    본문에서는 알려주신 수정방법을 통해 이미지가 잘 붙지만 댓글 에디터에서는 여전히 1개는 동작을 안 하고 있습니다. 댓글 에디터까지 잘 되려면 어디를 추가로 수정을 해야할까요?

     

    좋은 애드온을 만들어 주셨는데 코어 업데이트 후로 동작이 잘 안되고 있어서 문의를 드립니다. 시간이 되실 때 한번 검토를 부탁 드려요.

     

  • 2024.02.22 23:18 #1811113
    블리스세븐님 안녕하세요~
    - MP4로 변환해주는 해당 관리자 설정 변수를 갖고 와서
    - 값이 '예'인 경우
    - 업로드할 파일 객체를 변환된 MP4로 잡아줘야 할 것 같습니다.
    그러면 태그를 video로 뿌려주는 게 되긴 할 텐데요.

    라이믹스 코어의 옵션이기도 하고 해서 애드온에서도 지원을 해줘야 하는 맞긴 한데요.
    문제는 애드온에서 mp4 변환을 기다렸다가 변환된 파일을 객체로 받아들이는 게 가능할지 모르겠어요.
    이 애드온을 코어에서 수용해준다는 이야기가 있었는데 그렇게 되면 문제해결이 좀 더 쉬워질 것 같기도 합니다.
    애드온 자체 개선은 당장에는 시간도 없고, 시간이 나더라도 기존 코드가 발코딩이다보니 유지 보수가 엄두가 나지 않네요ㅜ
  • 2024.02.23 06:30 #1811183
    빠른 답변 감사드립니다. 말씀 하신거 처럼 코어팀이 이 기능을 코어에 넣어준다면 정말 좋을 듯 합니다.

    1번 질문에 경우 우선은 gif로 유지하는 방법으로 해결을 하고 있습니다.(다만 gif용량이 너무 커서 그건 좀 아쉽습니다 ㅠ_ㅠ)

    그리고 추가로 질문을 수정했는데 'Copy&Paste로 이미지 1개를 댓글 에디터에 넣을 때' 문제가 발생하는 건은 어떻게 해결방법이 없을까요?