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

수정

Browse Source
This commit is contained in:
khj0414 2025-01-17 15:27:32 +09:00
parent e8dc59026b
commit c52b3ecd95
1 changed files with 0 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,21 +57,16 @@ import Quill from 'quill';
import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.snow.css';
import { onMounted, ref, watch, defineEmits, defineProps } from 'vue'; import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
import $api from '@api'; import $api from '@api';
// props로 title과 isAlert를 받습니다.
const props = defineProps({ const props = defineProps({
isAlert: { isAlert: {
value:true,
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}); });
const editor = ref(null); 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']); const emit = defineEmits(['update:data']);
onMounted(() => { onMounted(() => {
const Font = Quill.import('formats/font'); const Font = Quill.import('formats/font');
Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace']; Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace'];
@ -91,11 +86,9 @@ onMounted(() => {
syntax: true, syntax: true,
}, },
}); });
quillInstance.format('font', font.value); quillInstance.format('font', font.value);
quillInstance.format('size', fontSize.value); quillInstance.format('size', fontSize.value);
// When content changes, send the Delta object
quillInstance.on('text-change', () => { quillInstance.on('text-change', () => {
const delta = quillInstance.getContents(); // Get Delta format const delta = quillInstance.getContents(); // Get Delta format
emit('update:data', delta); emit('update:data', delta);
@ -111,11 +104,9 @@ onMounted(() => {
quillInstance.getModule('toolbar').addHandler('image', () => { quillInstance.getModule('toolbar').addHandler('image', () => {
selectLocalImage(); selectLocalImage();
}); });
quillInstance.on('text-change', (delta, oldDelta, source) => { quillInstance.on('text-change', (delta, oldDelta, source) => {
// Emit Delta when content changes // Emit Delta when content changes
emit('update:data', quillInstance.getContents()); emit('update:data', quillInstance.getContents());
delta.ops.forEach(op => { delta.ops.forEach(op => {
if (op.insert && typeof op.insert === 'object' && op.insert.image) { if (op.insert && typeof op.insert === 'object' && op.insert.image) {
const imageUrl = op.insert.image; const imageUrl = op.insert.image;
@ -125,13 +116,11 @@ onMounted(() => {
} }
}); });
}); });
async function selectLocalImage() { async function selectLocalImage() {
const input = document.createElement('input'); const input = document.createElement('input');
input.setAttribute('type', 'file'); input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*'); input.setAttribute('accept', 'image/*');
input.click(); input.click();
input.onchange = () => { input.onchange = () => {
const file = input.files[0]; const file = input.files[0];
if (file) { if (file) {
@ -152,7 +141,6 @@ onMounted(() => {
} }
}; };
} }
async function uploadImageToServer(formData) { async function uploadImageToServer(formData) {
try { try {
const response = await $api.post('quilleditor/upload', formData, { isFormData: true }); const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
@ -163,7 +151,6 @@ onMounted(() => {
throw error; throw error;
} }
} }
function checkForDeletedImages() { function checkForDeletedImages() {
const editorImages = document.querySelectorAll('#editor img'); const editorImages = document.querySelectorAll('#editor img');
const currentImages = new Set(Array.from(editorImages).map(img => img.src)); const currentImages = new Set(Array.from(editorImages).map(img => img.src));
@ -176,10 +163,8 @@ onMounted(() => {
} }
}); });
</script> </script>
<style> <style>
@import 'quill/dist/quill.snow.css'; @import 'quill/dist/quill.snow.css';
.ql-editor { .ql-editor {
min-height: 300px; min-height: 300px;
font-family: 'Nanum Gothic', sans-serif; font-family: 'Nanum Gothic', sans-serif;