Metronic 8 React CKEditor integration

Readme.md

!!! Check out the official documentation of CKEditort first https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/react.html.

1. Run the command: yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
2. See CKEditor usage for your component in the CKExampleComponent.tsx file below

CKExampleComponent.tsx

// ! CKEditor doesn't have a port to the Typescript version, cause of that we use @ts-ignore a lot here:

// @ts-ignore
import {CKEditor} from '@ckeditor/ckeditor5-react'
// @ts-ignore
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

const CKExampleComponent = () => {
  return (<CKEditor
          editor={ClassicEditor}
          data='<p>Hello from CKEditor 5!</p>'
          onReady={(editor: unknown) => {
            // You can store the "editor" and use when it is needed.
            console.log('Editor is ready to use!', editor)
          }}
          onChange={(event: Event, editor: unknown) => {
            // @ts-ignore
            const data = editor.getData()
            console.log({event, editor, data})
          }}
          onBlur={(_: Event, editor: unknown) => {
            console.log('Blur.', editor)
          }}
          onFocus={(_: Event, editor: unknown) => {
            console.log('Focus.', editor)
          }}
        />
  )
}