angular - ngx-quill - 仅在编辑器具有焦点时显示工具栏

Question

我有一个使用许多 Quill 编辑器的 Angular 应用程序。为了减少页面上的噪音，我只想在特定编辑器具有焦点时显示羽毛笔工具栏。有没有一种简单的方法可以做到这一点？

Answer 1

编辑器初始化后没有隐藏或显示工具栏的方法。但是在 css 的帮助下，我们可以隐藏和显示工具栏。

editor.component.html

<quill-editor [(ngModel)]="htmlText"
     placeholder="Enter Text"
     [modules]="quillConfig"
     (onSelectionChanged)="onSelectionChanged($event)"></quill-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
      ;
    }