Skip to content

Instantly share code, notes, and snippets.

@ExploreHW
Last active May 16, 2023 16:19
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ExploreHW/7b2b6f04e8124292956b4832e643c80b to your computer and use it in GitHub Desktop.
Save ExploreHW/7b2b6f04e8124292956b4832e643c80b to your computer and use it in GitHub Desktop.
CKEditor with React and Typescript
"@ckeditor/ckeditor5-build-classic": "^19.0.0",
"@ckeditor/ckeditor5-react": "^2.1.0",
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);
}}
/>
);
}
}
//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;
}
@dilincoln
Copy link

dilincoln commented Jul 29, 2021

Use this specific version to work:

{
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "19.0.0",
    "@ckeditor/ckeditor5-react": "2.1.0",
  }
}

@vanhuydotcom
Copy link

I did, and I still can not use it

@ramesh018
Copy link

how to using CKEditor with React js and Typescript in functional components exmples

@panchicore
Copy link

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