From 2fbfc2fcebee46a31c518d382bc66ed15869208c Mon Sep 17 00:00:00 2001 From: ckx6954 Date: Tue, 17 Dec 2024 22:12:41 +0900 Subject: [PATCH] =?UTF-8?q?highlight=20cdn=EC=9C=BC=EB=A1=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20,=20menu=20=EC=A7=80=EC=97=B0=20=EB=A1=9C=EB=94=A9?= =?UTF-8?q?=20,=20quill=20highlight=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 +++ public/css/font.css | 40 +++++++++++++++++++++++ src/components/editor/QEditor.vue | 54 +++---------------------------- src/layouts/NormalLayout.vue | 4 ++- 4 files changed, 52 insertions(+), 50 deletions(-) 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); }); }); -