프로젝트마다 폴더 구조가 다를 수 있으므로, 가이드를 참고하여 프로젝트에 맞도록 적절히 적용해주세요.

<template>
    <div :id="editorId"></div>
</template>

<script>
import { defineComponent } from 'vue';
import license from '../assets/scripts/synapeditor/license.json';
import '../assets/scripts/synapeditor/synapeditor.min.js';
import '../assets/scripts/synapeditor/synapeditor.min.css';

export default defineComponent({
    props: {
        editorId: {
            type: String
        }
    },
    mounted() {
        const config = {
            'editor.license': license, // 라이센스를 설정합니다.
            // 기타 설정을 추가합니다. 필요에 따라 prop을 통해 값을 받아서 설정할 수 있도록 처리합니다.
        };
        const html = ''; // 에디터 초기화시 표시할 html을 설정합니다. 필요에 따라 prop을 통해 값을 받아서 설정할 수 있도록 처리합니다.
        const eventListener = {
            initialized:  (event) => {
				// 에디터가 초기화 되었을 때 실행되는 이벤트 리스너입니다. 
				// 에디터가 초기화 되면 수행되어야 하는 작업을 작성합니다.
                console.log('에디터 초기화 완료: ', event);
            }
        };
        this.editorInstance = new SynapEditor(this.editorId, config, html, eventListener);
    },
	beforeUnmount() {
		// 릴리즈 3.1.0 이상
		// 에디터에서 사용한 리소르를 정리하는 함수로 이벤트와 참조를 제거해 메모리 누수를 방지합니다.
        if (this.editorInstance) {
            this.editorInstance.destroy();
            this.editorInstance = null;
        }
    }
});
</script>

<script setup>
import SynapEditorComponent from './components/SynapEditorComponent.vue'; // SynapEditorComponent 가져오기
</script>

<template>
  <main>
    <h2>Synap Editor</h2>
    <SynapEditorComponent editorId="synapeditor" />
  </main>
</template>