Skip to content

Instantly share code, notes, and snippets.

@carmelodevuz
Last active July 25, 2023 07:01
Show Gist options
  • Save carmelodevuz/edb57b5ee6160034fac0c93a75f5476e to your computer and use it in GitHub Desktop.
Save carmelodevuz/edb57b5ee6160034fac0c93a75f5476e to your computer and use it in GitHub Desktop.
Metronic 8 React CKEditor integration
// ! 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)
}}
/>
)
}
@himanshubabariya
Copy link

dsfsdf

@mstfygci
Copy link

mstfygci commented Apr 17, 2023

Thanks for nothing

@sush1l
Copy link

sush1l commented Jul 25, 2023

cdxcvds

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment