Rakul Agn
Rakul Agn

Reputation: 43

Unable to use Ckeditor in React Typescript

'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.
Try npm i --save-dev @types/ckeditor__ckeditor5-react if it exists or add a new declaration (.d.ts) file containing declare module '@ckeditor/ckeditor5-react';

Is there any official support of CKEditor in tsx ?

Upvotes: 0

Views: 4642

Answers (2)

Max Fontani
Max Fontani

Reputation: 11

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 };
}

Upvotes: 1

William S. Takayama
William S. Takayama

Reputation: 140

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 };
}

Upvotes: 2

Related Questions