From a753b5cbc3889a0853345d2300a78f276812b337 Mon Sep 17 00:00:00 2001 From: khj0414 Date: Fri, 17 Jan 2025 13:26:07 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=ED=80=BC=EC=97=90=EB=94=94=ED=84=B0,?= =?UTF-8?q?=EA=B3=B5=ED=86=B5js=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/common.js | 37 +++++++++++++++++++++++++++++++ src/components/editor/QEditor.vue | 25 +++++++++++++-------- src/main.js | 2 ++ 3 files changed, 55 insertions(+), 9 deletions(-) create mode 100644 src/common/common.js 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') From cd20feb580ce040fa95b2adb51e27ba20fb2877b Mon Sep 17 00:00:00 2001 From: khj0414 Date: Fri, 17 Jan 2025 15:14:34 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=ED=80=BC=EC=97=90=EB=94=94=ED=84=B0=20,?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/common.js | 24 ++++++++++++++++++------ src/components/editor/QEditor.vue | 15 +++++++++++++-- src/main.js | 2 +- 3 files changed, 32 insertions(+), 9 deletions(-) diff --git a/src/common/common.js b/src/common/common.js index 23daaba..e761219 100644 --- a/src/common/common.js +++ b/src/common/common.js @@ -7,11 +7,16 @@ */ import Quill from 'quill'; - -// script 사용법 -> this.$common.변수 -// 템플릿 사용법 -> $common.변수 +/* + *템플릿 사용법 : $common.변수 + *setup() 사용법 : + const { appContext } = getCurrentInstance(); + const $common = appContext.config.globalProperties.$common; + $common.변수 +*/ const common = { - contentToHtml(content) { + // JSON 문자열로 Delta 타입을 변환 + contentToHtml(content) { try { if (content.startsWith('{') || content.startsWith('[')) { // Delta 형식으로 변환 @@ -25,9 +30,16 @@ const common = { console.error('콘텐츠 변환 오류:', error); return content; // 오류 발생 시 원본 반환 } - } + }, + // Delta 타입을 JSON 문자열로 변환 + deltaAsJson(content) { + if (content && content.ops) { + return JSON.stringify(content.ops); // Delta 객체에서 ops 속성만 JSON 문자열로 변환 + } + console.error('잘못된 Delta 객체:', content); + return null; // Delta 객체가 아니거나 ops가 없을 경우 null 반환 + } - } export default { diff --git a/src/components/editor/QEditor.vue b/src/components/editor/QEditor.vue index bec32f3..5caca78 100644 --- a/src/components/editor/QEditor.vue +++ b/src/components/editor/QEditor.vue @@ -46,15 +46,27 @@
+ + +
내용을 확인해주세요.