추천 수 8 댓글 67
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 49
baro_upload.0.0.2.zip 0.0.2 2022-03-14 39
baro_upload.0.0.1.zip 0.0.1 2022-03-14 11

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
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • ?
    와 대단하십니다 이 고급기능을...
    나중에 언제 한번 해볼까 생각밖에 못하던건데....
  • ? 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여서 개선 및 보완할 게 많을 거예요.
    많이 도와주셔요.