Synap Editor 컴포넌트 생성
SynapEditorComponent.js
import { useEffect } from 'react'; import SynapEditor from '../editors/synapeditor/synapeditor.min'; import '../editors/synapeditor/synapeditor.min.css'; function SynapEditorComponent() { useEffect(() => { const config = { 'editor.license': {}, // 라이센스 설정 }; const html = ''; const eventListener = { initialized: () => { console.log('에디터 초기화 완료'); } }; new SynapEditor('synapeditor', config, html, eventListener); }, []); return ( <div id="synapeditor"></div> ); }
App.js 에서 생성한 컴포넌트 사용
App.js
import SynapEditorComponent from './components/SynapEditorComponent'; function App() { return ( <> <h2>Synap Editor</h2> <SynapEditorComponent /> </> ); } export default App;