从 Froala 2.9 升级到 3 后损坏。0.x Angular

Question

我想知道是否有人在从 Froala 2.9.x 升级到 3.0.x 后遇到类似问题运行，其中代码不再有效。我现在在 Angular / 反应式表单部署中遇到的最大问题是我不再获得对我的组件实例的引用。我之前使用的代码是这样的。

private setFroalaOptions(componentInstance) {
        this.froalaOptions = {
            key: environment.froala.license.version3,
            charCounter: true,
            charCounterCount: true,
            toolbarSticky: false,
            attribution: false,
            // zIndex: 2501,
            // zIndex: 10,
            height: 300,
            ...this.froalaUploadService.initUploadOptions(),
            ...this.froalaUploadService.initImageManagerOptions(),
            events : {
                'froalaEditor.focus' : function(e, editor) {
                    // componentInstance.editorInstance = editor;
                },
                'froalaEditor.blur' : function(e, editor) {
                    // save selection so we can restore just before inserting any element
                    editor.selection.save();
                },
                'froalaEditor.initialized' : function(e, editor) {
                    componentInstance.editorInstance = editor;
                },
                ...this.froalaUploadService.initImageManagerEvents(),
                ...this.froalaUploadService.initUploadEvents(),
            },
            toolbarButtons: ToolbarButtons,
        };
    }

然后我可以调用下面的代码在编辑器的当前光标位置插入值

  addField($event: IServerDropdownOption) {
        if (this.editorInstance) {
            // restore selection so element is inserted in the cursor's last known position
            this.editorInstance.selection.restore();
            this.editorInstance.html.insert(`${$event.value}`);
        }
    }

现在我不再拥有 this.editorInstance 我无法工作，我找不到任何概述可能破坏此功能的任何可能更改的文档。

Answer 1

根据他们的文档，我认为事件函数上下文（即 this）是编辑器实例。

// FROM DOCS
new FroalaEditor('.selector', {
  events: {
    'focus': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    })
  }
});

Link 到文档：https://www.froala.com/wysiwyg-editor/docs/events#focus

这意味着您应该能够执行以下操作：

'focus' : function() {
  // componentInstance.editorInstance = this;
},

您的场景的完整示例：

private setFroalaOptions(componentInstance) {
        this.froalaOptions = {
            key: environment.froala.license.version3,
            charCounter: true,
            charCounterCount: true,
            toolbarSticky: false,
            attribution: false,
            // zIndex: 2501,
            // zIndex: 10,
            height: 300,
            ...this.froalaUploadService.initUploadOptions(),
            ...this.froalaUploadService.initImageManagerOptions(),
            events : {
                'focus' : function() {
                    // componentInstance.editorInstance = this;
                },
                'blur' : function() {
                    // save selection so we can restore just before inserting any element
                    this.selection.save();
                },
                'initialized' : function() {
                    componentInstance.editorInstance = this;
                },
                ...this.froalaUploadService.initImageManagerEvents(), // make sure to update these
                ...this.froalaUploadService.initUploadEvents(), // make sure to update these
            },
            toolbarButtons: ToolbarButtons,
        };
    }

从 Froala 2.9 升级到 3 后损坏。0.x Angular

Broken after upgrading from Froala 2.9 to 3.0.x in Angular

froala

angular