Rinjae
531 lines
20 KiB
JavaScript
531 lines
20 KiB
JavaScript
/**
|
|
* Summernote Custom JavaScript
|
|
* - 에디터 초기화, 이미지 처리, 붙여넣기 처리 등
|
|
*/
|
|
|
|
/**
|
|
* 이미지 다이얼로그에 안내 문구 추가
|
|
* @param {jQuery} $modal - 모달 jQuery 객체
|
|
*/
|
|
function addImageUploadGuide($modal) {
|
|
// 이미 안내 문구가 있으면 무시
|
|
if ($modal.find('.image-upload-guide').length) return;
|
|
|
|
var guideHtml =
|
|
'<div class="image-upload-guide">' +
|
|
'<i class="material-icons">info</i>' +
|
|
'<span>지원 형식: JPG, PNG, GIF, BMP, WEBP / 최대 크기: <strong>10MB</strong></span>' +
|
|
'</div>';
|
|
|
|
// summernote-lite 다이얼로그 구조: .note-modal > .note-modal-content > .note-modal-body
|
|
var $modalBody = $modal.find('.note-modal-body');
|
|
if ($modalBody.length) {
|
|
$modalBody.prepend(guideHtml);
|
|
} else {
|
|
// 대체 위치: 모달 콘텐츠의 첫 번째 자식 앞에 삽입
|
|
var $modalContent = $modal.find('.note-modal-content');
|
|
if ($modalContent.length) {
|
|
$modalContent.find('.note-modal-header').after(guideHtml);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Summernote 에디터 공통 초기화 함수
|
|
* - 기본: data-uri(Base64) 방식으로 이미지 처리
|
|
* - useFileUpload: true 옵션 시 서버 업로드 방식 사용
|
|
* - 이미지 리사이징 지원
|
|
* @param {string} selector - 에디터 selector (예: '#contents')
|
|
* @param {object} customOptions - 추가 옵션
|
|
* - useFileUpload: true면 서버 업로드 방식, false면 data-uri 방식 (기본값: false)
|
|
* - uploadUrl: 이미지 업로드 API URL (useFileUpload: true 시 필수)
|
|
* - imageViewUrl: 이미지 서빙 API URL (useFileUpload: true 시 필수)
|
|
*/
|
|
function initSummernote(selector, customOptions) {
|
|
customOptions = customOptions || {};
|
|
var useFileUpload = customOptions.useFileUpload || false;
|
|
|
|
// 기본 설정
|
|
var defaultOptions = {
|
|
placeholder: customOptions.placeholder || '여기에 내용을 입력하세요.',
|
|
height: customOptions.height || 300,
|
|
lang: 'ko-KR',
|
|
toolbar: customOptions.toolbar || [
|
|
['font', ['bold', 'underline', 'clear']],
|
|
['fontsize', ['fontsize']],
|
|
['color', ['color']],
|
|
['para', ['ul', 'ol', 'paragraph']],
|
|
['table', ['table']],
|
|
['insert', ['link', 'picture']],
|
|
['view', ['fullscreen', 'codeview', 'help']]
|
|
],
|
|
fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '36'],
|
|
// 이미지 팝오버 설정 - 리사이징 지원
|
|
popover: {
|
|
image: [
|
|
['resize', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
|
|
['float', ['floatLeft', 'floatRight', 'floatNone']],
|
|
['remove', ['removeMedia']]
|
|
]
|
|
},
|
|
callbacks: {
|
|
onInit: function() {
|
|
var $editable = $(selector).next('.note-editor').find('.note-editable');
|
|
$editable.addClass('editor-content');
|
|
$editable.on('keydown', function(e) {
|
|
if (e.keyCode === 8) {
|
|
e.stopPropagation();
|
|
}
|
|
});
|
|
|
|
// 이미지 스타일 변경 감지 - text-align을 올바른 CSS로 변환
|
|
var observer = new MutationObserver(function(mutations) {
|
|
mutations.forEach(function(mutation) {
|
|
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
|
|
var $img = $(mutation.target);
|
|
if ($img.is('img')) {
|
|
var style = $img.attr('style') || '';
|
|
// text-align: center -> display: block; margin: auto
|
|
if (style.indexOf('text-align: center') !== -1 || style.indexOf('text-align:center') !== -1) {
|
|
$img.css({
|
|
'text-align': '',
|
|
'display': 'block',
|
|
'margin-left': 'auto',
|
|
'margin-right': 'auto',
|
|
'float': 'none'
|
|
});
|
|
}
|
|
// text-align: left -> float: left
|
|
else if (style.indexOf('text-align: left') !== -1 || style.indexOf('text-align:left') !== -1) {
|
|
$img.css({
|
|
'text-align': '',
|
|
'display': '',
|
|
'margin-left': '',
|
|
'margin-right': '',
|
|
'float': 'left'
|
|
});
|
|
}
|
|
// text-align: right -> float: right
|
|
else if (style.indexOf('text-align: right') !== -1 || style.indexOf('text-align:right') !== -1) {
|
|
$img.css({
|
|
'text-align': '',
|
|
'display': '',
|
|
'margin-left': '',
|
|
'margin-right': '',
|
|
'float': 'right'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
observer.observe($editable[0], {
|
|
attributes: true,
|
|
subtree: true,
|
|
attributeFilter: ['style']
|
|
});
|
|
|
|
// 커스텀 onInit 콜백 호출
|
|
if (customOptions.callbacks && customOptions.callbacks.onInit) {
|
|
customOptions.callbacks.onInit.call(this);
|
|
}
|
|
},
|
|
// 이미지 업로드 처리
|
|
onImageUpload: function(files) {
|
|
for (var i = 0; i < files.length; i++) {
|
|
if (useFileUpload) {
|
|
// 서버 업로드 방식
|
|
uploadImageToServer(files[i], $(selector), customOptions);
|
|
} else {
|
|
// data-uri 방식 (기본)
|
|
insertImageAsDataUri(files[i], $(selector));
|
|
}
|
|
}
|
|
},
|
|
// 붙여넣기 시 선택 영역 삭제 처리
|
|
onPaste: function(e) {
|
|
var clipboardData = e.originalEvent.clipboardData;
|
|
if (!clipboardData) return;
|
|
|
|
// 현재 선택 영역이 있으면 삭제 (전체 선택 후 붙여넣기 대응)
|
|
var selection = window.getSelection();
|
|
if (selection && !selection.isCollapsed) {
|
|
// 선택 영역 삭제
|
|
selection.deleteFromDocument();
|
|
}
|
|
|
|
// 이미지 파일이 있는지 확인
|
|
var items = clipboardData.items;
|
|
if (items) {
|
|
for (var i = 0; i < items.length; i++) {
|
|
if (items[i].type.indexOf('image') !== -1) {
|
|
var imageFile = items[i].getAsFile();
|
|
if (imageFile) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (useFileUpload) {
|
|
uploadImageToServer(imageFile, $(selector), customOptions);
|
|
} else {
|
|
insertImageAsDataUri(imageFile, $(selector));
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 이미지가 아닌 경우 summernote 기본 동작
|
|
},
|
|
// 다이얼로그 열릴 때 - 이미지 다이얼로그 안내 문구 추가
|
|
onDialogShown: function() {
|
|
// 방법1: .note-modal.open.note-image-dialog (클래스가 같은 요소에 있는 경우)
|
|
var $imageModal = $('.note-modal.open.note-image-dialog');
|
|
if ($imageModal.length) {
|
|
addImageUploadGuide($imageModal);
|
|
return;
|
|
}
|
|
// 방법2: .note-modal.open 안에 .note-image-dialog가 있는 경우
|
|
var $openModal = $('.note-modal.open');
|
|
if ($openModal.find('.note-image-dialog').length || $openModal.find('[class*="image"]').length) {
|
|
addImageUploadGuide($openModal);
|
|
}
|
|
},
|
|
// 이미지 삭제 시 서버 파일도 삭제 (컨텍스트 메뉴 "사진 삭제" 클릭 시)
|
|
onMediaDelete: function(target) {
|
|
if (useFileUpload) {
|
|
var $img = $(target);
|
|
var fileId = $img.attr('data-file-id');
|
|
if (fileId) {
|
|
// 서버에 파일 삭제 요청
|
|
deleteImageFromServer(fileId, customOptions);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// 커스텀 옵션 병합 (callbacks는 위에서 별도 처리)
|
|
var mergedOptions = $.extend(true, {}, defaultOptions, customOptions);
|
|
|
|
// callbacks는 기본 콜백을 유지하면서 커스텀 콜백 추가
|
|
mergedOptions.callbacks = defaultOptions.callbacks;
|
|
if (customOptions.callbacks) {
|
|
// onInit은 위에서 이미 처리됨
|
|
// 다른 커스텀 콜백 추가
|
|
for (var key in customOptions.callbacks) {
|
|
if (key !== 'onInit' && key !== 'onImageUpload' && key !== 'onPaste') {
|
|
mergedOptions.callbacks[key] = customOptions.callbacks[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
$(selector).summernote(mergedOptions);
|
|
}
|
|
|
|
/**
|
|
* 이미지를 Base64 data-uri로 변환하여 에디터에 삽입
|
|
* @param {File} file - 이미지 파일
|
|
* @param {jQuery} $editor - summernote 에디터 jQuery 객체
|
|
*/
|
|
function insertImageAsDataUri(file, $editor) {
|
|
// 파일 크기 제한 (10MB)
|
|
var maxSize = 10 * 1024 * 1024;
|
|
if (file.size > maxSize) {
|
|
alert('이미지 크기는 10MB를 초과할 수 없습니다.');
|
|
return;
|
|
}
|
|
|
|
// 이미지 타입 확인
|
|
if (!file.type.match(/image\/(jpeg|jpg|png|gif|bmp|webp)/i)) {
|
|
alert('지원하지 않는 이미지 형식입니다. (jpeg, png, gif, bmp, webp만 지원)');
|
|
return;
|
|
}
|
|
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
var dataUri = e.target.result;
|
|
$editor.summernote('insertImage', dataUri, function($image) {
|
|
// 이미지 스타일 설정
|
|
$image.css({
|
|
'max-width': '100%',
|
|
'height': 'auto'
|
|
});
|
|
$image.attr('data-filename', file.name);
|
|
});
|
|
};
|
|
reader.onerror = function() {
|
|
alert('이미지 읽기에 실패했습니다.');
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
/**
|
|
* 붙여넣기된 HTML 정리 (MS Office 등에서 복사한 내용)
|
|
* - 불필요한 Office 속성 제거
|
|
* - 이미지 태그 정리 (alt, v:shapes 등 제거)
|
|
* @param {string} html - 원본 HTML
|
|
* @returns {string} 정리된 HTML
|
|
*/
|
|
function cleanPastedHtml(html) {
|
|
// 임시 div에서 HTML 파싱
|
|
var $temp = $('<div>').html(html);
|
|
|
|
// 이미지 태그 정리
|
|
$temp.find('img').each(function() {
|
|
var $img = $(this);
|
|
var src = $img.attr('src');
|
|
|
|
// src가 없거나 file:// 프로토콜이면 제거
|
|
if (!src || src.indexOf('file://') === 0) {
|
|
$img.remove();
|
|
return;
|
|
}
|
|
|
|
// 불필요한 속성 제거 (Office 관련)
|
|
var attributesToRemove = ['alt', 'v:shapes', 'o:title', 'style', 'class', 'id', 'name'];
|
|
attributesToRemove.forEach(function(attr) {
|
|
$img.removeAttr(attr);
|
|
});
|
|
|
|
// 깨끗한 스타일만 적용
|
|
$img.css({
|
|
'max-width': '100%',
|
|
'height': 'auto'
|
|
});
|
|
});
|
|
|
|
// VML 태그 제거 (v:, o:, w: 등)
|
|
var cleanedHtml = $temp.html();
|
|
cleanedHtml = cleanedHtml.replace(/<v:[^>]*>[\s\S]*?<\/v:[^>]*>/gi, '');
|
|
cleanedHtml = cleanedHtml.replace(/<o:[^>]*>[\s\S]*?<\/o:[^>]*>/gi, '');
|
|
cleanedHtml = cleanedHtml.replace(/<w:[^>]*>[\s\S]*?<\/w:[^>]*>/gi, '');
|
|
cleanedHtml = cleanedHtml.replace(/<!\[if[^>]*>[\s\S]*?<!\[endif\]>/gi, '');
|
|
|
|
// Office 네임스페이스 속성 제거
|
|
cleanedHtml = cleanedHtml.replace(/\s*v:[a-z]+="[^"]*"/gi, '');
|
|
cleanedHtml = cleanedHtml.replace(/\s*o:[a-z]+="[^"]*"/gi, '');
|
|
|
|
return cleanedHtml;
|
|
}
|
|
|
|
/**
|
|
* 이미지를 서버에 업로드하고 플레이스홀더로 에디터에 삽입
|
|
* @param {File} file - 이미지 파일
|
|
* @param {jQuery} $editor - summernote 에디터 jQuery 객체
|
|
* @param {object} options - 업로드 옵션 (uploadUrl, imageViewUrl 필수)
|
|
*/
|
|
function uploadImageToServer(file, $editor, options) {
|
|
// 파일 크기 제한 (10MB)
|
|
var maxSize = 10 * 1024 * 1024;
|
|
if (file.size > maxSize) {
|
|
alert('이미지 크기는 10MB를 초과할 수 없습니다.');
|
|
return;
|
|
}
|
|
|
|
// 이미지 타입 확인
|
|
if (!file.type.match(/image\/(jpeg|jpg|png|gif|bmp|webp)/i)) {
|
|
alert('지원하지 않는 이미지 형식입니다. (jpeg, png, gif, bmp, webp만 지원)');
|
|
return;
|
|
}
|
|
|
|
var formData = new FormData();
|
|
formData.append('file', file);
|
|
formData.append('cmd', 'UPLOAD'); // 필터 인증 통과용
|
|
|
|
// 업로드 중 표시
|
|
var $editable = $editor.next('.note-editor').find('.note-editable');
|
|
var $loading = $('<div class="image-upload-loading">이미지 업로드 중...</div>');
|
|
$editable.append($loading);
|
|
|
|
$.ajax({
|
|
url: options.uploadUrl,
|
|
method: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
xhrFields: { withCredentials: true },
|
|
success: function(response) {
|
|
$loading.remove();
|
|
|
|
if (response.success) {
|
|
// 이미지 URL 생성 (쿼리 파라미터 방식)
|
|
var imageUrl = options.imageViewUrl + '?fileId=' + response.fileId + '&fileSn=' + response.fileSn;
|
|
|
|
// 이미지 삽입
|
|
$editor.summernote('insertImage', imageUrl, function($image) {
|
|
// 플레이스홀더 정보를 data 속성에 저장
|
|
$image.attr('data-file-id', response.fileId);
|
|
$image.attr('data-file-sn', response.fileSn);
|
|
$image.attr('data-placeholder', response.placeholder);
|
|
$image.css({
|
|
'max-width': '100%',
|
|
'height': 'auto'
|
|
});
|
|
});
|
|
} else {
|
|
alert('이미지 업로드 실패: ' + (response.error || '알 수 없는 오류'));
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
$loading.remove();
|
|
console.error('이미지 업로드 오류:', error);
|
|
alert('이미지 업로드 중 오류가 발생했습니다.');
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 에디터 내용에서 이미지 태그를 플레이스홀더로 변환 (저장 시 호출)
|
|
* @param {string} contents - HTML 내용
|
|
* @returns {string} 플레이스홀더로 변환된 내용
|
|
*/
|
|
function convertImagesToPlaceholders(contents) {
|
|
if (!contents) return contents;
|
|
|
|
var $temp = $('<div>').html(contents);
|
|
|
|
$temp.find('img[data-file-id]').each(function() {
|
|
var $img = $(this);
|
|
var fileId = $img.attr('data-file-id');
|
|
var fileSn = $img.attr('data-file-sn') || '1';
|
|
|
|
// 이미지 속성 수집
|
|
var attrs = [];
|
|
var width = $img.attr('width');
|
|
var height = $img.attr('height');
|
|
var style = $img.attr('style');
|
|
|
|
// width/height가 유효한 값일 때만 저장 (0, auto, 빈값 제외)
|
|
if (width && width !== 'auto' && width !== '0' && parseInt(width) > 0) {
|
|
attrs.push('width=' + String(width).replace('px', ''));
|
|
}
|
|
if (height && height !== 'auto' && height !== '0' && parseInt(height) > 0) {
|
|
attrs.push('height=' + String(height).replace('px', ''));
|
|
}
|
|
if (style && style.indexOf('width') === -1) {
|
|
// style에 width가 없는 경우만 저장 (중복 방지)
|
|
attrs.push('style=' + style);
|
|
}
|
|
|
|
// 플레이스홀더 생성
|
|
var placeholder = '{{IMG:' + fileId + ':' + fileSn;
|
|
if (attrs.length > 0) {
|
|
placeholder += '|' + attrs.join('|');
|
|
}
|
|
placeholder += '}}';
|
|
|
|
// 이미지 태그를 플레이스홀더로 교체
|
|
$img.replaceWith(placeholder);
|
|
});
|
|
|
|
return $temp.html();
|
|
}
|
|
|
|
/**
|
|
* 플레이스홀더를 이미지 태그로 변환 (불러올 때 호출)
|
|
* @param {string} contents - 플레이스홀더가 포함된 내용
|
|
* @param {string} baseImageUrl - 이미지 서빙 베이스 URL (예: /onl/apim/editor/image/view/)
|
|
* @returns {string} 이미지 태그로 변환된 HTML
|
|
*/
|
|
function convertPlaceholdersToImages(contents, baseImageUrl) {
|
|
if (!contents) return contents;
|
|
|
|
// 플레이스홀더 패턴: {{IMG:fileId:fileSn}} 또는 {{IMG:fileId:fileSn|속성}}
|
|
var pattern = /\{\{IMG:([a-f0-9\-]+):(\d+)(\|[^}]+)?\}\}/gi;
|
|
|
|
return contents.replace(pattern, function(match, fileId, fileSn, attrsStr) {
|
|
var imgTag = '<img src="' + baseImageUrl + '?fileId=' + fileId + '&fileSn=' + fileSn + '"';
|
|
imgTag += ' data-file-id="' + fileId + '"';
|
|
imgTag += ' data-file-sn="' + fileSn + '"';
|
|
imgTag += ' data-placeholder="' + match + '"';
|
|
|
|
// 속성 파싱
|
|
var hasStyle = false;
|
|
if (attrsStr) {
|
|
var parts = attrsStr.substring(1).split('|'); // 앞의 | 제거 후 분리
|
|
for (var i = 0; i < parts.length; i++) {
|
|
var kv = parts[i].split('=');
|
|
if (kv.length >= 2) {
|
|
var key = kv[0];
|
|
var value = kv.slice(1).join('='); // = 가 포함된 값 처리
|
|
imgTag += ' ' + key + '="' + value + '"';
|
|
if (key === 'style') hasStyle = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 기본 스타일 추가
|
|
if (!hasStyle) {
|
|
imgTag += ' style="max-width:100%;height:auto;"';
|
|
}
|
|
|
|
imgTag += ' />';
|
|
return imgTag;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 서버에서 이미지 파일 삭제
|
|
* @param {string} fileId - 삭제할 파일 ID
|
|
* @param {object} options - 옵션 (uploadUrl에서 delete URL 유추)
|
|
*/
|
|
function deleteImageFromServer(fileId, options) {
|
|
if (!fileId || !options.uploadUrl) return;
|
|
|
|
// uploadUrl에서 delete URL 유추: /upload.json -> /delete.json
|
|
var deleteUrl = options.uploadUrl.replace('/upload.json', '/delete.json');
|
|
|
|
$.ajax({
|
|
url: deleteUrl,
|
|
method: 'POST',
|
|
data: {
|
|
cmd: 'DELETE',
|
|
fileId: fileId
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
console.log('이미지 삭제 완료: ' + fileId);
|
|
} else {
|
|
console.warn('이미지 삭제 실패: ' + (response.error || ''));
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('이미지 삭제 오류:', error);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 내용에서 파일 ID 목록 추출 (cleanup용)
|
|
* @param {string} contents - HTML 또는 플레이스홀더가 포함된 내용
|
|
* @returns {Array} 파일 ID 배열
|
|
*/
|
|
function extractFileIdsFromContent(contents) {
|
|
if (!contents) return [];
|
|
|
|
var fileIds = [];
|
|
var seen = {};
|
|
|
|
// 플레이스홀더에서 추출
|
|
var placeholderPattern = /\{\{IMG:([a-f0-9\-]+):\d+(\|[^}]+)?\}\}/gi;
|
|
var match;
|
|
while ((match = placeholderPattern.exec(contents)) !== null) {
|
|
var fileId = match[1];
|
|
if (!seen[fileId]) {
|
|
seen[fileId] = true;
|
|
fileIds.push(fileId);
|
|
}
|
|
}
|
|
|
|
// img 태그의 data-file-id에서 추출
|
|
var $temp = $('<div>').html(contents);
|
|
$temp.find('img[data-file-id]').each(function() {
|
|
var fileId = $(this).attr('data-file-id');
|
|
if (fileId && !seen[fileId]) {
|
|
seen[fileId] = true;
|
|
fileIds.push(fileId);
|
|
}
|
|
});
|
|
|
|
return fileIds;
|
|
}
|