사이냅 에디터 문서
Space shortcuts
Page tree
Skip to end of metadata
Go to start of metadata


참고

프로젝트마다 폴더 구조가 다를 수 있으므로, 가이드를 참고하여 프로젝트에 맞도록 적절히 적용해주세요.


Synap Editor 파일 배치

  • 사이냅 에디터 패키지를 프로젝트의 src 폴더 아래 적절한 위치에 배치합니다.
  • 예시)
    • src/synapeditor
    • src/SynapEditor
    • src/scripts/synapeditor
    • src/scripts/SynapEditor
    • ...


Synap Editor 컴포넌트 생성

  • 사이냅 에디터를 생성하는 컴포넌트인 SynapEditorComponent.js 를 작성합니다.
  • 사이냅 에디터를 초기화 할 때 설정해야 하는 config, html, eventListener 를 컴포넌트에 작성합니다.
  • 상황에 따라 다르게 값을 적용해야 한다면 prop을 통해 config, html, eventListener 등의 값을 받아서 설정할 수 있도록 작성합니다.


SynapEditorComponent.js
import { useEffect } from 'react';
import license from '../scripts/synapeditor/license.json';
import SynapEditor from '../scripts/synapeditor/synapeditor.min';
import '../scripts/synapeditor/synapeditor.min.css';

function SynapEditorComponent({ editorId }) {
    useEffect(() => {
        const config = {
            'editor.license': license // 라이센스를 설정합니다.
			// 기타 설정을 추가합니다. 필요에 따라 prop을 통해 값을 받아서 설정할 수 있도록 처리합니다.
        };
        const html = ''; // 에디터 초기화시 표시할 html을 설정합니다. 필요에 따라 prop을 통해 값을 받아서 설정할 수 있도록 처리합니다.
        const eventListener = {
            initialized: (event) => {
				// 에디터가 초기화 되었을 때 실행되는 이벤트 리스너입니다. 
				// 에디터가 초기화 되면 수행되어야 하는 작업을 작성합니다.
                console.log('에디터 초기화 완료: ', event);
            }
        };

        new SynapEditor(editorId, config, html, eventListener);
    }, [editorId]);

    return (
        <div id={editorId}></div>
    );
}

export default SynapEditorComponent;


생성한 컴포넌트 사용

  • 사이냅 에디터를 생성할 곳에 SynapEditorComponent.js 를 사용합니다. 


App.js
import SynapEditorComponent from './components/SynapEditorComponent'; // SynapEditorComponent 가져오기

function App() {
    return (
        <>
            <h2>Synap Editor</h2>
            <SynapEditorComponent editorId="synapeditor" />
        </>
    );
}

export default App;
  • No labels