使用 React Typescript 的 Froala 编辑器插件

问题描述

我正在尝试使用包 react-froala-wysiwyg 将自定义插件添加到我的 React 应用程序中的 Froala 编辑器。我正在关注有关如何添加自定义弹出窗口/插件的 this 教程。我遇到的问题是应用程序是用打字稿编写的，并且包的依赖项 - froala-editor - 不是绝对键入的，所以我必须根据我发现的类型定义 {{3} }.

到目前为止，我已经能够将缺失的属性添加到类型定义中，但是在处理应该访问自定义插件的函数时它变得更加复杂。它是这样的......我有一个名为 smartFieldplugin 的插件，它具有三个方法 initPopup、showPopup 和 hidePopup。我创建了一个工具栏按钮来访问插件，如下所示：

FroalaEditor.DefineIcon('smartFieldIcon',{ NAME: 'Smart Field',template: 'text'})
FroalaEditor.RegisterCommand('smartFieldButton',{
  title: 'Insert Smart Field',icon: 'smartFieldIcon',undo: true,focus: false,plugin: 'smartFieldplugin',callback: function() {
    // this.smartFieldplugin.showPopup();
    FroalaEditor.PLUGINS.smartFieldplugin.showPopup();
    
  }
});

这会引发错误：property 'showPopup' does not exist on type '(editor: FroalaEditor) => CustomPlugin'

更多上下文CustomPlugin和PLUGINS在类型定义文件中定义如下：

  export interface CustomPlugin {
    _init?(): void;
    showPopup?(): void;
    hidePopup?(): void;
  }

  export const PLUGINS: GenericObject<(editor: FroalaEditor) => CustomPlugin>;

  export type GenericObject<T = any> = { [key: string]: T };

我想知道是否有人知道我为什么会看到此错误、解决该错误的简单方法，或者使用 react-froala-wysiwyg 避免输入问题的方法。谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）