110 lines
2.8 KiB
JavaScript
110 lines
2.8 KiB
JavaScript
// /kngil/js/qa/qa_write.js
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
/* ==========================
|
|
* 1. CKEditor 초기화
|
|
* ========================== */
|
|
let editorInstance = null;
|
|
|
|
const contentEl = document.querySelector('#content');
|
|
if (contentEl) {
|
|
ClassicEditor
|
|
.create(contentEl, {
|
|
toolbar: [
|
|
'heading','|',
|
|
'bold','italic','link',
|
|
'bulletedList','numberedList','|',
|
|
'fontColor','fontBackgroundColor','fontSize',
|
|
'|','blockQuote','insertTable','imageUpload',
|
|
'undo','redo'
|
|
],
|
|
language: 'ko',
|
|
ckfinder: {
|
|
uploadUrl: '/kngil/bbs/qa_img_upload.php'
|
|
}
|
|
})
|
|
.then(editor => {
|
|
editorInstance = editor;
|
|
})
|
|
.catch(err => console.error(err));
|
|
}
|
|
|
|
/* ==========================
|
|
* 2. 폼 submit 검증
|
|
* ========================== */
|
|
const form = document.getElementById('qaForm');
|
|
if (form) {
|
|
form.addEventListener('submit', (e) => {
|
|
if (!editorInstance) return;
|
|
|
|
const data = editorInstance.getData().trim();
|
|
if (!data) {
|
|
e.preventDefault();
|
|
alert('내용을 입력해주세요.');
|
|
editorInstance.editing.view.focus();
|
|
return;
|
|
}
|
|
|
|
contentEl.value = data; // textarea에 반영
|
|
});
|
|
}
|
|
|
|
/* ==========================
|
|
* 3. 첨부파일 Drag & Drop
|
|
* ========================== */
|
|
const dropZone = document.getElementById('drop-zone');
|
|
const fileInput = document.getElementById('attach');
|
|
const fileList = document.getElementById('file-list');
|
|
|
|
if (dropZone && fileInput && fileList) {
|
|
|
|
let uploadFiles = [];
|
|
|
|
dropZone.addEventListener('click', () => fileInput.click());
|
|
|
|
dropZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.add('dragover');
|
|
});
|
|
|
|
dropZone.addEventListener('dragleave', () => {
|
|
dropZone.classList.remove('dragover');
|
|
});
|
|
|
|
dropZone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('dragover');
|
|
addFiles(e.dataTransfer.files);
|
|
});
|
|
|
|
fileInput.addEventListener('change', () => {
|
|
addFiles(fileInput.files);
|
|
});
|
|
|
|
function addFiles(files) {
|
|
for (const file of files) {
|
|
uploadFiles.push(file);
|
|
}
|
|
render();
|
|
syncInput();
|
|
}
|
|
|
|
function render() {
|
|
fileList.innerHTML = '';
|
|
uploadFiles.forEach(file => {
|
|
const li = document.createElement('li');
|
|
li.textContent = `${file.name} (${(file.size / 1024).toFixed(1)} KB)`;
|
|
fileList.appendChild(li);
|
|
});
|
|
}
|
|
|
|
function syncInput() {
|
|
const dt = new DataTransfer();
|
|
uploadFiles.forEach(f => dt.items.add(f));
|
|
fileInput.files = dt.files;
|
|
}
|
|
}
|
|
|
|
});
|