React v18 통합 예제

참고

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

1. Synap Editor 파일 배치

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

예시:

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

2. Synap Editor 컴포넌트 생성

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

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

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

// 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 // 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);
      }
    };

    editorInstance = new SynapEditor(editorId, config, html, eventListener);

    // Release 3.1.0 and above
    // Cleanup function that releases resources used by the editor by removing
    // event listeners and references, preventing memory leaks.
    return () => {
      if (editorInstance) {
        editorInstance.destroy();
        editorInstance = null;
      }
    }
  }, [editorId]);

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

export default SynapEditorComponent;

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

SynapEditorComponent.js를 Synap Editor를 마운트하고자 하는 곳 어디에서든 사용합니다.

// App.js
import SynapEditorComponent from './components/SynapEditorComponent'; // Import SynapEditorComponent

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

export default App;