How to callback a function in JS

Question

I am building a custom plugin for Froala (https://www.froala.com/wysiwyg-editor):

// Custom plugin
(function(FroalaEditor) {
  // Add an option for your plugin.
  FroalaEditor.DEFAULTS = Object.assign(FroalaEditor.DEFAULTS, {
     myOption: false
  });

  // Define the plugin.
  // The editor parameter is the current instance.
  FroalaEditor.PLUGINS.myPlugin = function(editor) {
    // Private variable visible only inside the plugin scope.
    var private_var = "My awesome plugin";

    // Private method that is visible only inside plugin scope.
    function _privateMethod() {
      console.log(private_var);
    }

    // Public method that is visible in the instance scope.
    function publicMethod() {
      console.log(_privateMethod());
    }

    // The start point for your plugin.
    function _init() {
      // You can access any option from documentation or your custom options.
      console.log(editor.opts.myOption);

      // Call any method from documentation.
      // editor.methodName(params);

      // You can listen to any event from documentation.
      // editor.events.add('contentChanged', function (params) {});
    }

    // Expose public methods. If _init is not public then the plugin won't be initialized.
    // Public method can be accessed through the editor API:
    // editor.myPlugin.publicMethod();
    return {
      _init: _init,
      publicMethod: publicMethod
    };
  };
})(FroalaEditor);

I then have a button plugin with a callback, which I want to call the plugin from:

  FroalaEditor.DefineIcon('alert', {NAME: 'info', SVG_KEY: 'help'});
  FroalaEditor.RegisterCommand('alert', {
    title: 'Hello',
    focus: false,
    undo: false,
    refreshAfterCallback: false,
    callback: function () {
      this.myPlugin();
    }
  });

However I then get the error: this.myPlugin is not a function.

Where am I going wrong?

https://stackoverflow.com/questions/4195970/what-does-this-mean — messerbill, Aug 24 '19 at 11:43
you are using `this` keyword wrongly. have a look at the link above — messerbill, Aug 24 '19 at 11:43
@iwaduarte thanks, your suggestion still results in ` Cannot read property 'myPlugin' of undefined` — alias51, Aug 24 '19 at 11:45
@messerbill, thanks I read the link. This is vanilla JS, not jQuery but I am unfortunately still at a loss as to the syntax I am missing. Could you point me any further in the right direction? I assume I should not use `this` at all? — alias51, Aug 24 '19 at 11:46
When callback is called the function will call: FroalaEditor.callback(). The this should point to the object FroalaEditor right? — iwaduarte, Aug 24 '19 at 11:48
the answer in the link i posted also tells about vanilla js at the bottom. Explaning `this` in javascript cannot be done in this comment. It depends on how you make use of it (inside of a usual function or an arrow function like `() => {}` — messerbill, Aug 24 '19 at 11:48
Could console log this? It should be different from the window object or not ? — iwaduarte, Aug 24 '19 at 11:49
@messerbill Thanks, yes I unfortunately just don't understand that answer as it's difficult for me to translate it to this use case. — alias51, Aug 24 '19 at 11:50
all i wanna say is that you should get familiar with the usage of `this` in javascript. The link i posted is just an example which is useful in my eyes. https://www.google.com/search?ei=RyVhXZfzK4nEwQLfwK34CQ&q=this+in+javascript — messerbill, Aug 24 '19 at 11:54
Thanks everyone. It appears the correct answer is `FroalaEditor.PLUGINS.myPlugin();` — alias51, Aug 24 '19 at 11:58

score 1 · Accepted Answer · answered Aug 24 '19 at 11:47

1

The this keyword in Javascript is prone to change when used in a callback. Either bind your function such that this is locked to the current scope, or use another variable in scope to keep track of it.

function myCallback() {
    console.log(this.something);
}
let safeCallback = myCallback.bind(this);

OR

let that = this;
function myCallback() {
    console.log(that.something);
}

answered Aug 24 '19 at 11:47

Ted Brownlow

1,103
9
15

Thanks Ted, how in the question example would I apply this approach? – alias51 Aug 24 '19 at 11:48

How to callback a function in JS

1 Answers1