네이버스마트에디터 크롬에서 클립보드 이미지 붙여넣기(Ctrl+V)

웹 개발 중 게시글 작성시 화면 캡쳐 후 붙여넣기를 할 수있게 해달라는 요청사항이 있었습니다.

 

그래서 고민하던 중 네이버 스마트 에디터를 적용시키기로 하고 안심하고 있었는데...!! 이럴수가..!! 

 

크롬에서는 보안상의 이유때문에 네이버 스마트에디터에서 클립보드 붙여넣기 기능을 제공하지 않는다는 소식!! ㅠ0ㅠ

 

그래서 어쩔수 없이 크롬에서도 사용할 수 있게 따로 개발해서 적용 시켰습니다.

 

위치는 이곳 저곳에 넣어 봤는데 가장 좋은 곳은 smartEditor.js 파일의 nhn.husky.EZCreator.createInIFrame 안에 있는 

 

fOnAppLoad : function(){} 함수에 적용 시키는 것이 가장 좋을 것 같았습니다.

 

왜냐하면 네이버 스마트에디터가 로딩 되기 전에 실행 시켜 버리면 해당 iframe을 찾지 못해서 에러가 발생하기 때문입니다.

 

- 붙여넣기 function

    setTimeout(function(){
        // 첫번째 iframe body
        var firstIframeBody = $($("iframe").get(0).contentWindow.document).find("body"); 
        // 첫번째 iframe body 안의 두번째 iframe   
        var secondIframe = firstIframeBody.find("iframe").get(0).contentWindow.document;
        // 두번째 iframe body
        var secondIframeBody = $(secondIframe).find('body');

        // 두번째 iframe body에 paste 이벤트
        secondIframeBody.on('paste', function(e){
            var items = e.originalEvent.clipboardData.items;
            var IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i;

            for (var i = 0; i < items.length; i++) {
                if(IMAGE_MIME_REGEX.test(items[i].type)) {
                    loadImage(this, items[i].getAsFile());
                    return;
                }
            }
        });
    }, 100);

 

그런데.. fOnAppLoad 함수에 구현을 해도 조금이라도 페이지가 로딩되는데 시간이 걸리면 에러가 발생해서 

 

별로 좋은 방법은 아니지만 setTimeout을 걸어서 최대한으로 시간을 줄여 100으로 적용하니 에러도 발생하지 않고 잘 동작하였습니다.

 

- loadImage function

    var loadImage = function(pDocument, file){
        var reader = new FileReader();
        reader.onload = function(e){
            // img elements 생성 후 이미지 삽입
            $(pDocument).append($('<img/>').attr('src', e.target.result));
        };
        reader.readAsDataURL(file);
    };

 

위와 같이 소스코드를 작성해서 적용 시켰더니 IE에서는 네이버 스마트에디터에서 지원하는 방식으로 

 

이미지 캡쳐 후 붙여넣기가 가능하고 입력 커서에 위치에 따라서 붙여넣기 등 지원하는 모든 기능을 사용할 수 있지만

 

크롬에서는 항상 제일 아래쪽에 해당 이미지가 붙는 것을 확인할 수 있었습니다.

 

더 좋은 방법은 일단 프로젝트 기간 때문에 나중에 하는걸로.... 할 수 있을지는 모르겠지만.. 

 

To be Continue...