diff --git a/index.html b/index.html
index f25f418..2964fdd 100644
--- a/index.html
+++ b/index.html
@@ -54,6 +54,10 @@
+
+
+
+
diff --git a/public/css/font.css b/public/css/font.css
index 74ed500..42ca1af 100644
--- a/public/css/font.css
+++ b/public/css/font.css
@@ -14,3 +14,43 @@
font-weight: normal;
font-style: normal;
}
+
+/* 툴바에서 선택 가능한 폰트 및 크기 스타일 */
+.ql-font-nanum-gothic {
+ font-family: 'Nanum Gothic', sans-serif;
+}
+.ql-font-d2coding {
+ font-family: 'D2Coding', monospace;
+}
+.ql-font-consolas {
+ font-family: 'Consolas', monospace;
+}
+.ql-font-serif {
+ font-family: 'Georgia', serif;
+}
+.ql-font-monospace {
+ font-family: 'Monospace', monospace;
+}
+
+/* 폰트 크기 스타일 */
+.ql-size-12px {
+ font-size: 12px;
+}
+.ql-size-14px {
+ font-size: 14px;
+}
+.ql-size-16px {
+ font-size: 16px;
+}
+.ql-size-18px {
+ font-size: 18px;
+}
+.ql-size-24px {
+ font-size: 24px;
+}
+.ql-size-32px {
+ font-size: 32px;
+}
+.ql-size-48px {
+ font-size: 48px;
+}
\ No newline at end of file
diff --git a/src/components/editor/QEditor.vue b/src/components/editor/QEditor.vue
index 2a3b3a3..c141fea 100644
--- a/src/components/editor/QEditor.vue
+++ b/src/components/editor/QEditor.vue
@@ -43,7 +43,6 @@
-
@@ -55,10 +54,10 @@ import Quill from 'quill';
import 'quill/dist/quill.snow.css';
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
+const editor = ref(null);
+const font = ref('nanum-gothic');
+const fontSize = ref('16px');
+const emit = defineEmits(['update:data']);
onMounted(() => {
const Font = Quill.import('formats/font');
@@ -76,70 +75,27 @@ onMounted(() => {
toolbar: {
container: '#toolbar',
},
+ syntax: true,
},
});
- // 초기 에디터 값에 맞게 폰트와 사이즈 설정
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);
});
});
-