200 lines
8.0 KiB
Vue
200 lines
8.0 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 툴바 HTML -->
|
|
<div id="toolbar">
|
|
<select class="ql-font" v-model="font">
|
|
<option value="nanum-gothic">나눔고딕</option>
|
|
<option value="d2coding">d2coding</option>
|
|
<option value="consolas">consolas</option>
|
|
<option value="serif">Serif</option>
|
|
<option value="monospace">Monospace</option>
|
|
</select>
|
|
|
|
<select class="ql-size" v-model="fontSize">
|
|
<option value="12px">12px</option>
|
|
<option value="14px">14px</option>
|
|
<option value="16px" selected>16px</option>
|
|
<option value="18px">18px</option>
|
|
<option value="24px">24px</option>
|
|
<option value="32px">32px</option>
|
|
<option value="48px">48px</option>
|
|
</select>
|
|
|
|
<button class="ql-bold">B</button>
|
|
<button class="ql-italic">I</button>
|
|
<button class="ql-underline">U</button>
|
|
|
|
<button class="ql-header" value="1">H1</button>
|
|
<button class="ql-header" value="2">H2</button>
|
|
<button class="ql-header" value="3">H3</button>
|
|
<button class="ql-header" value="4">H4</button>
|
|
<button class="ql-header" value="5">H5</button>
|
|
<button class="ql-header" value="6">H6</button>
|
|
|
|
<button class="ql-list" value="ordered">OL</button>
|
|
<button class="ql-list" value="bullet">UL</button>
|
|
|
|
<button class="ql-align" value="">Left</button>
|
|
<button class="ql-align" value="center">Center</button>
|
|
<button class="ql-align" value="right">Right</button>
|
|
<button class="ql-align" value="justify">Justify</button>
|
|
|
|
<button class="ql-link">Link</button>
|
|
<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>
|
|
<!-- Alert 메시지 표시 -->
|
|
<div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">내용을 확인해주세요.</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Quill from 'quill';
|
|
import 'quill/dist/quill.snow.css';
|
|
import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
|
|
import $api from '@api';
|
|
|
|
const props = defineProps({
|
|
isAlert: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
initialData: {
|
|
type: [String, Object],
|
|
default: () => null,
|
|
},
|
|
});
|
|
|
|
const editor = ref(null); // 에디터 DOM 참조
|
|
const font = ref('nanum-gothic'); // 기본 폰트
|
|
const fontSize = ref('16px'); // 기본 폰트 크기
|
|
const emit = defineEmits(['update:data']);
|
|
|
|
onMounted(() => {
|
|
// 툴바에서 선택할 수 있는 폰트 목록 설정
|
|
const Font = Quill.import('formats/font');
|
|
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);
|
|
|
|
// Quill 에디터 인스턴스 생성
|
|
const quillInstance = new Quill(editor.value, {
|
|
theme: 'snow',
|
|
placeholder: '내용을 입력해주세요...',
|
|
modules: {
|
|
toolbar: {
|
|
container: '#toolbar',
|
|
},
|
|
syntax: true,
|
|
},
|
|
});
|
|
|
|
// 폰트와 폰트 크기 설정
|
|
quillInstance.format('font', font.value);
|
|
quillInstance.format('size', fontSize.value);
|
|
|
|
// 텍스트가 변경될 때마다 부모 컴포넌트로 변경된 내용 전달
|
|
quillInstance.on('text-change', () => {
|
|
const delta = quillInstance.getContents(); // Delta 포맷으로 내용 가져오기
|
|
emit('update:data', delta);
|
|
});
|
|
|
|
// 폰트나 폰트 크기가 변경될 때 에디터 스타일 업데이트
|
|
watch([font, fontSize], () => {
|
|
quillInstance.format('font', font.value);
|
|
quillInstance.format('size', fontSize.value);
|
|
});
|
|
|
|
// 초기 데이터가 있을 경우, HTML 형식으로 삽입
|
|
if (props.initialData) {
|
|
console.log(props.initialData);
|
|
quillInstance.setContents(JSON.parse(props.initialData));
|
|
}
|
|
|
|
// 이미지 업로드 기능 처리
|
|
let imageUrls = new Set(); // 업로드된 이미지 URL을 추적
|
|
quillInstance.getModule('toolbar').addHandler('image', () => {
|
|
selectLocalImage(); // 이미지 버튼 클릭 시 로컬 이미지 선택
|
|
});
|
|
|
|
// 에디터의 텍스트가 변경될 때마다 이미지 처리
|
|
quillInstance.on('text-change', (delta, oldDelta, source) => {
|
|
emit('update:data', quillInstance.getContents());
|
|
delta.ops.forEach(op => {
|
|
if (op.insert && typeof op.insert === 'object' && op.insert.image) {
|
|
const imageUrl = op.insert.image; // 이미지 URL 추출
|
|
imageUrls.add(imageUrl); // URL 추가
|
|
} else if (op.delete) {
|
|
checkForDeletedImages(); // 삭제된 이미지 확인
|
|
}
|
|
});
|
|
});
|
|
// 로컬 이미지 파일 선택
|
|
async function selectLocalImage() {
|
|
const input = document.createElement('input');
|
|
input.setAttribute('type', 'file');
|
|
input.setAttribute('accept', 'image/*');
|
|
input.click(); // 파일 선택 다이얼로그 열기
|
|
input.onchange = () => {
|
|
const file = input.files[0];
|
|
if (file) {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
// 이미지 서버에 업로드 후 URL 받기
|
|
uploadImageToServer(formData)
|
|
.then(serverImageUrl => {
|
|
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
|
|
const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
|
|
|
|
const range = quillInstance.getSelection();
|
|
quillInstance.insertEmbed(range.index, 'image', fullImageUrl); // 선택된 위치에 이미지 삽입
|
|
|
|
imageUrls.add(fullImageUrl); // 이미지 URL 추가
|
|
})
|
|
.catch(e => {
|
|
toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
|
|
});
|
|
}
|
|
};
|
|
}
|
|
// 이미지 서버 업로드
|
|
async function uploadImageToServer(formData) {
|
|
try {
|
|
const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
|
|
const imageUrl = response.data.data;
|
|
return imageUrl; // 서버에서 받은 이미지 URL 반환
|
|
} catch (error) {
|
|
toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
// 삭제된 이미지 확인
|
|
function checkForDeletedImages() {
|
|
const editorImages = document.querySelectorAll('#editor img');
|
|
const currentImages = new Set(Array.from(editorImages).map(img => img.src)); // 현재 에디터에 있는 이미지들
|
|
|
|
imageUrls.forEach(url => {
|
|
if (!currentImages.has(url)) {
|
|
imageUrls.delete(url);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
@import 'quill/dist/quill.snow.css';
|
|
.ql-editor {
|
|
min-height: 300px;
|
|
font-family: 'Nanum Gothic', sans-serif;
|
|
}
|
|
</style>
|