Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

...

Synap Editor 컴포넌트 생성

Code Block
languagejs
themeEmacs
titleSynapEditorComponent.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>
    );
}


생성한 컴포넌트 사용

Code Block
languagejs
themeEmacs
titleApp.js
import SynapEditorComponent from './components/SynapEditorComponent';

function App() {
    return (
        <>
            <h2>Synap Editor</h2>
            <SynapEditorComponent id="synapeditor" />
        </>
    );
}

export default App;

...