如何在 React 和 TypeScript 中访问 TinyMCE 定义的“编辑器”类型？

Question

我试图弄清楚如何访问 NPM 模块中定义的类型。

\n

TinyMCE 有一个名为 React 组件的编辑器Editor，它包含一个onInit带有两个参数的方法，一个事件和编辑器本身，也是一种Editor类型，但与组件不同。

\n

所以我Editor通过执行以下操作从库中导入组件

\n

import { Editor as TinyMCEEditor } from \'@tinymce/tinymce-react\';\n

\n

我将编辑器定义如下......

\n

<TinyMCEEditor\n   apiKey="asdf"\n   onInit={(evt, editor) => onInitCallBack(evt, editor)}\n   ...\n/>\n

\n

然后我尝试定义回调以匹配预期类型

\n

const onInitCallBack = (_, editor: Editor) => {\n   ...\n};\n

\n

Editor奇怪的是，当鼠标悬停在上面时，它能够识别类型。

\n

(parameter) editor: Editor\n

\n

以及事件的类型：

\n

(parameter) evt: {\n    readonly type: string;\n    readonly target: any;\n    readonly isDefaultPrevented: () => boolean;\n    readonly preventDefault: () => void;\n    ...etc\n}\n

\n

但是当onInitCallBack我尝试定义类型时Editor，它说找不到名称“Editor”：

\n

import { Editor as TinyMCEEditor } from \'@tinymce/tinymce-react\';\n

\n

我需要做什么才能让它看到EditorNPM 包中定义的类型？

\n

如果我尝试用作TinyMCEEditor类型，则会出现以下错误。

\n

<TinyMCEEditor\n   apiKey="asdf"\n   onInit={(evt, editor) => onInitCallBack(evt, editor)}\n   ...\n/>\n

\n

Answer 1

您混淆了 React 组件编辑器和 tinymce 编辑器 - 请注意它们具有相同的名称。当然你需要像...

import { Editor } from '@tinymce/tinymce-react';
import { Editor as TinyMCEEditor } from 'tinymce';

然后

const editorRef = useRef<TinyMCEEditor | null>(null);

和...

<Editor
   onInit={(evt, editor) => editorRef.current = editor}
   ...
/>

虽然我可能搞砸了这里的语法......