raonkeditor-react/samples/component-events/src/RaonkEditor.jsx

React component for RAON K Editor

/* eslint-disable react/prop-types */

import * as React from 'react';
import { RaonkEditor } from 'raonkeditor-react';
/**
 * `RaonkEditor` component accepts handlers for all component events, e.g. `creationComplete` -> `onCreationComplete`.
 *
 * `RaonkEditor` component ensures referential equality between renders for event handlers.
 * This means that first value of an event handler will be memoized and used through the lifecycle of `RaonkEditor` component.
 */
function RaonkEditorCmp( { pushEvent, uniqueName } ) {
	const handleBeforeLoad = () => {
		pushEvent( 'beforeLoad', '--' );
		console.log( {
			eventName: 'handleBeforeLoad',
			componentName: uniqueName
		});
	};

	const handleNamespaceLoaded = () => {
		pushEvent( 'namespaceLoaded', '--' );
		console.log( {
			eventName: 'handleNamespaceLoaded',
			componentName: uniqueName
		});
	};

	const handleLoaded = (eventParams) => {
		pushEvent( 'loaded', eventParams.eventInfo.componentName );
		console.log( {
			eventName: 'handleLoaded',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});
	};

	const handleCreationComplete = (eventParams) => {
		pushEvent( 'creationComplete', eventParams.eventInfo.componentName );
		console.log( {
			eventName: 'handleCreationComplete',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});
	};
	
	const handleDestroy = (eventParams) => {
		pushEvent( 'destroy', eventParams.eventInfo.componentName );
		console.log( {
			eventName: 'handleDestroy',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});
	};

	return (
		<RaonkEditor
			debug={true}
			id={uniqueName}
			
			runtimes='html5'
			config={{ Lang: 'ko-kr', Width: '100%', Height: '250px', DevelopLangage: 'NONE' }}
			componentUrl="/raonkeditor/js/raonkeditor.js"

			onBeforeLoad={handleBeforeLoad}
			onNamespaceLoaded={handleNamespaceLoaded}
			onLoaded={handleLoaded}
			
			onCreationComplete={handleCreationComplete}
 			onDestroy={handleDestroy}
		/>
	);
}

export default RaonkEditorCmp;