how to use function from parent of component TinyMCE init

Question

I have created an upload function inside my parent. When initializing tinymce I have bound the [init] of my component to the loadConfig() function.

 <editor [(ngModel)]="data" [init]="loadConfig()"></editor>

loadConfig contains the following images_upload_handler:

images_upload_handler: function (blobInfo, success, failure) {
        const code = this.upload(blobInfo);
        if (code !== 0) {
          success(code);
        } else {
          failure(code);
        }
      }

However now when I try to upload something it complains that upload is undefined. I assume that this is the case because the scope of this changed.

I tried listening for the (onInit) event, then replace the function reference with the following code

event.editor.settings.images_upload_handler = this.Upload;

However now it's complaining that this.apiService is undefined, because I think its still not using the right scope.

I have thought about using an XMLHttpRequest(), but I'm missing security tokes to use that. Also I prefer to use the apiService I created. How do I use the images_upload_handler without losing the scope to my apiService?

Answer 1

In the end, I solved this by changing the function to an Arrow function. An arrow function does not have its own bindings to this or super.

images_upload_handler: (blobInfo, success, failure) => {
        const code = this.upload(blobInfo);
        if (code !== 0) {
          success(code);
        } else {
          failure(code);
        }
      }