이미지 업로드 중...
');
+ $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 = $('').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 = '
= 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 = $('
').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;
+}
diff --git a/WebContent/css/editor-content.css b/WebContent/css/editor-content.css
index c144110..67817f9 100644
--- a/WebContent/css/editor-content.css
+++ b/WebContent/css/editor-content.css
@@ -200,8 +200,9 @@
max-width: 100% !important;
height: auto !important;
border-radius: 8px !important;
- margin: 16px 0 !important;
- display: block !important;
+ margin-top: 16px !important;
+ margin-bottom: 16px !important;
+ /* margin-left, margin-right는 인라인 스타일로 정렬 제어 */
}
/* ==========================================================================
@@ -332,3 +333,51 @@
padding: 8px !important;
}
}
+
+/* ==========================================================================
+ Summernote 이미지 업로드 UI
+ ========================================================================== */
+
+/* 이미지 업로드 로딩 인디케이터 */
+.image-upload-loading {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(0, 73, 180, 0.9);
+ color: #fff;
+ padding: 12px 24px;
+ border-radius: 8px;
+ font-size: 14px;
+ z-index: 1000;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.7; }
+}
+
+/* 이미지 다이얼로그 업로드 안내 */
+.image-upload-guide {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 16px;
+ background: #EFF6FF;
+ border: 1px solid #BFDBFE;
+ border-radius: 8px;
+ margin-bottom: 16px;
+ font-size: 13px;
+ color: #1E40AF;
+}
+
+.image-upload-guide .material-icons {
+ font-size: 18px;
+ color: #3B82F6;
+}
+
+.image-upload-guide strong {
+ font-weight: 600;
+}
diff --git a/WebContent/jsp/common/include/script.jsp b/WebContent/jsp/common/include/script.jsp
index d96ba34..1e96177 100644
--- a/WebContent/jsp/common/include/script.jsp
+++ b/WebContent/jsp/common/include/script.jsp
@@ -56,251 +56,15 @@
">
">
+
">
">
">
-
-
-
+">
+"/>