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
반응형
'JQuery' 카테고리의 다른 글
[JQuery] attr 다중 처리 (0) | 2022.10.31 |
---|---|
[JQuery] 숫자 0부터 특정수까지 증가하는 애니메이션 넣기 (0) | 2022.05.18 |
[JQuery] summernote 사용법 (0) | 2022.03.31 |
[JQuery] 현재 스크롤 위치 좌표값(높이) 가져오기 scrollTop() (0) | 2022.03.30 |
[JQuery] 특정 영역 div 새로고침(F5) (0) | 2022.03.17 |