tui-editor (TOAST UI Editor) vue3 <script setup> 적용법

🥑tui-editor 라이브러리 설치

https://github.com/nhn/tui.editor

GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

npm install --save @toast-ui/vue-editor

🥑 Vue3 프로젝트에 tui-editor구성하기

import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';

🥑 tui-editor 사용 이유

 처음으로 HTML Editor를 사용한건 Ck-editor였는데 tui-editor가 설치나 사용법에 있어 더 간단하고 명료하기 때문에 사용하게 되었습니다.

 

🥑tui-editor 적용 방법

tui-editor가 기존 vue2까지는 지원을 했엇으나 vue3부터는 vue3와 함께 Tui.Editor를 사용하는 경우 직접 래퍼 해야합니다.

 

<template>
		// ref사용하여 에디터 value 적용
		<div ref="editor" />		
        //작성한 내용 불러와서 html 적용
        <div v-html="testHtml.value"></div>
</template>

<scipt setup>
import { onMounted, ref, watch, onUnmounted } from 'vue';
import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';

const props = defineProps({
	modelValue: {
		type: String,
		required: false,
		default: '',
	},
});

const emit = defineEmits(['update:modelValue']);
const editor = ref();
const editorValid = ref();
const testHtml = ref();

//마운트될때 Editor 생성
onMounted(() => {
		editorValid.value = new Editor({
			el: editor.value,
			height: '500px',
            //'wysiwyg', 'markdown' 택 1
			initialEditType: 'wysiwyg',
			events: {
				change: () => emit('update:modelValue', editorValid.value.getMarkdown()),
			},
		});
});

//작성한 내용 불러와서 html 적용
const testValid = (e) => {
	testHtml.value = editorValid.value.getHTML()
};
</script>

주의할 점은 onMounted 될 때 editor를 적용하므로 적용할 해당 elements가 Hide되어있을시 에러 발생