ck에디터에서 이미지를 드롭하거나 붙여넣으면 바로 파일로 첨부하는 애드온을 만들고 있습니다.

 

파일 드롭을 하는 경우는 안정적으로 잘 돌아가고 있어요.

그리고 파일 객체 업로드가 진행되는 정도에 따라 업로딩 프로그레스를 보여주는 것까지도 완전 성공적이구요.

 

다만, 복붙의 경우는 제작 중에도 버그가 자꾸 보여서 곤란함을 겪고 있습니다.

외부 php 파일을 통해 (외부이미지 파일첨부 애드온의 소스를 활용해서) 클립보드에 담긴 이미지 정보를 파일로 생성하고 이것을 insert해주는 방식인데요.

 

1.이미지 파일이 여러 개이거나 용량이 큰 경우에는 붙여넣기를 한 다음에 꽤 딜레이가 된 다음에야 붙여넣기와 파일 첨부가 이뤄지게 됩니다. 그래서 복붙에서도 프로그레스 바를 보여주려 했는데 ... 이 과정은 업로드 진행 과정 실시간 체크가 불가능해서 프로그레스바 구현이 안 됩니다;;

2. 그래서 이미지 url을 직접 js단에서 파일 객체로 fetch하고 그 결과를 procFileUpload 함수로 전달해주고자 했는데, 이번에는 cors 이슈가 발목을 붙잡고, cors 이슈를 우회하더라도 프록시->fetch->업로드 절차 때문에 이건 시간 지연이 상대적으로 더 길어지더군요.

3. 더불어 (이미지 복사가 아니라) 이미지 주소 복사의 경우에는 https://t1.daumcdn.net/cfile/tistory/99948C405E82591A09 처럼 파일명과 확장자가 명시적이지 않으면 이미지 파일로 인식이 어렵죠ㅉㅉ. 그렇다고 (해보진 않았지만) php 파일을 또 만들어서 파싱을 하거나 리다이렉트 url를 갖고 와서 이미지로 인식시켜주는 건 너무 비효율적이겠구요(이미지 url이 아닌 다른 url들까지 다 검토를 해야 할 수 없으니까요). ... 그래서 url 복붙으로 파일 바로 첨부는 포기해야 할지도 모르겠어요. 아니면 그런 한계를 인정하는 한에서 제공을 하든가요;;;

 

이걸로 이번 주말은 구글링과 편집기 파일질라를 왔다갔다했네요.

... 네, 또 하소연 글이었습니다ㅜ 하아아....

글쓴이 윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile
    1. 복사한 클립보드의 형태가 맥북일때, 윈도우일때 호환이 서로 유지하느냐.
    2. 각 브라우저별 클립보드를 처리하는 시스템이 일정한지...
    3. 클립보드 붙여넣엇을때 에디터에서 어떻게 인식시켜서 넣어줄지...
    4. 각각의 메모리를 브라우저에서 처리가 되는지...

    를 봐야할 문제일텐데 3번까지는 어떻게 각 OS의 특성이나 그런것들로 잘 다룬다 쳐도.. 4번이 문제겠지요.

    클립보드 복사라는건 아무래도 메모리쪽 영역에 들어가는 수 밖에 없으니까요. 그게 하드디스크에 저장되는게 아니라 메모리에 저장되어서 각 브라우저에 다시 전달하구 메모리 할당하구 뭐 그런 형태로 될 수 있어서.. 단순히 에디터에만 표기해주는 형태가 아니라 업로드 할려면 그 클립보드의 메모리쪽 접근하는 것과 아마 밀접한 연관이 있을 수 있습니다.

    복사 붙여넣기에 쓰는 항목은 휘발성 메모리 기억이므로 당연히 클립보드의 영향이 있을 수 밖에 없어 해당 부분 참고하셔서 연관이 있는지를 다시 한번 살펴보심이 좋을 것 같습니다.
  • profile profile
    1~3번은 CK에디터의 클립보드 기능을 활용하면 일관성을 유지할 수 있을 것 같은데...
    다 뜯어보진 않았지만 에디터에서 가져오는 클립보드는 일회성으로만 내용 전달이 되는 것 같긴 하더라구요.
    게다가 (iOS는 모르겠지만 안드로이드는 확실히) 모바일 클립보드의 이미지는 또 다른 세계여서 괴랄하기만 합니다ㅜ
    더 많은 공부가 있어야 할 것 같은데, 거기까지 파고 들어가야 하나 주저되기도 하고...

    제 생각에 가장 간명한 방법은 url을 파일 객체로 빠르게 컨버팅해주고 procFileUpload를 실행해주는 게 아닐까 싶은데, 뭘 어떻게 해도 쉽지 않고 효율성이 떨어지는 것 같아서 갈팡질팡이에요.
  • profile profile
    프로알라의 에디터를 가지고 있다면 프로알라 에디터처럼 해볼 필요가 있는데 ckeditor 자체가 에초에 코어측에 밀접하게 붙어 있는 코드라..(실제로 플러그인이 common/js 에서 호출하니;;) 수정하기도 어렵긴 합니다..
  • profile profile
    프로알라는 복붙->첨부가 잘 되었었던가요?
    구매를 해놓고는 실사용은 거의 해보지 않은 것이나 마찬가지여서 가물가물합니다.
    (프로알라까지 뜯어보기 시작하면 일이 커지는데ㅜㅜ)
  • profile
    ^^* 화이팅 하세요. 윤삼님
  • profile profile
    이렇게 응원 받으려고 글 써봤어요ㅋㅋㅋㅋ 감사합니다~
  • profile profile
    ^^*
    표현을 안할뿐이지 윤삼님 응원하는 사람들 많을 것입니다.
  • profile profile
    힘내겠습니다!
  • profile

    오오~ 이번에도 굉장히 어려운 토픽에 대해 연구하고 계시는군요~

    윤삼 님 항상 응원하고 덕분에 여러모로 많이 배우고 있네요! ^-^

    늘 감사드립니다!! :)

  • profile profile
    아닙니다ㅎ 늘 헤매는 신세인 걸요;;;