Question

我在前端技术方面非常（非常）新颖，特别是React和Typescript。

尝试做一个简单的事情是使用React组件https://github.com/ckeditor/ckeditor5

时，我的问题来了

因此，我转到示例并找到了它：

https://github.com/ckeditor/ckeditor5-react-example/blob/master/package.json

我正在尝试将 ckeditor 包含在 ClassicEditor 模块中

所以我将此添加到了package.json

"@ckeditor/ckeditor5-editor-classic": "^12.0.0",
"@ckeditor/ckeditor5-essentials": "^11.0.0",
"@ckeditor/ckeditor5-paragraph": "^11.0.0",
"@ckeditor/ckeditor5-react": "^1.1.2",

并在https://github.com/ckeditor/ckeditor5-react-example/blob/master/src/App.js

处检查实现

我需要为打字稿导入模块定义（我想）

import CKEditor from '@ckeditor/ckeditor5-react';

// NOTE: We use editor from source (not a build)!
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

所以，这部分有这个怪异的注解，但是发生在我的项目中不起作用（说缺失并且找不到）

您知道我还能怎么做吗？我尝试删除/src/classiceditor部分，但仍然丢失。

我做了一个npm install，并且可以在其中看到package.json和classiceditor代码，还有更多... / src / classiceditor 文件夹实际上与{{1 }}

知道我缺少什么吗？

Answer 1

对于那些仍在寻找更好解决方案的人，我从 Github 找到了这个解决方案。

您需要创建文件 ./types/ckeditor/index.d.ts 并写入

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

Answer 2

@ ckeditor / ckeditor5-react似乎不提供任何类型，并且没有在DefinitelyTyped中键入，因此您不能轻易在打字稿中使用它。

如果要对类型使用@ckeditor/ckeditor5-react，则必须自己输入。

示例：

在您的项目中，声明文件types/@ckeditor/ckeditor5-react/index.d.ts。在此文件中添加此类型（非常不完整）：

declare module '@ckeditor/ckeditor5-react' {
    export default class Ckeditor extends React.Component {
        constructor({disabled}: {disabled?: boolean}) // this part needs to be fullfilled with your needs
    }
}

这样，您将可以通过以下方式在您的react应用中使用CKeditor：

export function UseCKE() {
    return <Ckeditor disabled={true}/>;
}

Answer 3

对于其他遇到相同问题的人，您也可以尝试声明文件类型/@ckeditor/index.d.ts并添加以下内容

declare module '@ckeditor/*' {
  const classes: any;
  export default classes;
}

在处理@ckeditor/ckeditor5-build-classic

时，接受的答案对我不起作用

如何找到我的打字稿/反应模块的声明？

3 个答案: