Question

我有一个带有tinyMce的angular2应用程序作为HTML编辑器。唯一的问题是，我需要通过我的REST API转换html中的URL。为此，我尝试使用＆＃34; urlconverter_callback＆＃34;来自tinyMce，但我放弃了对此的引用而陷入困境：

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属性。

如何创建一个能够正确引用我的指令的回调？

Answer 1

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

1）在bind

中使用tinymce.init

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)

失去了＃34;这个＆＃34;来自tinymce的回调

1 个答案: