无法在React类型记录中使用Ckeditor

Question

“ckeditor”是声明的，但它的值永远不是read.ts(6133)无法找到模块‘@ckeditor/ckeditor 5-react’的声明文件。'/ProjectNameUnknown/node_modules/@ckeditor/ckeditor5-react/dist/ckeditor.js‘隐式地具有“任意”类型。 如果npm i --save-dev @types/ckeditor__ckeditor5-react存在，可以尝试它，或者添加一个包含declare module '@ckeditor/ckeditor5-react';的新声明(.d.ts)文件

是否有任何官方支持的CKEditor在tsx？

Answer 1

目前，他们在使用CKEditor5时并没有正式支持打字稿，这在我的观点中是非常糟糕的。但我知道这是个老问题，你可以多看看这里

无论您是否面临一些错误，请尝试创建一个文件ckeditor.d.ts并添加以下内容：

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

Answer 2

对我来说，下面的声明奏效了。确保安装导入的模块。

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