没有工具栏的primeng编辑器

Question

如何在primeNG编辑器上关闭工具栏？

我正在获取编辑器的（onInit）的Editor实例。但是下面似乎没有用。 我从quilljs看到的例子似乎都是在创建一个新的Quill js实例的基础上工作，但在这种情况下我已经有了实例？ 方法editorInitComment确实被调用，但没有错误，它仍然显示工具栏。

HTML：

<p-editor class="quill-comment" [(ngModel)]="comment.body" (onInit)="editorInitComment($event)" [style]="{'height':'90px'}"></p-editor>

打字稿：

editorInitComment= (event) =>{

  this.quill = event.editor;
  const toolbar = this.quill.getModule('toolbar');

       toolbar : false;

Answer 1

您可以像这样使用p-header

<p-editor [(ngModel)]="value">
    <p-header hidden>
      <span class="ql-formats"></span>
    </p-header>
  </p-editor>

这将显示标题但为空，然后您可以使用ng-deep更改css

::ng-deep .ql-toolbar.ql-snow{
 display :none;
}

Answer 2

如果要使用适当的边框，请使用以下代码。 PrimeNg版本：5

HTML：

 <p-editor #editor formControlName="editorValue">
        <p-header> </p-header>    
 </p-editor>

CSS：

::ng-deep .ql-toolbar.ql-snow {
    padding: 0px;
    border: none;
}

::ng-deep .ql-container.ql-snow {
    border-top: 1px solid #ccc;
    height: 320px; //pls change height as per your need.
}