Using ckeditor with Typescript

Question

我在使用ckeditor时遇到了麻烦。

我已经使用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。然后粘贴这段代码。

从'@ckeditor/ckedor5 -build-classic'导入ClassicEditor;从"@ckeditor/ckeditor5-utils/src/eventinfo"中导入事件从"@ckeditor/ckeditor5-core/src/editor/EditorConfig"导入{EditorConfig}import * as React from ' React ';const CKEditor: React.FunctionComponent<{禁用吗?:布尔;typeof ClassicEditor;数据?:字符串;id吗?:字符串;配置吗?: EditorConfig;onReady吗?:(editor: ClassicEditor) =>无效;onChange吗?:(event: event, editor: ClassicEditor) =>无效;元素失去焦点时?:(event: event, editor: ClassicEditor) =>无效;得到焦点?:(event: event, editor: ClassicEditor) =>无效;onError吗?:(event: event, editor: ClassicEditor) =>无效;}祝辞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';