Vue v3 Integration Example

Note

Folder structures vary between projects, so refer to this guide and adapt it appropriately for your project.

1. Place the Synap Editor Files

Place the Synap Editor package in an appropriate location under your project's src/assets folder.

Examples:

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

2. Create the Synap Editor Component

Create a component named SynapEditorComponent.vue that creates the Synap Editor.

In this component, define the config, html, and eventListener needed to initialize the editor.

If different values may need to be applied depending on the situation, write the component so that it accepts config, html, eventListener, etc. via 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. Use the Component You Created

Use SynapEditorComponent.vue wherever you want to mount the 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>