SummerNote에서 Image Drag & Drop할 때 이미지 Url이 에디터상에 나타나지 않게 하기.

이번에 회사의 웹서비스인 렛플레이(https://letplay.co.kr/)에 콘텐츠를 추가하는 관리자 페이지의 텍스트 에디터를 CKEditor에서 Summernotr로 바꾸게 되었다.

관리자 애플리케이션을 AWS EC2로 마이그레이션하면서 CKEditor의 이미지를 자사의 이미지 서버에 업로드하고 그 이미지의 URL을 받아서 에디터 화면에 img tag로 삽입하는 과정이 보안이슈(XSS)에 막혀서 이미지는 업로드 되나 그 이미지가 본문에 삽입되지 않게되었다.

그래서 Summernote로 텍스트에디터를 바꾸게 되었다. 그러나 summernote를 서비스에 곧 바로 적용하는 것은 문제가 있었다.

유저 친화적이지 않은 요소가 있었기 때문이다.

이번에 summernote를 적용하면서 내가 두가지 요구사항을 클라이언트로 부터 받아서 수정하게 되었는데.

그 과정을 블로그에 남기려고 한다.

우선 첫번째 요구사항은 웹상의 이미지를 Drag & Drop해서 이미지를 첨부할 때 이미지만이 아니라 잡다한 URL 텍스트들이 같이 삽입되는 문제였다.

백문이 불여일견

아래의 이미지를 보자.

우선 문제를 알기위해서는 디버깅을 해봐야했다.

필자는 FireFox Developer Edition을 이용하고 있고 기본 탑재된 Debuger를 이용한다.

다른 브라우저에서 제공하는 디버거에 대해서는 잘 모른다. 그러나 파이어폭스와 대동소이할 것으로 생각한다.

Debugging 과정은 아래와 같다.

1. 우선 summernote.js 파일을 찾아야한다.

    summernote 공식사이트에서 디버거를 실행해서 아래의 디렉토리로 들어간다

2. Image Drop시에 실행되는 메소드를 찾아야한다. 그래야 Break point를 지정하고 디버깅을 하니깐..

일단 Drop이라고 검색해보자(검색 옵션을 전체단어를 선택해야한다. 안 그러면 모든 drop이라는 단어가 포함된 키워드들이 선택된다.) 몇번가지 않아 dropImage라는 주석을 발견할 수 있다.

3. 이제 브레이크 포인트를 잡아서 실제로 어떻게 동작되는지 살펴보자.

브레이크 포인트에 걸리면 F8이나 계속 버튼을 이용해서 다음 동작으로 넘어갈 수 있다.

4. 문제는 text로 시작하는 request type를 분류하고 해당하는 모든 content를 받아온다는 것이다.

우리가 필요로하는 content는 <img></img>로 이루어진 이미지 태그이다. 해당 콘텐츠만 에디터상에 삽입하기를 원한다.

5. 해결방법은 간단하다 이미 type을 text라는 키워드로 분류하고 있지 않은가.

그러면 if 문을 하나 더 추가해서 <img>태그만 invoke하면 된다.

6. 그럼 실제로 동작하는지 확인해보자. 잘 동작한다.

이 것으로 첫번째 요구사항은 해결했다.

사실 이 작업을 진행하면서 가볍게 구글링을 해봤는데. 해결방법을 웹상에서 찾을 수 없었다.

필자의 구글링 실력이 부족한 것인지..

아니면 아주 간단한 문제라서 모두들 검색하지 않고 그냥 해결해버리는 것인지 모르겠지만..

어쨌든 디버깅하면서 문제를 해결하게 되었는데 아주 좋은 경험이 되었다.

그리고 해결과정을 블로그에 올리니 다른 사람들도 도움이 되었으면 좋겠다.

다음 포스팅은 아마 이번 포스팅보다 더 유용할 것이다.

Summernote에서는 HTML 코드를 Codeview라는 버튼으로 볼 수 있다.

그러나...도저히 편집할 수 없을 정도로 안 이쁘게 코드가 나열되어있다.

Summernote에서 HTML Tag들을 AutoFormatting하는 방법을 블로그에 올리겠다.