Angular2 plugin for redacting content

Question

Angular2 plugin for redacting content

I'm attempting to integrate Redactor with additional plugins, but I'm encountering an issue where the counter plugin displays 0 words and 0 characters after the page has loaded.

{
  words: 0, 
  characters: 0, 
  spaces: 0
}

To address this problem, I've tried using the "init" callback to call the count() method of the counter plugin as per the documentation:

$('#content').redactor({
  plugins: ['counter'],
  callbacks: {
    init: function()
    {
        this.counter.count();
    },
    counter: function(data)
    {
        console.log(data);
    }
  }
});

Everything appears fine without any compile errors in VSCode, but I'm receiving the following error in the console:

declare const $R: any;
...
...
$R('#editor', {
  plugins: [
    'counter',
    ...
  ],
  callbacks: {
    init: function() {
      this.counter.count();
    }
    counter: function(data: any) {
      console.log(data);
    }
  }
});

ERROR TypeError: Cannot read property 'count' of undefined
at App.changed (editor.component.ts:55)
at F._loop (scripts.bundle.js:2741)
at F.trigger (scripts.bundle.js:2711)
at App.broadcast (scripts.bundle.js:2185)
at F._syncing (scripts.bundle.js:10344)
at scripts.bundle.js:10316
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4724)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)

What am I missing here?

Thanks,

angular typescript redactor redactor.js

Answer 1

Answer №1

When using this.counter, keep in mind that this points to the function within init, not the global class. To avoid this confusion, consider using an arrow function instead:

callbacks: {
    init: () => {
      this.counter.count();
    }
    counter: (data: any) => {
      console.log(data);
    }
  }

This solution is relevant only if you are referencing a counter on your component class outside of the redactor context.

Answer 2

When using this.counter, keep in mind that this points to the function within init, not the global class. To avoid this confusion, consider using an arrow function instead:

callbacks: {
    init: () => {
      this.counter.count();
    }
    counter: (data: any) => {
      console.log(data);
    }
  }

This solution is relevant only if you are referencing a counter on your component class outside of the redactor context.

Answer 3

Answer №2

At last, the solution is within my grasp:

const $R: any;
...
...
$R('#editor', {
  plugins: [
    'counter',
    ...
  ],
  callbacks: {
    syncing: function(html: any) {
      this.plugin.counter.count();
    },
    counter: function(data: any) {
      console.log(data);
    }
  }
});

I had to include "plugin" in order to access the specific plugin I needed.

Answer 4

At last, the solution is within my grasp:

const $R: any;
...
...
$R('#editor', {
  plugins: [
    'counter',
    ...
  ],
  callbacks: {
    syncing: function(html: any) {
      this.plugin.counter.count();
    },
    counter: function(data: any) {
      console.log(data);
    }
  }
});

I had to include "plugin" in order to access the specific plugin I needed.

Angular2 plugin for redacting content

Answer №1

Answer №2

Similar questions

Angular 4: Component Inheritance

Assign an event listener to a collection of elements

Error! Element not found in cloned iframe #2460, promise unhandled

Creating Meta tags for Dynamic Routes in a Nuxt 3 Build

Navigating the structure of an Angular project: sorting modules by core, features, and

Creating a Typescript interface that includes keys from another interface

The issue encountered is when the data from the Angular form in the login.component.html file fails to be

Angular's HttpClient.get method seems to have trouble retrieving real-time data from a Firebase database

Creating a class in TypeScript involves declaring a method that takes a parameter of type string, which matches the property name of a specific derived class type

The child element is triggering an output event that is in turn activating a method within the parent

The component is no longer able to locate the imported element when it is being shared

Implementing Express.js allows for the seamless casting of interfaces by the body within the request

What is the best way to save objects in the store (ngrx, ngxs) while preserving their methods functionality?

Angular Component Test Results in TypeError Error Failure

Tips for implementing validation in template-driven form using Ionic 3

If "return object[value1][value2] || default" does not work, it means that value1 is not a recognized property

Turning slide toggle on and off in Angular Material: A step-by-step guide

Primeng Message Service in Angular 2 fails to display message

The search for 'Renderer2' in '@angular/core' did not yield any results

Is it feasible to restrict a generic type using typeguard?