Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »


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;
  • No labels