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