'CKEditor' is declared but its value is never read.ts(6133) Could not find a declaration file for module '@ckeditor/ckeditor5-react'. '/ProjectNameUnknown/node_modules/@ckeditor/ckeditor5-react/dist/ckeditor.js' implicitly has an 'any' type.
Trynpm i --save-dev @types/ckeditor__ckeditor5-reactif it exists or add a new declaration (.d.ts) file containingdeclare module '@ckeditor/ckeditor5-react';
Is there any official support of CKEditor in tsx ?
At the moment they don't have an official support for typescript while using CKEditor5, which is really bad in my opnion. But I know this is an old issue, you can check it more here:
Whether you're facing some errors try creating a file ckeditor.d.ts and adding this:
declare module '@ckeditor/ckeditor5-react' {
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Event from '@ckeditor/ckeditor5-utils/src/eventinfo'
import { EditorConfig } from '@ckeditor/ckeditor5-core/src/editor/editorconfig'
import * as React from 'react';
const CKEditor: React.FunctionComponent<{
disabled?: boolean;
editor: typeof ClassicEditor;
data?: string;
id?: string;
config?: EditorConfig;
onReady?: (editor: ClassicEditor) => void;
onChange?: (event: Event, editor: ClassicEditor) => void;
onBlur?: (event: Event, editor: ClassicEditor) => void;
onFocus?: (event: Event, editor: ClassicEditor) => void;
onError?: (event: Event, editor: ClassicEditor) => void;
}>
export { CKEditor };
}
For me, the following declaration worked. Make sure to install the imported modules.
import Event from '@ckeditor/ckeditor5-utils/src/eventinfo';
import ClassicEditor from '@types/ckeditor__ckeditor5-editor-classic/src/classiceditor';
import { EditorConfig } from '@types/ckeditor__ckeditor5-core/src/editor/editorconfig';
declare interface CKEditorProps {
disabled?: boolean;
editor: ClassicEditor;
data?: string;
id?: string;
config?: EditorConfig;
onReady?: (editor: ClassicEditor) => void;
onChange?: (event: Event, editor: ClassicEditor) => void;
onBlur?: (event: Event, editor: ClassicEditor) => void;
onFocus?: (event: Event, editor: ClassicEditor) => void;
onError?: (event: Event, editor: ClassicEditor) => void;
}
declare module '@ckeditor/ckeditor5-react' {
const CKEditor: React.FC<CKEditorProps>;
export { CKEditor };
}
declare module 'ckeditor5-custom-build/build/ckeditor' {
const Editor: ClassicEditor;
export { Editor };
}
