editor update

src/components/editor/QEditor.vue

@@ -2,15 +2,15 @@
     <div>
         <!-- 툴바 HTML -->
         <div id="toolbar">
-            <select class="ql-font">
+            <select class="ql-font" v-model="font">
                 <option value="nanum-gothic">나눔고딕</option>
                 <option value="d2coding">d2coding</option>
-                <option value="consolas">conlas</option>
+                <option value="consolas">consolas</option>
                 <option value="serif">Serif</option>
                 <option value="monospace">Monospace</option>
             </select>
 
-            <select class="ql-size">
+            <select class="ql-size" v-model="fontSize">
                 <option value="12px">12px</option>
                 <option value="14px">14px</option>
                 <option value="16px" selected>16px</option>
@@ -43,6 +43,7 @@
             <button class="ql-image">Image</button>
             <button class="ql-blockquote">Blockquote</button>
             <button class="ql-code-block">Code Block</button>
+
         </div>
         <!-- 에디터가 표시될 div -->
         <div ref="editor"></div>
@@ -52,52 +53,71 @@
 <script setup>
 import Quill from 'quill';
 import 'quill/dist/quill.snow.css';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch, defineEmits } from 'vue';
 
 const editor = ref(null); // 에디터 DOM 참조
+const font = ref('nanum-gothic'); // 폰트
+const fontSize = ref('16px'); // 폰트 크기
+const emit = defineEmits(['update:data']); // 데이터 업데이트를 위한 emit
 
 onMounted(() => {
     const Font = Quill.import('formats/font');
-    Font.whitelist = ['nanum-gothic' , 'd2coding' , 'consolas' ,'serif', 'monospace'];
+    Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace'];
     Quill.register(Font, true);
 
     const Size = Quill.import('attributors/style/size');
     Size.whitelist = ['12px', '14px', '16px', '18px', '24px', '32px', '48px'];
     Quill.register(Size, true);
 
-    new Quill(editor.value, {
-        theme: 'snow', // 테마 설정
+    const quillInstance = new Quill(editor.value, {
+        theme: 'snow',
         placeholder: '내용을 입력해주세요...',
         modules: {
             toolbar: {
                 container: '#toolbar',
             },
         },
-    }).format('font', 'nanum-gothic');;
+    });
+
+    // 초기 에디터 값에 맞게 폰트와 사이즈 설정
+    quillInstance.format('font', font.value);
+    quillInstance.format('size', fontSize.value);
+
+    // Quill의 텍스트 변경 시 v-model 값 업데이트
+    quillInstance.on('text-change', () => {
+        emit('update:data', quillInstance.root.innerHTML);
+    });
+
+    // font, fontSize 값 변경시 에디터 업데이트
+    watch([font, fontSize], () => {
+        quillInstance.format('font', font.value);
+        quillInstance.format('size', fontSize.value);
+    });
 });
+
 </script>
 
 <style>
-.ql-font  p {
-    font-family: 'Nanum Gothic'
-}
-/* Quill 에디터 내에서 폰트 설정 */
+@import 'quill/dist/quill.snow.css';
+
+/* 툴바에서 선택 가능한 폰트 및 크기 스타일 */
 .ql-font-nanum-gothic {
-    font-family: 'Nanum Gothic', sans-serif !important;
+    font-family: 'Nanum Gothic', sans-serif;
 }
-
 .ql-font-d2coding {
-    font-family: 'D2Coding', monospace !important;
+    font-family: 'D2Coding', monospace;
 }
-
 .ql-font-consolas {
-    font-family: 'Consolas', monospace !important;
+    font-family: 'Consolas', monospace;
 }
-
 .ql-font-serif {
-    font-family: Georgia, 'Times New Roman', serif !important;
+    font-family: 'Georgia', serif;
+}
+.ql-font-monospace {
+    font-family: 'Monospace', monospace;
 }
 
+/* 폰트 크기 스타일 */
 .ql-size-12px {
     font-size: 12px;
 }
@@ -120,7 +140,6 @@ onMounted(() => {
     font-size: 48px;
 }
 
-/* 에디터 영역 최소 높이 */
 .ql-editor {
     min-height: 300px;
     font-family: 'Nanum Gothic', sans-serif;

src/views/board/BoardWrite.vue

@@ -22,9 +22,9 @@
                             내용
                             <span class="text-red">*</span>
                         </label>
-                        <div class="col-md-12">
+                        <div class="col-md-12" >
                             <!-- <TEditor @update:data="content = $event"/> -->
-                            <QEditor/>
+                            <QEditor @update:data="content = $event"/>
                         </div>
                     </div>