How to trigger functions in a component of Angular with TinyMce?

Question

Currently I am trying to let the editor of TinyMce trigger a local function when a button of it triggers 'onAction', but it does not accept any variable with 'this.'.

        onAction: function () {
          alert('Button clicked!');
          if (this.fileUpload) {
            this.fileUpload.nativeElement.click();
          }
          // Cannot use any function or variable with 'this.'
        }

While this is not triggering, this is triggering:

        onAction: this.postMessage()

But for some reason, this will trigger every time the component is initialized (and not clicked). The onAction is bonded with a button which supposed to be triggered only on click, but it doesn't work in that way.

Answer 1

This is because you are using function to declare your functions. The scope is now within that function. If you use arrow functions instead it will work.

So it would be:

onAction: () => {
      alert('Button clicked!');
      if (this.fileUpload) {
        this.fileUpload.nativeElement.click();
      }
    }

Note that you'll have to change the function where you create the button as well. Right now you probably have something like this from the TinyMCE documentation:

setup: function (editor) { 

You want to change that to an arrow function also:

setup: (editor) => {