Vue v3 통합 예제

참고

폴더 구조는 프로젝트마다 다르므로, 이 가이드를 참고하여 프로젝트에 맞게 적절히 적용합니다.

1. Synap Editor 파일 배치

프로젝트의 src/assets 폴더 아래 원하는 위치에 Synap Editor 패키지를 둡니다.

예시:

src/assets/synapeditor
src/assets/SynapEditor
src/assets/scripts/synapeditor
src/assets/scripts/SynapEditor
...

2. Synap Editor 컴포넌트 생성

SynapEditorComponent.vue라는 이름의 컴포넌트를 생성하여 Synap Editor를 만듭니다.

이 컴포넌트에서 에디터를 초기화하는 데 필요한 config, html, 그리고 eventListener를 정의합니다.

상황에 따라 다른 값을 적용해야 할 수 있는 경우, 컴포넌트가 config, html, eventListener 등을 props로 받아들이도록 작성합니다.

<!-- SynapEditorComponent.vue -->
<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, // Set the license.
      // Add other settings as needed. If necessary, accept values via props so the parent can configure them.
    };
    const html = ''; // Set the HTML shown when the editor is initialized. Accept via props if needed.
    const eventListener = {
      initialized: (event) => {
        // Event listener triggered when the editor has finished initializing.
        // Put any work that should run after initialization here.
        console.log('Editor initialized: ', event);
      }
    };
    this.editorInstance = new SynapEditor(this.editorId, config, html, eventListener);
  },
  beforeUnmount() {
    // Release 3.1.0 and above
    // Cleanup function that releases resources used by the editor by removing
    // event listeners and references, preventing memory leaks.
    if (this.editorInstance) {
      this.editorInstance.destroy();
      this.editorInstance = null;
    }
  }
});
</script>

3. 생성한 컴포넌트 사용하기

SynapEditorComponent.vue를 Synap Editor를 마운트하고 싶은 곳 어디에서나 사용합니다.

<!-- App.vue -->
<script setup>
import SynapEditorComponent from './components/SynapEditorComponent.vue'; // Import SynapEditorComponent
</script>

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