angular - 如何删除 PrimeNG 编辑器的选项卡功能

Question

PrimeNG 的富文本编辑器使用 quill，并通过 JavaScript 设置它，具有使用以下代码禁用 Tab 键切换的功能:

keyboard: {
    bindings: {
        tab: false,
        handleEnter: {
            key: 13,
            handler: function() {
                // Do nothing
            }
        }
    }
}

我可以使用以下方式联系 Angular 中的编辑器:

private quill:any;

@ViewChild(Editor) editorComponent: Editor;

ngAfterViewInit() {
   this.quill = this.editorComponent.quill;
}

但是如何使用 this.quill 对象将 tab 设置为 false？有什么想法吗？

Answer 1

似乎在 Primeng 中我们没有任何方便的方法来实现这一点。它可能在那里，但我什么也没找到。所以这是我的解决方案。它可能不是最好的解决方案，但它应该可以解决您的目的。

组件.html

<p-editor [style]="{'height':'320px'}" (onInit)="editorcall($event)"></p-editor>

我正在使用 (onInit)，以便我们可以在编辑器加载到 DOM 后立即禁用该选项卡。

组件.ts

export class EditorComponent {
     public tab = { 
          key:9,
          handler: function() {
              return false;
          }
    };
    editorcall(event:any){
        event.editor.keyboard.bindings[9].length = 0;
        event.editor.keyboard.bindings[9].push(this.tab);
      }
}

我刚刚删除了所有带有键代码 9 的引用。这是 Tab 键。 为什么我创建了一个新的选项卡对象并在绑定(bind)中再次推送它，只是因为每当您单击选项卡时，鼠标指针不应该移动到任何其他 HTML 组件。它应该只存在于编辑器内部。 您可以注释此行 //event.editor.keyboard.bindings[9].push(this.tab); 并查看副作用。

确保这不会在任何地方破坏您的应用程序。