How to remove tab feature for PrimeNG editor

Question

PrimeNG's rich text editor uses quill and setting that up through JavaScript has the function to disable tabbing using this code:

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

I can reach the editor in Angular using:

private quill:any;

@ViewChild(Editor) editorComponent: Editor;

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

But how do I use the this.quill object to set tab to false? Any ideas?

Answer 1

Seems like in Primeng we don't have any convenient way to achieve this. It could be there but I didn't find anything. So here I my solution for this. It may not be the best solution but It should solve your purpose.

component.html

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

I am using (onInit) so that we can disable the tab, as soon as editor get loaded into the 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);
      }
}

I just removed all the references with the Key code 9. Which is Tab key. Why I created a new tab object and Pushed it again in bindings, just because whenever you click on tab, mouse pointer should not go any other HTML component. It should be there inside editor only. You can comment this line //event.editor.keyboard.bindings[9].push(this.tab); and see the side effect.

Make sure this will not break your app at any place.