Плагин счетчика Redactor с Angular2

Я пытаюсь использовать Redactor с некоторыми добавленными плагинами. Проблема в том, что плагин счетчика показывает 0 слов и 0 символов после загрузки страницы.

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

Я попытался использовать обратный вызов «init» для выполнения метода count() плагина счетчика, как показано в документации:

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

... на данный момент все вроде бы в порядке, ошибок компиляции в VSCode нет, но в консоли появляется следующая ошибка:

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)

Что я делаю не так?

Спасибо,


typescript angular redactor redactor.js
person standby954    schedule 09.02.2018    source источник
comment
Извините, я использую не обратный вызов «init», а «changed».   -  person standby954    schedule 09.02.2018

Ответы (2)


arrow_upward
0
arrow_downward

В this.counter this относится к функции в init, а не к глобальному классу. Вместо этого используйте функцию стрелки:

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

это применимо только в том случае, если вы ссылаетесь на counter в своем классе компонентов вне контекста редактора.

person wilsonhobbs    schedule 09.02.2018
comment
Я думаю, что функция стрелки здесь не подходит, потому что в этом случае она говорит [ts] Property 'counter' does not exist on type 'EditorComponent'., что я хотел бы использовать именно контекст редактора, метод count() плагина счетчика. - person standby954; 09.02.2018

arrow_upward
0
arrow_downward

Наконец я нашел решение:

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

Пришлось добавить «плагин», чтобы ссылаться на плагин, которого я хотел достичь.

person standby954    schedule 13.02.2018