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