无法在使用 React froala 编辑器时捕获事件

Question

我正在使用 react-froala-wysiwyg 中的 FroalaEditor，但我无法捕捉到任何事件。我在我的事件中使用控制台语句，但它没有显示任何控制台。 可能看起来我的事件没有被捕获。我使用了插件字符计数器。它工作正常，但当我更新任何字符插件时，任何字符插件工作正常，字符数得到更新，插件工作正常，但我无法捕捉到它的事件。

以下是我的代码片段：

import React from "react";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import FroalaEditor from "react-froala-wysiwyg";
import "froala-editor/js/plugins.pkgd.min.js";
import "froala-editor/js/froala_editor.pkgd.min.js";

// Require Editor CSS files.
import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";
import { Alert } from "antd";

class FroalaEditorView extends React.Component {
  formRef = React.createRef();
  constructor(props) {
    super(props);
    this.state = {
      froalaEditorValue: ' '
    };
  }

  config = {
    key:
      "froala-key",
    toolbarSticky: false,
    events: {
      'froalaEditor.initialized' : (e, editor)=> {
        this.froalaInstance = editor;
        console.log('khadija')
      },
      'focus': function(e, editor) {
        console.log("sss");
      },
      "charCounter.update": function() {
        // Do something here.
        // this is the editor instance.
        Alert.alert("khadija");
        console.log("khadija");
        debugger;
      },

      "image.inserted": function($img, response) {
        // Image was inserted in the editor.
        debugger;
        console.log("khadija");
      },

      "image.beforeUpload": files => {
        debugger;
        let editor = this;
        if (files.length) {
          // Create a File Reader.
          let reader = new FileReader();
          debugger;
          // Set the reader to insert images when they are loaded.
          reader.onload = function(e) {
            let result = e.target.result;
            console.log("result", result);
            debugger;
            editor.image.insert(result, null, null, editor.image.get());
            debugger;
          };
          // Read image as base64.
          let pic = reader.readAsDataURL(files[0]);
          console.log("pic", pic);
          debugger;
        }
        editor.popups.hideAll();
        // Stop default upload chain.
        return false;
      }
    }
  };

  getEditorValue = value => {
    debugger;
    this.setState({ froalaEditorValue: value });
  };

  render() {
    return (
      <div>
        <FroalaEditor
          config={this.config}
          model={this.state.froalaEditorValue}
          onModelChange={this.getEditorValue}
        />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {};
};

const mapDispatchToProps = dispatch => ({});
FroalaEditorView = connect(
  mapStateToProps,
  mapDispatchToProps
)(FroalaEditorView);

export default withRouter(FroalaEditorView);