将 ckeditor 与 Typescript 结合使用

Question

在将 ckeditor 与 typescript 一起使用时，我遇到了麻烦。

我已经使用

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

安装了它

并使用以下方法导入它：

import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

但是，我收到以下错误：

TS7016: Could not find a declaration file for module '@ckeditor/ckeditor5-react'. '/Users/yifanwang/code/clideo-clone/node_modules/@ckeditor/ckeditor5-react/dist/ckeditor.js' implicitly has an 'any' type.

我尝试在我的项目中添加一个

typing.d.ts

文件：

declare module "@ckeditor/ckeditor5-react" {
    const CKEditor: any;
    export default CKEditor;
}
  
declare module "@ckeditor/ckeditor5-build-classic" {
    const ClassicEditor: any;
    export = ClassicEditor;
}

但是效果并不好。

我该如何修复它？

Answer 1

npm i --save-dev @types/ckeditor__ckeditor5-react

并且在文件夹node_modules中，您将在

@types

中找到。并在此文件夹中创建一个子文件夹。它的名称是

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

对于那些仍然感兴趣的人，这里已经回答了： https://stackoverflow.com/a/65975437/19121380

链接到此解决方案> https://github.com/ckeditor/ckeditor5-react/issues/140#issuecomment-655453105

只需创建一个文件

./types/ckeditor/index.d.ts

，其中包含：

declare module '@ckeditor/ckeditor5-react';
declare module '@ckeditor/ckeditor5-build-classic';