질문/공유공개자료실 "애드온"
애드온

바로 업로드 애드온

윤삼
추천 수 12 댓글 113
Extra Form
자료 소개 CKEditor에 외부의 멀티미디어 파일을 '드롭' 또는 '붙여넣기'하면 첨부 파일로 '바로 업로드' 시켜주는 애드온
설치 경로 ./addons/baro_upload
테스트 환경 Rhymix 2.0
라이선스 GPL v2
원작 정보 이미지 복사/붙여넣기의 경우 외부php 파일에서 기진곰님의 이미지 자동 첨부 애드온의 소스를 응용하였습니다.
https://github.com/poesis/xe-autoattach
크게 작게 위로 아래로 댓글로 가기
이름 버전 날짜 다운수
baro_upload.0.0.3.zip 0.0.3 2022-03-20 208
baro_upload.0.0.2.zip 0.0.2 2022-03-14 88
baro_upload.0.0.1.zip 0.0.1 2022-03-14 54

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

제작자 윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
위로 아래로
댓글 113
  • profile

    안녕하세요 윤삼님.

    해당 애드온이 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개는 동작을 안 하고 있습니다. 댓글 에디터까지 잘 되려면 어디를 추가로 수정을 해야할까요?

     

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

     

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

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

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

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

    안녕하세요. 윤삼님

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

  • profile profile
    용량 초과 문제가 아니었어요?
  • profile profile
    넵 용량문제가아니고 이미지첨부가 텍스트화돼어서 먼저첨부되는 증상입니다!
  • profile profile

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


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

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

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

  • profile profile

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

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

  • profile profile
    바쁜 와중에 감사합니다.
    결국 CK 에디터의 문제이긴하네요
    image.png 이거는 클립보드 이미지 붙여넣었을때와 동일하네요.
    이 정도만 되어도 훌륭하죠 감사합니다.
  • profile
    좋은 애드온 감사합니다. 강추입니다
  • profile

    un.JPG

     

    혹시 용량큰 파일 첨부 클립보드의 이미지를 첨부하면 이렇게 되거나 반응이 없는데 원인을 알 수 있을까요

    서버 이전 후 생기는 문제점이고 똑같이 php7.4 이용중입니다.

     

    일반 첨부기능을 활용하면 잘 첨부가 됩니다.

  • profile profile
    개발자 도구 등을 통해 에러 메시지는 보셨을까요?
    더불어 서버단에서도 에러 로그 체크를 하면 좋겠구요.
  • profile profile

    답변감사드립니다.

    서버에서는 php 및 아파치에서 에러로그가 발생하지않고
    개발자도구에서는 이런에러가 발생합니다.

     

     

    Uncaught TypeError: Cannot read properties of null (reading 'download_url')

    undefined:1     GET https://www.사이트주소.com/게시판주소/undefined 403 (Forbidden)

     



    _ckeditor.js?20230811121803:212 Uncaught TypeError: Cannot read properties of null (reading 'download_url')
    at Object.success (_ckeditor.js?20230811121803:212:40)
    at fire (jquery-2.2.4.js?20230706134026:3187:31)
    at Object.fireWith [as resolveWith] (jquery-2.2.4.js?20230706134026:3317:7)
    at done (jquery-2.2.4.js?20230706134026:8757:14)
    at XMLHttpRequest.<anonymous> (jquery-2.2.4.js?20230706134026:9123:9)
    success @ _ckeditor.js?20230811121803:212
    fire @ jquery-2.2.4.js?20230706134026:3187
    fireWith @ jquery-2.2.4.js?20230706134026:3317
    done @ jquery-2.2.4.js?20230706134026:8757
    (anonymous) @ jquery-2.2.4.js?20230706134026:9123
    load (async)
    send @ jquery-2.2.4.js?20230706134026:9142
    ajax @ jquery-2.2.4.js?20230706134026:8656
    procFileUpload @ _ckeditor.js?20230811121803:180
    (anonymous) @ _ckeditor.js?20230811121803:89
    each @ jquery-2.2.4.js?20230706134026:365
    (anonymous) @ _ckeditor.js?20230811121803:85
    l @ ckeditor.js?20230706134036:10
    (anonymous) @ ckeditor.js?20230706134036:12
    CKEDITOR.editor.CKEDITOR.editor.fire @ ckeditor.js?20230706134036:13
    r @ ckeditor.js?20230706134036:723
    (anonymous) @ ckeditor.js?20230706134036:733
    setTimeout (async)
    k @ ckeditor.js?20230706134036:733
    (anonymous) @ ckeditor.js?20230706134036:724
    l @ ckeditor.js?20230706134036:10
    (anonymous) @ ckeditor.js?20230706134036:12
    (anonymous) @ ckeditor.js?20230706134036:74
    undefined:1 GET https://www.사이트명.com/게시판명/undefined 403 (Forbidden)
    Image (async)
    CKEDITOR.tools.extend.setHtml @ ckeditor.js?20230706134036:111
    CKEDITOR.dom.element.createFromHtml @ ckeditor.js?20230706134036:101
    success @ _ckeditor.js?20230811121803:233
    fire @ jquery-2.2.4.js?20230706134026:3187
    fireWith @ jquery-2.2.4.js?20230706134026:3317
    done @ jquery-2.2.4.js?20230706134026:8757
    (anonymous) @ jquery-2.2.4.js?20230706134026:9123
    load (async)
    send @ jquery-2.2.4.js?20230706134026:9142
    ajax @ jquery-2.2.4.js?20230706134026:8656
    procFileUpload @ _ckeditor.js?20230811121803:180
    (anonymous) @ _ckeditor.js?20230811121803:89
    each @ jquery-2.2.4.js?20230706134026:365
    (anonymous) @ _ckeditor.js?20230811121803:85
    l @ ckeditor.js?20230706134036:10
    (anonymous) @ ckeditor.js?20230706134036:12
    CKEDITOR.editor.CKEDITOR.editor.fire @ ckeditor.js?20230706134036:13
    r @ ckeditor.js?20230706134036:723
    (anonymous) @ ckeditor.js?20230706134036:733
    setTimeout (async)
    k @ ckeditor.js?20230706134036:733
    (anonymous) @ ckeditor.js?20230706134036:724
    l @ ckeditor.js?20230706134036:10
    (anonymous) @ ckeditor.js?20230706134036:12
    (anonymous) @ ckeditor.js?20230706134036:74
    xml_handler.js?20230706134026:35 DEPRECATED : exec_xml() is deprecated in Rhymix. Use exec_json() instead.

  • profile profile

     

    추가로 이게 에러일 수도 있겠네요.

     

    에러에서 나온 8메가로 설정한것은 이미 더올려주었습니다.

     

    이상하게 시간이 지금 시간이 아니라서 이거문제라고는 생각안하긴했는데 이게 맞을 수도 있겠네요.

    UTC 시간인걸 이제봤네요!

     

    신기한건 그냥 첨부를 하면 잘올라간다는것입니다 ㅠ

     

    [11-Aug-2023 03:55:41 UTC] PHP Warning: POST Content-Length of 11206827 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    [11-Aug-2023 03:55:46 UTC] PHP Warning: POST Content-Length of 14730363 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    [11-Aug-2023 03:55:50 UTC] PHP Warning: POST Content-Length of 18234251 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    [11-Aug-2023 03:56:39 UTC] PHP Warning: POST Content-Length of 18235852 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    [11-Aug-2023 03:56:44 UTC] PHP Warning: POST Content-Length of 18237453 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    [11-Aug-2023 03:58:45 UTC] PHP Warning: POST Content-Length of 9919082 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    [11-Aug-2023 03:58:48 UTC] PHP Warning: POST Content-Length of 9920683 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    [11-Aug-2023 03:58:50 UTC] PHP Warning: POST Content-Length of 9922284 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    [11-Aug-2023 03:58:53 UTC] PHP Warning: POST Content-Length of 9923885 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    [11-Aug-2023 03:58:54 UTC] PHP Warning: POST Content-Length of 9925486 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    [11-Aug-2023 03:58:56 UTC] PHP Warning: POST Content-Length of 9927087 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    [11-Aug-2023 04:45:36 UTC] PHP Warning: POST Content-Length of 10512226 bytes exceeds the limit of 8388608 bytes in Unknown on line 0

  • profile profile
    복붙했을때 업로드 모양나오고 100프로 된다음에
    끝났을때 undefined가 생기면 아래 로그가 쌓이고

    [11-Aug-2023 05:05:35 UTC] PHP Warning: POST Content-Length of 10490817 bytes exceeds the limit of 8388608 bytes in Unknown on line 0

    복붙했을때 업로드 모양나오고 100프로 된다음에
    끝났을때 undefined가 안생기고 무반응일때는 아무 로그도 안쌓이네요.

    파일용량은 500kb 정도짜리이고

    post_max_size = 40M
    upload_max_filesize = 40M
    까지 해준상태입니다.
  • profile profile

    아 죄송합니다.
    service httpd restart 뿐만아니라
    service php-fpm restart
    까지 재시작 해줘야지 설정한 php값이 반영이되네요 ㅠㅠ 자료에는역시나 문제가 없었습니다.
    감사합니다.

  • profile profile
    라이믹스 기본 업로드 방식과 달리 php.ini 제한에 걸리는 모양이군요. (라이믹스는 제한에 걸리지 않을 만한 크기로 쪼개어 업로드하기 때문에, 해당 설정에 신경쓸 필요가 없습니다.)
  • profile profile
    이거 원인이 POST 방식으로 파일을 업로드해서 그런것인거죠?
  • profile profile

    네, 라이브러리를 사용해서 쪼개려면 상당히 일이 많죠. 500KB짜리도 업로드가 안 될 만큼 설정이 빡빡한 서버는 흔치 않고요. 물론 이 자료 제작자분은 도전을 마다하시는 분이 아니기 때문에 충분히 적용 가능할 거라고 봅니다! ㅎㅎ

  • profile profile

    차이.JPG

     

    이게 보니깐 사진을 클립보드에 복사하면 용량이 더 커지네요.
    실제 이미지 파일용량은 500kb인데(하드에 저장된 용량입니다) ㅎㅎ 사진을 열고 클립보드로 복붙해서 넣어보면 2메가가 넘어가네요.

    가끔 똑같은 사진을(15메가) 사진 뷰어에서 열고 복붙해서 카톡에 보내려면 30메가 넘어가는거랑 같은 원리 인것같네요 컨트롤 씨하면 압축jpg를 새로운 원본의 jpg 이미지로 재탄생시켜버리는 윈도우 ㅠㅠ

  • profile profile

    혹시

    이미지 화질

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

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

     

    우선은 제가 

    무조건 재인코딩

     예  아니오

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

     

     

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

  • profile profile
    심지어 png인데요?
  • profile profile
    예전부터 애드온으로 복붙해서 올리면 저렇게 image.png로 뜨더라구요.
    윈도우 클립보드가 이미지는 png로 저장하나봅니다 그래서 용량도 커졋나보네요
    새로운 원본의 jpg가 아니라 png네요!
    그래도 사용자 편의는 이 만한게 없어서 가장 잘 쓰고 있는 애드온입니다. ㅎㅎ
  • profile profile
    이걸 어떻게 해석해야 하나 하고 난감해 하고 있었는데 잘 된다니 당장의 걱정은 덜었네요.
    확인 감사합니다~
  • profile profile
    저, 새로운 미션을 만난 건가요 ㄷㄷ
  • profile profile
    파일 모듈을 통해 정식으로 업로드하는 이미지라면 png를 jpg로 변환하면서 화질까지 자동 조정하는 옵션이 있습니다만, 애드온을 통해 별도로 업로드할 때는 그 과정을 거치지 않을 수도 있겠네요.
  • ?
    와... 이런 좋은 애드온이 있었다니
    감사합니다 ㅠㅠ
  • profile
    안녕하세요.

    좋은 애드온 잘 사용하고 있습니다 감사합니다

    혹시 애드온이 설치된 사이트에 경우 복사해서 붙여넣기가 동작하지 않는듯 합니다

    혹시 이유가 있을까요? 서버리소스를 줄이고자 하신듯 한데

    컴퓨터를 잘 모르는 일반유저들은 파일첨부는 신경 안쓰고 일단 복붙해서 보이면 이미지가 카피가 다 되었다고 생각하고 기존의 글을 삭제해서 이미지를 영구적으로 잃어버리네요

    즉 외부사이트는 이미지 복붙이 잘 되는데 내부 주소는 처리가 안되서 이미지 소실이 발생하는 경우가 종종 생깁니다. 혹시 소스 어디를 수정해주면 내부 주소도 이미지를 가져올 수 있을까요?
  • ?
    움짤 gif 파일 첨부 - 사용 안 함 설정에서
    움짤 붙여넣기시 '파일 업로드 중', '파일 업로드 완료'라는 메세지가 표시됩니다.
    라이믹스 2.0.23, 파이어폭스에서 테스트했습니다.
  • ? profile

    버그 맞네요.

    첨부한 파일을 _upload_thru_paste.php 로 이름을 바꿔서 덮어써보시겠어요?

    gif '사용 안 함'을 선택하면 jpg로 변환해서 첨부할 겁니다.

     

    테스트 부탁드립니다. 저는 크롬에서 작업을 해서요 ;)

    Atachment
    첨부
  • profile ?
    파일 덮어쓰기하니 말씀하신대로 jpg로 변환되어 업로드 됩니다.
    gif 사용 안 함이라 기존처럼 변환없이 원본을 붙여넣고 메세지가 나오는 것이 문제라 생각했는데 아니였군요 @_@
    gif 사용함으로 설정할 경우 (파일 덮어쓰기 전후 똑같이) 코어의 mp4 변환없이 gif로 업로드됩니다.

    https://xetown.com/download/1664903#comment_1703140
    드래그 앤 드롭으로 mp4 변환은 잘 됩니다 고맙습니다!
  • profile ?
    드래그 앤 드롭으로 gif 업로드시 mp4로 변환되는 과정도 업로드 중이라고 표시되면 좋을 것 같아요.
    업로드 완료라 떠서 업로드가 된 건지 안되는 건지 알기 어려운 부분이 있네요. :)
  • ? profile
    드래그 앤 드롭, 클립보드 이미지 붙여넣기, 이상 두 동작에서는 mp4 변환이 될 텐데,
    이미지 주소 붙여넣기 동작에서 mp4 변환이 될지는 잘 모르겠습니다.
    예전에 해보다가 힘들어서 포기했던 부분이기도 해서요;;;
    그리고 mp4 변환 과정 자체를 js 쪽에서 캐치하는 것은 아마도 매우 높은 확률로 불가능하지 않을까 싶어요.
  • profile ?
    그렇군요!
    크롬에서 테스트 해보았는데요 클립보드 이미지 붙여넣기 시 '움짤 GIF 파일 첨부' 사용 여부 상관없이 mp4로 전환되네요.
    사용 안 함으로 해놓고 사용해보겠습니다. 고맙습니다!
  • profile
    윤삼님이 만들어주시는 애드온은 버릴게 하나도 없네요 ㅎㅎ
  • profile
    윤삼님 안녕하세요.

    너무 엄청난 애드온이네요.

    정말 유용합니다!

    그리고 GIF 파일에 경우 코어에서 용량이 낮으면 mp4로 바꾸는 기능이 있는데 gif가 mp4로 바뀌어도 img 태그를 사용해서 정상적으로 동작이 안 하고 있습니다. 해당 부분은 한번 살펴보시면 좋을듯 해요.

    감사합니다!
  • profile profile

    아, 제가 해당 기능을 사용해보지 않아서 체크를 못했었습니다.
    그러니까 이 애드온을 이용해도 일단 mp4로 변환되기는 한다는 거죠?
    변환 이후에도 img 태그로 처리가 되니까 문제라는 거구요?

    한번 확인해보도록 하겠습니다.

  • profile profile
    네 맞습니다. 코어에 있는 gif -> mp4가 일단 먼저 동작하고 그 다음에 이 애드온이 본문에 붙여쓰기를 하는 듯 합니다
  • profile profile

    윤삼님 안녕하세요. 
     

    2022-07-20 16 11 19.jpg

     

    라이믹스 코어에서 해당 기능이 켜져있을땐

     

    움직이는 gif를 업로드 할시 file속성이 변경되고 있습니다

     

    하지만 바로 업로드의 애드온에서 자동삽입을 하다보니 <video>태그로 mp4가 삽입되지않고

     

    <img> 태그 값으로 mp4가 붙는 현상이 있습니다.

  • profile profile
    업로드 파일 자체는 mp4로 변환되는데 img 태그로 삽입된다는 거죠?
    이걸 구현할 수 있는 환경인지는 잘 모르겠는데 연구를 좀 해봐야겠네요..
  • profile profile
    네 맞습니다. 코어자체 기능과 바로업로드 기능이 겹쳐지면서 문제가 되네요

    제가 한가지 말씀을 안 드린게 있는데

    움짤 GIF를 본문에 드래그&드랍으로 했을 때만 문제가 됩니다

    코어 업로드 기능을 써서 올릴 떈 큰 문제가 없습니다.
  • profile profile

    혹시 이 첨부파일을 다운 받아서 맨앞에 언더바(_)를 붙이고 테스트해봐주실 수 있을까요?

    이런 형식으로요.

    루트/addons/baro_upload/js/_ckeditor.js

     

    (저는 웹호스팅을 쓰고 있는지라 서버 환경 때문에 직접 테스트를 해볼 수가 없네요ㅜ)

    Atachment
    첨부
  • profile profile
    지금 확인해봤습니다! 잘 됩니다 윤삼님

    정말 진심으로 감사하다는 말씀으론 너무 부족한듯 합니다
  • profile profile
    움짤 말고 다른 파일들도 드래그앤드롭이 문제없이 되는 거겠죠?
  • profile profile
    네! 다른 파일들은 저번부터 잘 작동했습니다. GIF -> mp4로 바뀌면서 문제가 되는거 하나 뿐이었어요
  • profile profile
    네, 이번 수정으로 혹시 다른 기능에 문제를 주지 않을까 해서요. 잘 된다니 다행입니다 ;)
  • ?
    와 대단하십니다 이 고급기능을...
    나중에 언제 한번 해볼까 생각밖에 못하던건데....
  • ? profile
    아이고, 저는 그냥 구글링만 했어요. 날코딩,발코딩이어서 개선 사항이 있을 겁니다;;;;
  • profile
    항상 대단하십니다~
    돈을 받아도 될 파일들을 이렇게 공개하시는 것부터;;
    정말로 존경합니다 ^^7~~~
  • profile profile

    많이 부족한 사람입니다ㅎㅎ
    서로 돕고 나누고 사는 거죠 뭐~

    저 또한 도움을 많이 받아 왔고요ㅎ

    많이 도와주세요~!

  • profile
    0.0.3 파폭에서 잘 됩니다. (91.7.1 esr )
  • profile profile
    확인 감사합니다~!
  • profile

    한가지 요청사항 드려도 될까요?

    이미지 드래그 앤 드롭, 클립보드의 붙여넣기로 첨부된 이미지의 경우 라이믹스 설정의 이미지 리사이즈에 적용되어 CK에디터 일반 업로드와 같은 룰이 적용됩니다.

    그런데 이미지소스, 이미지복사에 의해 첨부되는 이미지의 경우 파일업로드 리사이즈 설정을 무시하고 원본 사이즈대로 업로드가 됩니다. 물론 이부분은 참조하신 이미지 자동첨부 애드온이 이를 고려하지 못한 소스라 그럴텐데요.

    가능하다면 모두 같은 결과로 업로드가 되는게 좋을 것 같아 문의드립니다.

  • profile profile
    그게... 이 문제랑 관련이 좀 있습니다.
    https://xetown.com/topics/1664441

    말씀하신 경우에서는 파일 객체를 바로 procFileUpload하는 게 아니라
    php를 통해 getRemoteResource로 파일을 따로 만든 다음에 insertFile을 해주게 되거든요.
    그래서 그런 차이가 생기는 것 같습니다.

    js에서 파싱을 해서 일반적인 파일 업로드처럼 procFileUpload해주느냐, 아니면 php로 들어가서 파일 생성하고 insertFile해주느냐...
    지금도 시간이 날 때마다 방법 통일을 고민하고 있는데, js에서 파일을 파싱해오는 과정에서 속도 저하 문제가 좀 있어서 고민이 이어지고 있어요.
  • profile profile
    아.. 혹시 모르실 수도 있어 제보 차원에서 적었구요.
    통일이 안되는 부분이 있다고 해도 큰 문제는 아닙니다.

    지금 상태유지가 더 좋은 선택이라면 그렇게 가야죠.
  • profile profile
    네, 타당한 방법에 대해서는 장기적으로 연구해보도록 하겠습니다~
  • ?

    좋아요! 프로알라 에디터가 이 부분에 있어서 독보적으로 ck에디터와 차별화가 되어 사용 중인 사람 입니다.

     

    그런데 아무래도 프로알라가 코어에 포함된 것이 아닌 것이니

     

    늘 불안 했는데

    윤삼님 덕분에 CK 에디터도 유료인 프로알라 만큼 사용할만해졌네요.

    맥에서도 잠깐 테스트 해보니 잘 됩니다

  • ? profile
    희소식입니다. 맥에서도... 감동의 주르륵ㅡㅜ
    그래도 유료 자료들에 비해 한참 모자란 것이어서 더 보완이 있어야 할 것 같아요.
  • profile
    대단스~~~대단스~~!!
  • profile profile
    아님스, 아님스;;;;
    되게 초보적임스;;;
  • profile
    굿굿 사이트이용의 편리성을 더 좋게 해주는 애드온이네요
  • profile profile
    아직 0.0.2인 만큼 완성도는 부족합니다.
    많이 도와주세요~
  • profile profile
    저는 아직 사이트쪽은 배우는 초보쪽이라서 도움드릴 실력 되면 도움드릴게요~ ^^
    오늘도 좋은 하루 되시고~
  • ?

    역시 윤삼님의 작품은 훌륭합니다.👍

    감사합니다.😍

     

    저의 경우는 "파일 업로드 중"이란 메세지가 사라지질 않습니다. 

    Screenshot 2022-03-15 at 10.40.35.jpg

  • ? profile

    파일 업로드가 됐는데 메시지가 '완료'로 전환되지도 사라지지도 않는다면, 관련 스크립트 구문(xhr로 진행률 체크, 업로드 이후의 콜백 등)이 안 먹어서 그런 것 같은데요.
    혹시 사용 환경 알려주실 수 있을까요?
    브라우저 종류, ck에디터 버전 및 스킨 종류 같은 거요.
    당장 해결은 못하더라도ㅜ 일단 체크는 해놓도록 하겠습니다;;;

  • profile ?
    브라우즈는 크롬, 엣지, 웨일 전부다 그렇고요
    ck에디터도 라이믹스에 내장된 것 사용중입니다.
    레이아웃없이 기본 게시판스킨을 사용해도 같은 증상입니다.
    다른 분들은 이상 없는 것으로 보아 제 사이트의 문제 같습니다.ㅠㅠ

    혹시나 "파일 업로드 중"이란 메세지 안 뜨게 할 수는 없는지요?
  • ? profile
    notification이 들어간 스크립트 구문들을 찾아서 전부 삭제해보시면 메시지가 뜨지 않을 겁니다.
    아예 다음 버전에서는 메시지 사용 여부를 옵션으로 두는 것도 방법이겠네요.
  • profile ?
    그렇게 해주시면 저야 너무 좋죠.
    notification이 들어간 스크립트 구문들 지우니 안 나타나고 좋네요.
  • profile
    역대급~
    사용성을 한차원 업그레이드
  • profile profile

    에디터 자동완성 모듈 등에 비하면 정말 초보적 수준의 자료예요.
    버그나 개선점 등이 있을 테니 좋은 말씀 많이 부탁드립니다~

  • profile
    역시 윤삼님의 무궁무진한 아이디어와 끈기에 박수를 보냅니다. 짝!짝!짝!
    감사히 잘 사용하겠습니다.
  • profile profile
    네, 이슈 있으면 알려주세요~
  • profile
    역시 인성 좋고 실력 좋은 윤삼님..!!
  • profile profile
    하지만 가난....
  • profile
    하고자 하면, 엄청난 능력과 추진력으로 결과를 만들어 내시는 윤삼 존경해요.
  • profile profile
    갈 길이 구만리예요. 집단지성의 힘이 필요합니다!
  • profile
    윤삼님 우선 너무너무 큰 선물 감사합니다 🙇

    혹시 지난번에도 댓글 남겨드리긴 했었는데,.. 제가 라이믹스의 파일모듈과 연동해보려다 실패한 부분인데요

    https://ckeditor.com/docs/ckeditor4/latest/examples/fileupload.html#uploading-dropped-and-pasted-images
    CKEDITOR4에서는 모바일 디바이스에서의 이미지 복붙 업로드를 지원하는 플러그인이 존재하는데

    https://ckeditor.com/cke4/addon/uploadimage
    혹시 윤삼님의 코드 중 어떤 부분을 참고해서 제가 다시 시도해보먼 될지 힌트를 주실 수 있으실까요?

    의외로 짤방을 바로 복붙하고 싶으신 유저분들이 많이서 ㅠㅠ
  • profile profile

    이거는 저도 하다가 뭔가 상황이 복잡해져서 말았던 건데요.
    아마 filebrowser인가 그 플러그인도 있어야 하는 것 같더라구요.
    그리고 그 전에 있어야 할 플러그인들도 여럿 추가해야 하구요.

    그래서 저는 그냥 코어의 파일업로드 함수와 기진곰의 애드온 소스를 활용해서 구현한 겁니다.
    아마 uploadimage 플러그인이 좀 더 안정적이긴 할 것 같은데, 제가 만든 애드온은 그거랑은 완전 별개여서...
    이미지 대화상자에 업로드 서버 탭이 붙는 것 같기도 하고, 암튼 저는 그냥 노룩하고 패스해버렸어요;;;

  • profile profile
    아아 넵 늦은밤에 감사합니다 ㅎㅎ
  • profile profile
    그래도 uploadimage 플러그인의 안정성은 기대가 되는 만큼 길이 보이시면 공유 좀 해주세요.
    그럼 이 자료도 그쪽으로 노선을 변경할 수도 있을 것 같아요.
  • profile
    지금 테스트해 보니 붙여넣기로 이미지 업로드 기능에서 가장 일반적인 클립보드에 저장된 이미지를 붙여넣기가 안되는데 제외한 특별한 이유가 있을까요?

    예를들면 윈도우10의 캡쳐기능으로 보통 화면의 일정부분을 캡쳐하면 클립보드에 해당 이미지가 저장 되거든요.

    이때 에디터 같은 곳에 붙여넣기를 하면 이미지가 업로드 되는데요. 이부분이 제외된 듯 해서 문의드려봅니다.
  • profile profile

    아뇨, 이유는 따로 없고 제가 무지해서 그렇습니다ㅜ

    생각을 아예 못했어요 크흐
    그것까지 하려면 할 수는 있을 것 같은데, 다른 기능이랑 겹치는 이슈가 있어서 잘 구분해낼 수는 있을지 모르겠어요.
    연구해보겠습니닷

  • profile profile

    아 부담드리려는 것은 아닌데요. 리뷰성 게시글 작성할때 캡쳐해서 붙여넣고 하고 이걸 반복하는 작업을 흔하게 많이 하거든요. 이게 되면 캡쳐한 것을 저장하고 다시 그파일을 찾아서 업로드하는 과정이 없어서 굉장히 편리합니다. png 로 캡쳐가 대부분 되는것 같구요.

     

    지금 이 애드온이 다른 자료와 약간 반대의 케이스 인것 같아요.

    이미지 주소를 넣으면 업로드 (X)

    클립보드 이미지 붙여넣기 (O) 

    보통은 위와 같은 작동일텐데요....    아마 다른기능하고 구분의 문제가 아마도 이미지 주소와 구분해야 되는 상황이신거 같기도 하구요.

  • profile profile
    그쵸그쵸.
    확신은 못하지만 ck에디터에 그 부분을 잡아주는 엔드포인트가 있었던 것 같아요.
    전혀 부담 아닙니다요ㅎㅎ
  • profile profile
    네, 구분 문제가 바로 그겁니다.
    가령 웹상에서 움짤 gif 파일을 우클릭해서 이미지 복사를 했을 경우, 말씀하신 것처럼 클립보드 이미지로 붙여넣으면 움짤로 파일 객체가 형성되는 게 아니라 정지화면의 첫 프레임으로 png가 만들어지거든요.
    이걸 구분해내는 게 관건일 것 같아요.
  • profile profile
    네. 에디터자동완성 모듈의 드래그앤드롭,붙여넣기 업로드가 바로 그렇게 작동해요.

    웹에서 이미지복사 붙여넣기, 클립보드 붙여넣기 2가지 모두 가능해서 편리합니다.
    이걸 구분해서 가능한 것 같긴 합니다.
  • profile profile
    해당 기능 보강해서 업데이트했어요. 그래도 아직은 0.0.2입니다ㅎㅎ
    일단 저는 그림판에서 이미지의 일부분을 복사해서 붙여넣는 동작으로 확인했는데요.
    추가로 확인해주시면 좋을 것 같습니다!
  • profile profile
    애드온 설치는 아직이라 테스트 url 주셔서 거기서 테스트 했습니다. 클립보드의 이미지 붙여넣기 하면 업로드 잘되네요.
  • profile profile

    야호 확인 감사합니다!

  • profile
    이 애드온은 파일 저장경로가 기본 첨부파일 경로하고 동일하게 저장하나요?
  • profile profile
    네, 문서번호를 업로드 타겟 번호로 하고 파일 경로도 코어에서 지정하는 경로를 그대로 따릅니다.
  • profile profile

    지금 막 설치했는데 URI 못받아온다고 에러나네요 ㅜ
    파이어폭스 php8.1 라이믹스2 입니다

     

    서버에서 권한 따로 설정줘야되는게 있나요

     

    error1.png

    error2.png

     

    증상은 블로그글 긁어서 올리나 컴퓨터파일 드래그해서 올리나 동일합니다

  • profile profile
    파일 드롭과 복붙 모두 그런가요?
    아니면 어디서...?
    구체적으로 어떤 동작이었는지 알려주시면 더 도움될 것 같습니다.

    권한 설정은 모듈이나 에디터의 설정을 따르기 때문에 괜찮을 텐데, 어쩌면 파폭 이슈일 수도 있겠다는 생각이 듭니다.
    어디선가 파폭 이슈가 있다는 이야기를 얼핏 들었던 것도 같아요.
    (이러다 파폭 깔고 테스트해봐야 하는 것인지ㅜㅜ)
  • profile profile

    컴퓨터파일은 다시해보니까 아무 반응도 안일어나네요
    첨부파일 원래넣는곳에 넣으면 잘 올라가고요

     

    요즘 은근히 호환성이 크롬위주로 가서 파폭이 배척받는듯합니다 ㅠ

     

    기본스킨, 설치한 스킨 증상은 동일하고요

    웹상의 링크 복붙 -> URI에러

    웹상 글 긁어서 복붙 -> URI에러

    컴퓨터 사진 드래그 드롭 -> 아무일도 안일어남

  • profile profile
    복붙이나 파일 드롭 모두 그렇다면 파폭 테스트를 좀 해보긴 해야겠네요;;;
  • profile profile
    아이고, 배척은 아니고 제가 아마추어라 무대뽀여서 그래요ㅜ
  • profile profile
    같은사이트 크롬에서 해봐도 동일한걸보면 라이믹스나 php버전 차이가 아닐까요
  • profile profile
    앗 그래요? 사이트 주소 알려주시면 저도 한번 해보겠습니다!
  • profile profile
    최근에 카카오 보면 크롬만 호환되게 만들어놓고 사용자가 맞춰써라 그러거든요 ㅠ

    그놈의 구글..
  • profile profile
    https://quckcube.xyz/startpage_xe1/testboard/
    새게시판 생성해서 해도 동일하네요.. 감정 부탁드립니다
  • profile profile
    https://quckcube.xyz/startpage_xe1/testboard/8667
    여기서 이미지를 가져오려는데 이미지 드래그 앤 드롭은 되는데 나머지는 확실히 안 되네요.
    결과 -> https://dev.aporia.blog/board_fKje45/39323

    혹시 불펌 방지 세팅 같은 거라도...?
    비밀 좀 알려주세요ㅜ
  • profile profile

    특별히 만진게 없는데요.. ㅠ

     

    윤삼님 라이믹스 세팅환경이 어떻게 되어있나요

    버전체크를 해봐야될거같습니다

  • profile profile
    저는 그냥 최신 master 버전이구요.
    서버는 잘 몰라요. 그냥 스터디포어스에서 웹호스팅을 받고 있습니다.
  • profile profile
    더 면밀히 볼 필요는 있는데 차돌백이님 사이트의 이미지에서 유독 파일 핸들러의 getRemoteFile 함수가 false값을 리턴하네요.
    즉 코어의 getRemoteFile 및 getRemoteResource 함수의 접근이 막혀 다운로드가 안 되고, 그 때문에 파일 객체 형성이 안 되는 상황으로 보여요.

    이미지 다운로드가 차단된 서버들이 있을 수 있으니 자동 업로드 실패에 대비한 코드를 추가하기는 해야하겠습니다ㅜ
  • profile profile

    현재 사이트가 xe1 -> 라이믹스 업그레이드후 패치 계속 붙인거라 여기서 문제발생할수있고요 (관리페이지 및 스킨 등에서 자잘한 오류가 발견됩니다, 즉 클린설치상태가 아닙니다)

     

    밀고 다시만들어야하나..

  • profile
    와우 위에한글이네요 ^^
    워드프로세서 필요없을듯
  • profile
    윤삼님은 정말~~~~~~ 최고에요
  • profile profile
    저는 맥스터님 프사 볼 때마다 속이 뻥 뚫리는 느낌이에요ㅋㅋㅋㅋ
  • profile
    감사합니다!
  • profile profile
    이슈 있으면 알려주세요~
  • profile profile
    아직까진 아무 문제없이 잘 작동합니다 :D
  • profile ?

    와... 제 머리속에 살고 계시나요?
    항상 필요한게 있으면 이렇게 윤삼님이 해결해 주시네요. 그것도 무료로.

    제 환경에서 잘 작동합니다.

    어떤분이 산삼 보다 윤삼이라더니.. 정말 적절한 표현이지 않을까 싶네요!!!

    👍👍👍👍👍

  • ? profile
    아직 0.0.2여서 개선 및 보완할 게 많을 거예요.
    많이 도와주셔요.
목록