JQuery

[JQuery] summernote 이미지 붙여넣기 시 이미지 파일 2개 들어가는 현상 onPaste()

chsr 2022. 4. 1. 10:31
728x90
반응형

 JQuery summernote 이미지 붙여넣기 시 이미지 파일 2개 들어가는 현상

onPaste()

이미지 복사 붙여넣기에 대한 콜백함수로 기본값 사용 시 이미지 복사 후 붙여넣기할 경우 base64로 인코딩 된 src 파일과 onImageUpload에서 구현한 url 기반의 파일 총 2개의 이미지가 들어가는 현상(버그) 발생함 


■ 해결 방법

onPaste() 추가

$('#summernote').summernote({
    height: 300,					// 에디터 높이
    minHeight: null,					// 최소 높이
    maxHeight: null,					// 최대 높이
    focus: true,					// 에디터 로딩후 포커스를 맞출지 여부
    lang: "ko-KR",					// 한글 설정
    placeholder: '최대 2048자까지 쓸 수 있습니다',	//placeholder 설정
    callbacks: {					//이미지 첨부 시 실행
        onImageUpload : function(files) {
            uploadSummernoteImageFile(files[0],this);
        },
        onPaste: function (e) {
            var clipboardData = e.originalEvent.clipboardData;
            if (clipboardData && clipboardData.items && clipboardData.items.length) {
                var item = clipboardData.items[0];
                if (item.kind === 'file' && item.type.indexOf('image/') !== -1) {
                    e.preventDefault();
                }
            }
        }
    }
});

// 이미지 파일 업로드
function uploadSummernoteImageFile(file, editor) {
    data = new FormData();
    data.append("file", file);
    $.ajax({
        data : data,
        type : "POST",
        url : "/uploadSummernoteImageFile",
        contentType : false,
        processData : false,
        success : function(data) {
            //업로드된 파일 url 존재해야함
            $(editor).summernote('insertImage', data.url);
        }
    });
}
728x90
반응형