Last active
May 16, 2023 16:19
-
-
Save ExploreHW/7b2b6f04e8124292956b4832e643c80b to your computer and use it in GitHub Desktop.
CKEditor with React and Typescript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"@ckeditor/ckeditor5-build-classic": "^19.0.0", | |
"@ckeditor/ckeditor5-react": "^2.1.0", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from "react"; | |
import CKEditor from '@ckeditor/ckeditor5-react'; | |
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; | |
export class RichTextEditor extends Component<any, any>{ | |
render() { | |
return ( | |
<CKEditor | |
editor={ClassicEditor} | |
data="<p>Hello from CKEditor 5!</p>" | |
onInit={(editor: any) => { | |
// You can store the "editor" and use when it is needed. | |
console.log('Editor is ready to use!', editor); | |
}} | |
onChange={(event: any, editor: any) => { | |
const data = editor.getData(); | |
console.log({ event, editor, data }); | |
}} | |
onBlur={(event: any, editor: any) => { | |
console.log('Blur.', editor); | |
}} | |
onFocus={(event: any, editor: any) => { | |
console.log('Focus.', editor); | |
}} | |
/> | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//credit goes to https://github.com/ckeditor/ckeditor5/issues | |
declare module "@ckeditor/ckeditor5-react" { | |
const CKEditor: any; | |
export default CKEditor; | |
} | |
declare module "@ckeditor/ckeditor5-build-classic" { | |
const ClassicEditor: any; | |
export = ClassicEditor; | |
} | |
I did, and I still can not use it
how to using CKEditor with React js and Typescript in functional components exmples
declare module '@ckeditor/ckeditor5-react' {
import * as React from 'react';
import { Editor } from '@ckeditor/ckeditor5-core';
export interface CKEditorProps {
editor: typeof Editor;
data?: string;
config?: object;
onChange?: (event: any, editor: any) => void;
onBlur?: (event: any, editor: any) => void;
onFocus?: (event: any, editor: any) => void;
}
const CKEditor: React.ComponentType<CKEditorProps>;
export default CKEditor;
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Use this specific version to work: