CODEWITHSUNDEEP
angularquillngx-quill
Bobby Ortiz
Bobby Ortiz

Reputation: 3147

ngx-quill - Only show toolbars when editor has focus

I have an Angular application that uses many Quill editors. To reduce the noise on the pages, I would like to only show the quill toolbars when the specific editor has focus. Is there a simple way to do this?

Upvotes: 1

Views: 3910

Answers (1)

Msk Satheesh
Msk Satheesh

Reputation: 1536

There is no method for hide or show the toolbar after editor initializes. but with the help of css we able to hide and show the toolbar.

editor.component.html

<quill-editor [(ngModel)]="htmlText"
     placeholder="Enter Text"
     [modules]="quillConfig"
     (onSelectionChanged)="onSelectionChanged($event)"></quill-editor>

editor.component.ts

  onSelectionChanged = (event) =>{
     if(event.oldRange == null){
        this.onFocus(event);
     }
     if(event.range == null){
        this.onBlur(event);
     }
  }

  onFocus(event) {
    event.editor.theme.modules.toolbar.container.style.visibility = "visible";
  }

  onBlur(event) {
    event.editor.theme.modules.toolbar.container.style.visibility = "hidden";
  }

editor.component.css

    :host ::ng-deep .ql-toolbar{
      visibility: hidden;
    }
    
    :host ::ng-deep .ql-container {
      border-top: 1px solid #ccc
       !important
      ;
    }

Upvotes: 2

Related Questions