diff --git a/src/common/common.js b/src/common/common.js new file mode 100644 index 0000000..23daaba --- /dev/null +++ b/src/common/common.js @@ -0,0 +1,37 @@ +/* + 작성자 : 공현지 + 작성일 : 2025-01-17 + 수정자 : + 수정일 : + 설명 : 공통 스크립트 +*/ +import Quill from 'quill'; + + +// script 사용법 -> this.$common.변수 +// 템플릿 사용법 -> $common.변수 +const common = { + contentToHtml(content) { + try { + if (content.startsWith('{') || content.startsWith('[')) { + // Delta 형식으로 변환 + const delta = JSON.parse(content); + const quill = new Quill(document.createElement('div')); + quill.setContents(delta); + return quill.root.innerHTML; // HTML 반환 + } + return content; // 이미 HTML일 경우 그대로 반환 + } catch (error) { + console.error('콘텐츠 변환 오류:', error); + return content; // 오류 발생 시 원본 반환 + } + } + + +} + +export default { + install(app) { + app.config.globalProperties.$common = common; + } +}; diff --git a/src/components/editor/QEditor.vue b/src/components/editor/QEditor.vue index 8fb4538..bec32f3 100644 --- a/src/components/editor/QEditor.vue +++ b/src/components/editor/QEditor.vue @@ -79,25 +79,31 @@ onMounted(() => { syntax: true, }, }); + quillInstance.format('font', font.value); quillInstance.format('size', fontSize.value); + // When content changes, send the Delta object quillInstance.on('text-change', () => { - emit('update:data', quillInstance.root.innerHTML); + const delta = quillInstance.getContents(); // Get Delta format + emit('update:data', delta); }); watch([font, fontSize], () => { quillInstance.format('font', font.value); quillInstance.format('size', fontSize.value); }); - // 이미지 업로드 - let imageUrls = new Set(); + // Handle image upload + let imageUrls = new Set(); quillInstance.getModule('toolbar').addHandler('image', () => { selectLocalImage(); }); + quillInstance.on('text-change', (delta, oldDelta, source) => { - emit('update:data', quillInstance.root.innerHTML); + // Emit Delta when content changes + emit('update:data', quillInstance.getContents()); + delta.ops.forEach(op => { if (op.insert && typeof op.insert === 'object' && op.insert.image) { const imageUrl = op.insert.image; @@ -129,16 +135,17 @@ onMounted(() => { imageUrls.add(fullImageUrl); }).catch(e => { - toastStore.onToast('잠시후 다시 시도해주세요.', 'e'); + toastStore.onToast('잠시후 다시 시도해주세요.', 'e'); }); } }; } + async function uploadImageToServer(formData) { try { - const response = await $api.post('img/upload', formData, { isFormData: true }); - const imageUrl = response.data.data; - return imageUrl; + const response = await $api.post('quilleditor/upload', formData, { isFormData: true }); + const imageUrl = response.data.data; + return imageUrl; } catch (error) { toastStore.onToast('잠시후 다시 시도해주세요.', 'e'); throw error; @@ -166,4 +173,4 @@ onMounted(() => { min-height: 300px; font-family: 'Nanum Gothic', sans-serif; } - \ No newline at end of file + diff --git a/src/main.js b/src/main.js index 12ed27d..0d92aff 100644 --- a/src/main.js +++ b/src/main.js @@ -5,6 +5,7 @@ import App from './App.vue' import router from '@/router' import dayjs from '@p/dayjs' import ToastModal from '@c/modal/ToastModal.vue'; +import common from '@/common/common.js' const pinia = createPinia() pinia.use(piniaPersist) @@ -12,6 +13,7 @@ pinia.use(piniaPersist) const app = createApp(App) app.use(router) .use(pinia) + .use(common) .use(dayjs) .component('ToastModal',ToastModal) .mount('#app')