带有 Angular2 的编辑器计数器插件答案

【问题标题】：Redactor counter plugin with Angular2带有 Angular2 的编辑器计数器插件
【发布时间】：2018-02-09 13:32:14
【问题描述】：

我正在尝试将 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)

我做错了什么？

谢谢，

【问题讨论】：

抱歉，我使用的不是“init”回调，而是“已更改”。

标签： angular typescript redactor redactor.js

【解决方案1】：

在this.counter中，this指的是init中的函数，而不是全局类。改用箭头函数：

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

这仅适用于您在组件类上引用 counter 时，在编校上下文之外。

【讨论】：

我认为箭头函数在这里不好，因为如果它说[ts] Property 'counter' does not exist on type 'EditorComponent'.，我想完全使用编辑器上下文，计数器插件的 count() 方法。

【解决方案2】：

终于找到了解决办法：

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

必须添加“插件”来引用我想要达到的插件。

【讨论】：