angular - ngx-quill - Only show toolbars when editor has focus

Question

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?

question from:https://stackoverflow.com/questions/65876417/ngx-quill-only-show-toolbars-when-editor-has-focus

Answer 1

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
      ;
    }