diff --git a/WebContent/addon/summernote/summernote-custom.js b/WebContent/addon/summernote/summernote-custom.js
index 5682528..dd3ab5c 100644
--- a/WebContent/addon/summernote/summernote-custom.js
+++ b/WebContent/addon/summernote/summernote-custom.js
@@ -32,13 +32,18 @@ function addImageUploadGuide($modal) {
/**
* Summernote 에디터 공통 초기화 함수
- * - 이미지 붙여넣기 시 data-uri(Base64) 방식으로 처리
+ * - 기본: data-uri(Base64) 방식으로 이미지 처리
+ * - useFileUpload: true 옵션 시 서버 업로드 방식 사용
* - 이미지 리사이징 지원
* @param {string} selector - 에디터 selector (예: '#contents')
- * @param {object} customOptions - 추가 옵션 (선택사항)
+ * @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 = {
@@ -73,57 +78,102 @@ function initSummernote(selector, customOptions) {
}
});
+ // 이미지 스타일 변경 감지 - 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);
}
},
- // 이미지 업로드 처리 - data-uri(Base64) 방식
+ // 이미지 업로드 처리
onImageUpload: function(files) {
for (var i = 0; i < files.length; i++) {
- insertImageAsDataUri(files[i], $(selector));
- }
- },
- // 붙여넣기 시 이미지 처리 (MS Office 등에서 복사한 이미지 포함)
- onPaste: function(e) {
- var clipboardData = e.originalEvent.clipboardData;
- if (!clipboardData || !clipboardData.items) return;
-
- var items = clipboardData.items;
- var imageFile = null;
-
- // 1. 먼저 순수 이미지 파일이 있는지 확인
- for (var i = 0; i < items.length; i++) {
- if (items[i].type.indexOf('image') !== -1) {
- imageFile = items[i].getAsFile();
- break;
+ 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;
- // 2. 이미지 파일이 있으면 data-uri로 변환하여 삽입
- if (imageFile) {
- e.preventDefault();
- e.stopPropagation();
- insertImageAsDataUri(imageFile, $(selector));
- return;
+ // 현재 선택 영역이 있으면 삭제 (전체 선택 후 붙여넣기 대응)
+ var selection = window.getSelection();
+ if (selection && !selection.isCollapsed) {
+ // 선택 영역 삭제
+ selection.deleteFromDocument();
}
- // 3. HTML 붙여넣기인 경우 (MS Office 등) - 이미지 태그 정리
- var htmlData = clipboardData.getData('text/html');
- if (htmlData && htmlData.indexOf(' 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 = $('