[paste.js] 클립보드 복사, 붙여넣기 (이미지, 텍스트)

github.com/layerssss/paste.js

layerssss/paste.js

예제 페이지는 아래와 같다

layerssss.github.io/paste.js/

 

이미지또는 텍스트를 복사해 붙여 넣기를 만들기위해 사용한 JS

1. paste.js를 추가하고

<script type="text/javascript" src="/assets/js/paste.js"></script>

 

2. 붙여 넣기 할 영역을 만든다.

<div class="tab-pane" id="tab-clipboard">
	<div id="clipboardList" class="dropzone clipboard-box pastable" contenteditable>
	<div class="clipboard-text"> 이곳에 붙여넣기 하세요. (Ctrl+v) </div>
	</div>
</div>

브라우저 문제 때문에 안정적으로 한번 클릭 하여 focus in 하도록 한 후 붙여넣기를 할 수 있게 하였다.

 

3. 클릭 했을 때 해당 div에 focus in

$(document).on('click', '#clipboardList', function(){
    $('#clipboardList').pastableContenteditable();
    $("#clipboardList").focusin();
});

 

4. focus in 되었을 때와 focus out 되었을 때

$(document).on('focusin', "#clipboardList", function(){
    console.log('focus!!');
    $("#clipboardList").addClass('box-focus');
    $('#clipboardList[contenteditable]').pastableContenteditable();
});

 $(document).on('focusout', "#clipboardList", function(){
     console.log('focus out!!');
     $("#clipboardList").removeClass('box-focus');
 });

 

5. 이미지 붙여넣기

    $(document).on('pasteImage', '#clipboardList', function (event, data){
       // 이전 클릭 이벤트 클리어
        event.preventDefault();
     
        let img_src = data.dataURL;
        let img_source_name = img_src.split('/').reverse()[0];

        // 임시 사진 업로드 
        $.ajax({
            url: clipboardUpload,
            type: 'POST',
            dataType: 'JSON',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                'url': data.dataURL,
                'source_name' : img_source_name,
            },
            success: function (file) {
                console.log(file);
                // 업로드 성공 후 
                // div 포커스 아웃
                $('#clipboardList').blur();
                // div에 썸네일 넣기
                $('#clipboardList').append(tmp);
            }
        });
    }).on('pasteImageError', function(ev, data){
        // 이미지 붙여넣기 에러
        alert('Oops: ' + data.message);
        if(data.url){
            alert('But we got its url anyway:' + data.url)
        }
    }).on('pasteText', function (ev, data){
        // 복사한 데이터중 텍스트가 있을 경우
        console.log(data);
        ev.preventDefault();
        $("#clipboardList").empty().append('<div class="clipboard-text"> 이곳을 한번 클릭 후 붙여넣기 하세요. (Ctrl+V) </div>');
    });

복사한 이미지를 붙여넣기 한 후 썸네일 출력

이미지만 붙여넣기를 하고 싶었기 때문에

텍스트가 같이 복사된 경우엔 텍스트를 지워버렸다.

이미지 붙여넣기 끝.