ckeditor 클립보드 이미지 저장

현재 외주..? 느낌으로 한 사이트를 관리하고 있는데, 도저히 운영이라고는 할 수 없을 퀄리티라

최근에 서비스가 조금씩 확대되어 가며 수작업으로 만들어야 하는 부분이 늘어나고 있다.

이전에는 축적한 데이터를 가시화 하면 되는 단순한 구조였다면, 이제는 그 사이간의 분류와 데이터(문서)에 첨부되는 파일 혹은 이미지를 관리하는게 요점이 되었다.

최근에 필요했던 작업은.. 에디터에 클립보드에서 복사한 이미지를 붙여넣기 하는 일이었다.

ckeditor4에서 이미지 붙여넣기 시

위와 같이 브라우저에는 잘붙여지지만 이것의 textarea를 따로 저장했을때, 이 img 소스는 blob 경로를 통해 생성된 임시 파일을 불러오기 때문에 세션이 만료되거나 할 경우 이미지를 확인할 수 없게 되는 것이다.

그래서 img 소스를 서버 경로에 저장하고 그 경로 값을 부여하도록 하면 되지 않을까 하였다! … 물론 디버깅을 하나하나 다 해서… 수작업의 느낌은 났지만

어쩌겠는가,, 머리가 나쁘면 몸이 고생한다는 것을 또 한번 깨닫는 것이다ㅠ

ckeditor.js

visual code에서 지원하는 beauty extension을 사용해서 깔끔하게 한 후 작업에 들어갔다. 위쪽 코드를 찾기까지 굉장히 시간이 걸린 것 같은데…

기억하기론, ckeditor document 참고 후 ‘paste’ 작업이 클립보드 붙여넣기란 걸 인지 -> 모든 ‘paste’ 동작 중 (약 7건? 많지 않았음) 붙여넣기 시 동작하는 부분 확인 -> 해당 부분 코드 이해 -> url 생성되는 부분 확인

이 순서로 찾아냈고, 그 이후로는 위 사진과 같이 ajax 요청으로 서버 내의 지정된 경로로 이미를 새로운 이름과 함께 복사시키고 성공 시 해당 경로를 가져와서 img src 경로로 부여하여 낚아채기에 성공하였다.

물론… 붙여넣기 동작에 이미지를 생성하기 때문에 다양한 문제가 있었다.

1. 만약 붙여넣기 하고 삭제한다면?
2. 저장된 textarea를 불러와서 이미지를 삭제한다면?
3. blob로 된 객체를 파일로 저장하면서 생기는 리소스 문제?

이 정도로 생각하고.. 다행히도 1번과 2번은 db에 테이블을 따로 만들어서 최종 수정시 변별을 해 첨삭할 수 있도록 하였다.(php의 unlink로 삭제와 함께)

하지만 3번은.. 운영하면서 문제가 제기되는지 알아봐야할 듯 싶다.