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

How to remove tab feature for PrimeNG editor

PrimeNG 的富文本编辑器使用 quill 并通过 JavaScript 设置它具有使用此代码禁用制表符的功能:

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 对象将选项卡设置为 false?有什么想法吗?

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

component.html

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

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

component.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 键。 为什么我创建了一个新的选项卡对象并在绑定中再次推送它,只是因为无论何时单击选项卡,鼠标指针都不应该移动到任何其他 HTML 组件。它应该只存在于编辑器中。 你可以评论这一行 //event.editor.keyboard.bindings[9].push(this.tab); 并查看副作用。

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

您需要在创建 Quill 编辑器时添加 Tab 键处理程序,目前这不可用,p-editor 的当前实现不通过任何 quill 编辑器的自定义配置

p-editor

this.quill = new Quill(editorElement, {
  modules: {
      toolbar: toolbarElement
  },
  placeholder: this.placeholder,
  readOnly: this.readonly,
  theme: 'snow',
  formats: this.formats
});

我只找到了防止 Tab 键的解决方案

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

     this.quill.keyboard.bindings[9].unshift({
        key: 9,
        handler: function (range) {
          console.log('tab is disabled');
          return false;
        }
      });
    }
  }

stackblitz demo

key-bindings