퀼에디터,공통js 추가

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;
+  }
+};

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;
 }
-</style>
+</style>

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')