失去了“this"从timece回调

lost "this" in callback from tinymce

本文关键字：timece 回调 quot this 失去      更新时间：2023-09-26

我有一个使用tinyMce作为HTML编辑器的angular2应用程序。唯一的问题是，我需要通过REST API转换html中的url。要做到这一点，我试图从tinyMce使用"urlconverter_callback"，但我失去了对这个的引用，并卡住了:

ngAfterViewInit(): void {
    console.log('tinymce');
    tinymce.init({
        selector: `[data-tinymce-uniqueid=${this.uniqueId}]`,
    theme: "modern",
    skin: 'light',
    height: 768,
    toolbar: 'undo redo | styleselect | bold italic | link image | code',
    plugins: 'code',
        schema: 'html5',
    urlconverter_callback: this.urlConverter,
        setup: ed => {
            ed.on('init', ed2 => {
                if (this.innerValue) ed2.target.setContent(this.innerValue.text);
                this.init = true;
            });
        }
    });
    // I chose to send an update on blur, you may choose otherwise
    tinymce.activeEditor.on('blur', () => this.updateValue());
}
urlConverter(url, node, on_save): string {
    console.log("TinyDirective.urlConverter(%o, %o, %o)", url, node, on_save);
    console.log("TinyDirective.urlConverter: this = %o", this);
    console.log("TinyDirective.urlConverter: this.innerValue = %o", this.innerValue);
    return this.innerValue.url_converter(url);
}

从控制台我可以看到，这不再指向我的指令。因此，我不能访问innerValue属性。

我如何创建一个回调，将有一个正确的引用我的指令?

您可以尝试以下选项之一:

1)在tinymce.init中使用bind 

urlconverter_callback: this.urlConverter.bind(this)

或构造函数内:

constuctor() {
  this.urlConverter = this.urlConverter.bind(this);
}

2)对urlConverter方法使用箭头函数

urlConverter = (url, node, on_save): string => {
  ...
}

或tinymce.init 

urlconverter_callback: (url, node, on_save) => this.urlConverter(url, node, on_save)
相关文章：