Table of Contents |
---|
...
Synap Editor 컴포넌트 생성
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
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> ); } |
생성한 컴포넌트 사용
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
import SynapEditorComponent from './components/SynapEditorComponent'; function App() { return ( <> <h2>Synap Editor</h2> <SynapEditorComponent id="synapeditor" /> </> ); } export default App; |
...