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

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

export default defineComponent({
    props: {
        id: {
            type: String
        }
    },
    mounted() {
        const config = {
            'editor.license': { 'key': ['U2FsdGVkX19Vs74tRTLU2PwfP0zqDRbV39SIyZCSrCfWh8FKOxtR9tArgt3XTJ5gprND+LyqlwuTodf4lp9LrLcL4nye27pz7IC4F6a6PB+PsP5WZVT/b1O+SXZPZGWv5QayR+N0USPLIO2O+g/UJaZX+hVnQOglmqBODbv969u5NDOA5RvnQZY3O5LKL2dj'] },
}, // 라이센스를 설정합니다.
           'editor.size.width': '800px',
            'editor.size.height': '500px' // 기타 설정을 추가합니다. 필요에 따라 prop을 통해 값을 받아서 설정할 수 있도록 처리합니다.
        };
        const html = ''; // 에디터 초기화시 표시할 html을 설정합니다. 필요에 따라 prop을 통해 값을 받아서 설정할 수 있도록 처리합니다.
        const eventListener = {
            initialized:  (event) => {
				// 에디터가 초기화 되었을 때 실행되는 이벤트 리스너입니다. 
				// 에디터가 초기화 되면 수행되어야 하는 작업을 작성합니다.
                console.log('에디터 초기화 완료: ', event);
            }
        };
        new SynapEditor(this.id, config, html, eventListener);
    }
});
</script>