djb-eapim/eapim-admin
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

에디터 기능 개선, 약관 관리에서 약관 원본 파일 첨부 기능 추가(DDL 영향)

Browse Source
This commit is contained in:
Rinjae
2026-01-07 15:31:17 +09:00
parent 935917e22a
commit dda45748ac
10 changed files with 1045 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebContent/addon/summernote/summernote-custom.js
+323 -40
View File
@@ -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('<img') !== -1) {
e.preventDefault();
e.stopPropagation();
// HTML에서 이미지 src 추출 및 정리
var cleanedHtml = cleanPastedHtml(htmlData);
// 에디터에 포커스 후 HTML 삽입
$(selector).summernote('focus');
setTimeout(function() {
$(selector).summernote('pasteHTML', cleanedHtml);
}, 10);
return;
// 이미지 파일이 있는지 확인
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() {
@@ -138,6 +188,17 @@ function initSummernote(selector, customOptions) {
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);
}
}
}
}
};
@@ -245,3 +306,225 @@ function cleanPastedHtml(html) {
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;
}
WebContent/css/editor-content.css
+51 -2
View File
@@ -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;
}
WebContent/jsp/onl/apim/portalterms/portalTermsManDetail.jsp
+122 -13
View File
@@ -19,12 +19,45 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<jsp:include page="/jsp/common/include/css.jsp"/>
<link rel="stylesheet" type="text/css" href="<c:url value="/css/editor-content.css"/>"/>
<style>
.file-link {
color: #0049b4;
text-decoration: none;
}
.file-link:hover {
text-decoration: underline;
}
.file-size {
color: #888;
font-size: 12px;
}
.btn-file-delete {
background: none;
border: none;
cursor: pointer;
color: #dc3545;
padding: 2px 4px;
margin-left: 8px;
vertical-align: middle;
}
.btn-file-delete:hover {
color: #a71d2a;
}
.btn-file-delete .material-icons {
font-size: 16px;
vertical-align: middle;
}
</style>
<jsp:include page="/jsp/common/include/script.jsp"/>
<jsp:include page="/jsp/common/include/portal.jsp"/>
<script language="javascript">
var url = '<c:url value="/onl/apim/portalterms/portalTermsMan.json" />';
var url_view = '<c:url value="/onl/apim/portalterms/portalTermsMan.view" />';
var imageUploadUrl = '<c:url value="/onl/apim/editor/image/upload.json" />';
var imageViewUrl = '<c:url value="/onl/apim/editor/image/view.do" />';
var fileDownloadUrl = '<c:url value="/file/download.do" />';
var isDetail = false;
var currentAttachedFileId = null;
function decodeHTMLEntities(text) {
var textArea = document.createElement('textarea');
@@ -32,6 +65,42 @@
return textArea.value;
}
function formatFileSize(bytes) {
if (!bytes || bytes === 0) return '0 B';
var k = 1024;
var sizes = ['B', 'KB', 'MB', 'GB'];
var i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
function showAttachedFile(fileId, fileName, fileSize) {
var downloadLink = fileDownloadUrl + '?fileId=' + fileId + '&fileSn=1';
var html = '<a href="' + downloadLink + '" class="file-link" title="다운로드">' +
'<i class="material-icons" style="vertical-align: middle; font-size: 18px;">attach_file</i> ' +
fileName + '</a>';
if (fileSize) {
html += ' <span class="file-size">(' + formatFileSize(fileSize) + ')</span>';
}
html += ' <button type="button" class="btn-file-delete" onclick="deleteAttachedFile()" title="삭제">' +
'<i class="material-icons">close</i></button>';
$('#attachedFileInfo').html(html).show();
$('#attachedFileInput').hide();
}
function hideAttachedFile() {
$('#attachedFileInfo').html('').hide();
$('#attachedFileInput').show();
$('#attachedFile').val('');
}
function deleteAttachedFile() {
if (confirm('첨부파일을 삭제하시겠습니까?')) {
currentAttachedFileId = null;
$('#deleteAttachment').val('true');
hideAttachedFile();
}
}
function init() {
$.ajax({
type: "POST",
@@ -73,7 +142,9 @@
$("#status").val(data.status);
var decodedContent = decodeHTMLEntities(data.contents);
$('#contents').summernote('code', decodedContent);
// 플레이스홀더를 이미지 태그로 변환하여 에디터에 표시
var htmlContent = convertPlaceholdersToImages(decodedContent, imageViewUrl);
$('#contents').summernote('code', htmlContent);
if (data.publishedOn) {
$("#publishedOnDisplay").val(gridDateFormat(data.publishedOn));
@@ -86,6 +157,14 @@
$("#createdDate").text(timeStampFormat(data.createdDate));
$("#lastModifiedDate").text(timeStampFormat(data.lastModifiedDate));
$("#lastModifiedByName").text(data.lastModifiedByName);
// 첨부파일 정보 표시
currentAttachedFileId = data.attachedFileId;
if (data.attachedFileId && data.attachedFileName) {
showAttachedFile(data.attachedFileId, data.attachedFileName, data.attachedFileSize);
} else {
hideAttachedFile();
}
},
error: function (e) {
alert(e.responseText);
@@ -127,10 +206,13 @@
}
});
// Summernote 에디터 초기화 (이미지 붙여넣기 data-uri 방식, 리사이징 지원)
// Summernote 에디터 초기화 (파일 업로드 방식, 리사이징 지원)
initSummernote('#contents', {
placeholder: '여기에 약관 내용을 입력하세요.',
height: 300
height: 300,
useFileUpload: true,
uploadUrl: imageUploadUrl,
imageViewUrl: imageViewUrl
});
if (agreementsType && revision) {
@@ -153,19 +235,35 @@
$("#agreementsType").prop('disabled', false);
// 일반 POST로 전송 (이미지는 서버 업로드 방식으로 URL만 저장됨)
var postData = {
cmd: isDetail ? "UPDATE" : "INSERT",
agreementsType: $("#agreementsType").val(),
revision: $("#revisionHidden").val(),
publishedOn: $("#publishedOn").val(),
contents: contents
};
// 이미지 태그를 플레이스홀더로 변환 (저장 시)
var contentsWithPlaceholders = convertImagesToPlaceholders(contents);
// 현재 사용 중인 파일 ID 목록 추출
var usedFileIds = extractFileIdsFromContent(contentsWithPlaceholders);
// FormData로 전송 (첨부파일 포함)
var formData = new FormData();
formData.append('cmd', isDetail ? "UPDATE" : "INSERT");
formData.append('agreementsType', $("#agreementsType").val());
formData.append('revision', $("#revisionHidden").val());
formData.append('publishedOn', $("#publishedOn").val());
formData.append('contents', contentsWithPlaceholders);
formData.append('usedFileIds', usedFileIds.join(','));
// 첨부파일 추가
var attachedFile = $('#attachedFile')[0].files[0];
if (attachedFile) {
formData.append('attachedFile', attachedFile);
}
// 첨부파일 삭제 플래그
formData.append('deleteAttachment', $('#deleteAttachment').val() || 'false');
$.ajax({
type: "POST",
url: url,
data: postData,
data: formData,
processData: false,
contentType: false,
success: function (json) {
alert("<%= localeMessage.getString("common.saveMsg") %>");
goNav(returnUrl);
@@ -220,8 +318,9 @@
<button type="button" class="cssbtn" id="btn_previous" level="R" status="DETAIL,NEW"><i class="material-icons">arrow_back</i> <%= localeMessage.getString("button.previous") %></button>
</div>
<div class="title" id="title">약관</div>
<form id="ajaxForm">
<form id="ajaxForm" enctype="multipart/form-data">
<input type="hidden" name="revision" id="revisionHidden">
<input type="hidden" id="deleteAttachment" value="false">
<table class="table_row" cellspacing="0">
<tr>
<th style="width:10%;"><%= getRequiredLabel("약관명") %></th>
@@ -254,6 +353,16 @@
<input type="hidden" id="publishedOn" name="publishedOn"/>
</td>
</tr>
<tr>
<th>첨부파일</th>
<td colspan="3">
<div id="attachedFileInfo" style="display:none; padding: 5px 0;"></div>
<div id="attachedFileInput">
<input type="file" id="attachedFile" name="attachedFile" style="width:400px;">
<span class="file-help" style="color:#666; font-size:12px; margin-left:10px;">약관 원본 문서를 첨부할 수 있습니다.</span>
</div>
</td>
</tr>
<tr>
<th><%= getRequiredLabel("약관 내용") %></th>
<td colspan="3">