Table of Contents |
---|
...
Info | ||
---|---|---|
| ||
프로젝트마다 폴더 구조가 다를 수 있으므로, 가이드를 참고하여 프로젝트에 맞도록 적절히 적용해주세요. |
Synap Editor 파일 배치
- 사이냅 에디터 패키지를 프로젝트의 src/assets 폴더 아래 적절한 위치에 배치합니다.
- 예시)
- src/assets/synapeditor
- src/assets/SynapEditor
- src/assets/scripts/synapeditor
- src/assets/scripts/SynapEditor
- ...
Synap Editor 컴포넌트 생성
- 사이냅 에디터를 생성하는 컴포넌트인 SynapEditorComponent.vue 를 작성합니다.
- 사이냅 에디터를 초기화 할 때 설정해야 하는 config, html, eventListener 를 컴포넌트에 작성합니다.
- 상황에 따라 다르게 값을 적용해야 한다면 prop을 통해 config, html, eventListener 등의 값을 받아서 설정할 수 있도록 작성합니다.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<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, // 라이센스를 설정합니다.
// 기타 설정을 추가합니다. 필요에 따라 prop을 통해 값을 받아서 설정할 수 있도록 처리합니다.
};
const html = ''; // 에디터 초기화시 표시할 html을 설정합니다. 필요에 따라 prop을 통해 값을 받아서 설정할 수 있도록 처리합니다.
const eventListener = {
initialized: (event) => {
// 에디터가 초기화 되었을 때 실행되는 이벤트 리스너입니다.
// 에디터가 초기화 되면 수행되어야 하는 작업을 작성합니다.
console.log('에디터 초기화 완료: ', event);
}
};
new SynapEditor(this.editorId, config, html, eventListener);
}
});
</script> |
생성한 컴포넌트 사용
- 사이냅 에디터를 생성할 곳에 SynapEditorComponent.vue 를 사용합니다.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<script setup>
import SynapEditorComponent from './components/SynapEditorComponent.vue'; // SynapEditorComponent 가져오기
</script>
<template>
<main>
<h2>Synap Editor</h2>
<SynapEditorComponent editorId="synapeditor" />
</main>
</template> |