Add Summernote editor initialization and styling for image handling

src/main/resources/static/js/common.js

@@ -168,3 +168,204 @@ class FormValidator {
 		}
 	}
 }
+
+/**
+ * Summernote 에디터 공통 초기화 함수
+ * - 이미지 붙여넣기 시 data-uri(Base64) 방식으로 처리
+ * - 이미지 리사이징 지원
+ * @param {string} selector - 에디터 selector (예: '#contents')
+ * @param {object} customOptions - 추가 옵션 (선택사항)
+ */
+function initSummernote(selector, customOptions) {
+    customOptions = customOptions || {};
+
+    // 기본 설정
+    var defaultOptions = {
+        placeholder: customOptions.placeholder || '여기에 내용을 입력하세요.',
+        height: customOptions.height || 300,
+        lang: 'ko-KR',
+        toolbar: customOptions.toolbar || [
+            ['style', ['style']],
+            ['font', ['bold', 'underline', 'clear']],
+            ['color', ['color']],
+            ['para', ['ul', 'ol', 'paragraph']],
+            ['table', ['table']],
+            ['insert', ['link', 'picture']],
+            ['view', ['fullscreen', 'codeview', 'help']]
+        ],
+        // 이미지 팝오버 설정 - 리사이징 지원
+        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();
+                    }
+                });
+
+                // 커스텀 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;
+                    }
+                }
+
+                // 2. 이미지 파일이 있으면 data-uri로 변환하여 삽입
+                if (imageFile) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    insertImageAsDataUri(imageFile, $(selector));
+                    return;
+                }
+
+                // 3. HTML 붙여넣기인 경우 (MS Office 등) - 이미지 태그 정리
+                var htmlData = clipboardData.getData('text/html');
+                if (htmlData && htmlData.indexOf('<img') !== -1) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    // HTML에서 이미지 src 추출 및 정리
+                    var cleanedHtml = cleanPastedHtml(htmlData);
+
+                    // 에디터에 포커스 후 HTML 삽입
+                    $(selector).summernote('focus');
+                    setTimeout(function() {
+                        $(selector).summernote('pasteHTML', cleanedHtml);
+                    }, 10);
+                    return;
+                }
+            }
+        }
+    };
+
+    // 커스텀 옵션 병합 (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) {
+    // 파일 크기 제한 (5MB)
+    var maxSize = 5 * 1024 * 1024;
+    if (file.size > maxSize) {
+        alert('이미지 크기는 5MB를 초과할 수 없습니다.');
+        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;
+}

src/main/resources/templates/views/fragment/kjbank/head.html

@@ -27,6 +27,27 @@
     <link rel="stylesheet" th:href="@{/plugins/jquery-ui/jquery-ui.min.css}" />
     <link rel="icon" type="image/ico" th:href="@{/favicon.ico}">
 
+    <!-- Summernote 스타일 -->
+    <style>
+        .note-editable img {
+            max-width: 100%;
+            cursor: pointer;
+        }
+        /* 코드뷰 모드 가로 사이즈 고정 */
+        .note-editor .note-codable {
+            width: 100% !important;
+            max-width: 100% !important;
+            box-sizing: border-box !important;
+            resize: vertical !important;
+            white-space: pre-wrap !important;
+            word-wrap: break-word !important;
+            overflow-x: auto !important;
+        }
+        .note-editor.note-frame {
+            overflow: hidden;
+        }
+    </style>
+
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>