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

【问题标题】：ngx-quill - Only show toolbars when editor has focusngx-quill - 仅在编辑器具有焦点时显示工具栏
【发布时间】：2021-01-26 13:35:28
【问题描述】：

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

【问题讨论】：

标签： angular quill ngx-quill

【解决方案1】：

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

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

【讨论】：