56 lines
1.6 KiB
Vue
56 lines
1.6 KiB
Vue
|
<script setup>
|
||
|
|
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
|
||
|
|
import Editor from '@toast-ui/editor'
|
||
|
|
import '@toast-ui/editor/dist/toastui-editor.css'
|
||
|
|
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all'
|
||
|
|
import 'prismjs/themes/prism-tomorrow.css'
|
||
|
|
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
modelValue: { type: String, default: '' },
|
||
|
|
height: { type: String, default: '400px' },
|
||
|
|
placeholder: { type: String, default: '' },
|
||
|
|
initialEditType: { type: String, default: 'wysiwyg' }, // 'markdown' | 'wysiwyg'
|
||
|
|
})
|
||
|
|
const emit = defineEmits(['update:modelValue'])
|
||
|
|
|
||
|
|
const el = ref(null)
|
||
|
|
let editor = null
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
editor = new Editor({
|
||
|
|
el: el.value,
|
||
|
|
height: props.height,
|
||
|
|
initialEditType: props.initialEditType,
|
||
|
|
hideModeSwitch: true, // 마크다운/위지윅 전환 탭 숨김 (WYSIWYG 전용)
|
||
|
|
plugins: [codeSyntaxHighlight], // 코드 구문 강조
|
||
|
|
initialValue: props.modelValue || '',
|
||
|
|
placeholder: props.placeholder,
|
||
|
|
usageStatistics: false,
|
||
|
|
autofocus: false,
|
||
|
|
events: {
|
||
|
|
change: () => emit('update:modelValue', editor.getMarkdown()),
|
||
|
|
},
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
// 외부 값 변경(수정 로드, 제출 후 초기화 등)을 에디터에 반영 (입력 중 루프 방지 가드)
|
||
|
|
watch(
|
||
|
|
() => props.modelValue,
|
||
|
|
(val) => {
|
||
|
|
if (editor && (val || '') !== editor.getMarkdown()) {
|
||
|
|
editor.setMarkdown(val || '')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
)
|
||
|
|
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
editor?.destroy()
|
||
|
|
editor = null
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div ref="el"></div>
|
||
|
|
</template>
|