퀼에디터 ,공통추가

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,8 +30,15 @@ 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 반환
+    }
 
 }
 

src/components/editor/QEditor.vue

@@ -46,15 +46,27 @@
         </div>
         <!-- 에디터가 표시될 div -->
         <div ref="editor"></div>
+
+        <!-- Alert 메시지 표시 -->
+        <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">내용을 확인해주세요.</div>   
     </div>
 </template>
 
 <script setup>
 import Quill from 'quill';
 import 'quill/dist/quill.snow.css';
-import { onMounted, ref, watch, defineEmits } from 'vue';
+import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
 import $api from '@api';
 
+// props로 title과 isAlert를 받습니다.
+const props = defineProps({
+    isAlert: {
+        value:true,
+        type: Boolean,
+        default: false,
+    },
+});
+
 const editor = ref(null);
 const font = ref('nanum-gothic');
 const fontSize = ref('16px');
@@ -163,7 +175,6 @@ onMounted(() => {
         });
     }
 });
-
 </script>
 
 <style>