时间戳

首页 > 解决方案 > 在 Angular 中从 Froala 2.9 升级到 3.0.x 后损坏

angular - 在 Angular 中从 Froala 2.9 升级到 3.0.x 后损坏

问题描述

我想知道从 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我无法工作，并且我找不到任何文档来概述可能破坏此功能的任何可能的更改。

标签： angularfroala

解决方案

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

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

文档链接：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,
        };
    }

推荐阅读