Synap Editor 컴포넌트 생성
- 사이냅 에디터를 생성하는 컴포넌트인 SynapEditorComponent.vue 를 작성합니다.
- 사이냅 에디터를 초기화 할 때 설정해야 하는 config, html, eventListener 를 컴포넌트에 작성합니다.
- 상황에 따라 다르게 값을 적용해야 한다면 prop을 통해 config, html, eventListener 등의 값을 받아서 설정할 수 있도록 작성합니다.
SynapEditorComponent.vue
<template> <div :id="editorId"></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: { editorId: { type: String } }, mounted() { const config = { 'editor.license': {}, // 라이센스를 설정합니다. // 기타 설정을 추가합니다. 필요에 따라 prop을 통해 값을 받아서 설정할 수 있도록 처리합니다. }; const html = ''; // 에디터 초기화시 표시할 html을 설정합니다. 필요에 따라 prop을 통해 값을 받아서 설정할 수 있도록 처리합니다. const eventListener = { initialized: (event) => { // 에디터가 초기화 되었을 때 실행되는 이벤트 리스너입니다. // 에디터가 초기화 되면 수행되어야 하는 작업을 작성합니다. console.log('에디터 초기화 완료: ', event); } }; new SynapEditor(this.editorId, config, html, eventListener); } }); </script>
생성한 컴포넌트 사용
- 사이냅 에디터를 사용할 곳에 생성한 컴포넌트 SynapEditorComponent.vue 를 사용합니다.
App.vue
<script setup> import SynapEditorComponent from './components/SynapEditorComponent.vue'; // SynapEditorComponent 가져오기 </script> <template> <main> <h2>Synap Editor</h2> <SynapEditorComponent editorId="synapeditor" /> </main> </template>