Synap Editor 컴포넌트 생성
SynapEditorComponent.vue
<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' }; const html = ''; const eventListener = { initialized: () => { console.log('에디터 초기화 완료'); } }; new SynapEditor(this.id, config, html, eventListener); } }); </script>
생성한 컴포넌트 사용
App.vue
<script setup> import SynapEditorComponent from './components/SynapEditorComponent.vue'; // SynapEditorComponent 가져오기 </script> <template> <main> <h2>Synap Editor</h2> <SynapEditorComponent id="synapeditor" /> </main> </template>