CODEWITHSUNDEEP
angularprimengquill
Tuxedo Joe
Tuxedo Joe

Reputation: 962

How to remove tab feature for PrimeNG editor

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?

Upvotes: 2

Views: 2432

Answers (2)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24434

You need to add tab key handler when you create Quill editor currently this not available ,current implemention for p-editor dons't pass any custome configration for quill editor

p-editor

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

I only found this solution for prevent tab key 

  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

Upvotes: 0

DirtyMind
DirtyMind

Reputation: 2571

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.

Upvotes: 2

Related Questions