localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

highlight cdn으로 추가 , menu 지연 로딩 , quill highlight 적용

Browse Source
This commit is contained in:
ckx6954 2024-12-17 22:12:41 +09:00
parent 4144b48ec0
commit 2fbfc2fceb
4 changed files with 52 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -54,6 +54,10 @@
<!-- <script src="/vendor/js/template-customizer.js"></script> --> <!-- <script src="/vendor/js/template-customizer.js"></script> -->
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. --> <!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
<script src="/js/config.js"></script> <script src="/js/config.js"></script>
<!-- Include the highlight.js library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

40
public/css/font.css
View File

@ -14,3 +14,43 @@
font-weight: normal; font-weight: normal;
font-style: 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;
}

54
src/components/editor/QEditor.vue
View File

@ -43,7 +43,6 @@
<button class="ql-image">Image</button> <button class="ql-image">Image</button>
<button class="ql-blockquote">Blockquote</button> <button class="ql-blockquote">Blockquote</button>
<button class="ql-code-block">Code Block</button> <button class="ql-code-block">Code Block</button>
</div> </div>
<!-- 에디터가 표시될 div --> <!-- 에디터가 표시될 div -->
<div ref="editor"></div> <div ref="editor"></div>
@ -55,10 +54,10 @@ import Quill from 'quill';
import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.snow.css';
import { onMounted, ref, watch, defineEmits } from 'vue'; import { onMounted, ref, watch, defineEmits } from 'vue';
const editor = ref(null); // 에디터 DOM 참조 const editor = ref(null);
const font = ref('nanum-gothic'); // 폰트 const font = ref('nanum-gothic');
const fontSize = ref('16px'); // 폰트 크기 const fontSize = ref('16px');
const emit = defineEmits(['update:data']); // 데이터 업데이트를 위한 emit const emit = defineEmits(['update:data']);
onMounted(() => { onMounted(() => {
const Font = Quill.import('formats/font'); const Font = Quill.import('formats/font');
@ -76,70 +75,27 @@ onMounted(() => {
toolbar: { toolbar: {
container: '#toolbar', container: '#toolbar',
}, },
syntax: true,
}, },
}); });
// 초기 에디터 값에 맞게 폰트와 사이즈 설정
quillInstance.format('font', font.value); quillInstance.format('font', font.value);
quillInstance.format('size', fontSize.value); quillInstance.format('size', fontSize.value);
// Quill의 텍스트 변경 시 v-model 값 업데이트
quillInstance.on('text-change', () => { quillInstance.on('text-change', () => {
emit('update:data', quillInstance.root.innerHTML); emit('update:data', quillInstance.root.innerHTML);
}); });
// font, fontSize 값 변경시 에디터 업데이트
watch([font, fontSize], () => { watch([font, fontSize], () => {
quillInstance.format('font', font.value); quillInstance.format('font', font.value);
quillInstance.format('size', fontSize.value); quillInstance.format('size', fontSize.value);
}); });
}); });
</script> </script>
<style> <style>
@import 'quill/dist/quill.snow.css'; @import 'quill/dist/quill.snow.css';
/* 툴바에서 선택 가능한 폰트 및 크기 스타일 */
.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;
}
.ql-editor { .ql-editor {
min-height: 300px; min-height: 300px;
font-family: 'Nanum Gothic', sans-serif; font-family: 'Nanum Gothic', sans-serif;

4
src/layouts/NormalLayout.vue
View File

@ -28,6 +28,7 @@ import TheTop from './TheTop.vue';
import TheFooter from './TheFooter.vue'; import TheFooter from './TheFooter.vue';
import TheMenu from './TheMenu.vue'; import TheMenu from './TheMenu.vue';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import { wait } from '@/common/utils';
window.isDarkStyle = window.Helpers.isDarkStyle(); window.isDarkStyle = window.Helpers.isDarkStyle();
@ -44,7 +45,8 @@ const loadScript = src => {
console.error(`Failed to load script: ${src}`); console.error(`Failed to load script: ${src}`);
}; };
}; };
nextTick(() => { nextTick(async () => {
await wait(200);
loadScript('/vendor/js/menu.js'); loadScript('/vendor/js/menu.js');
loadScript('/js/main.js'); loadScript('/js/main.js');
}); });