没有工具栏的primeng编辑器

Question

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

我正在获取编辑器的 (onInit) 的编辑器实例。然而下面的似乎不起作用。 我从 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

如果您想要正确的边框，请使用下面的代码。 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.
}

Answer 2

你可以像这样使用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 3

添加“p-editor-hide-toolbar”类：

<p-editor [(ngModel)]="myModel" class="p-editor-hide-toolbar">
  <ng-template pTemplate="header">
   <span class="ql-formats">
     <button type="button" class="ql-bold" aria-label="Bold"></button>              
  </span>
 </ng-template>
</p-editor>

此 CSS 将永久隐藏工具栏。

.p-editor-hide-toolbar {
    .p-editor-container .p-editor-toolbar.ql-snow {
        /* border: 1px solid #dee2e6; */
        display: none;
    }

    .ql-toolbar.ql-snow + .ql-container.ql-snow {
        border-top-color: rgb(222, 226, 230);
        border-top-style: solid;
        border-top-width: 1px;
    }
}

如果您不进行编辑，此 CSS 将隐藏工具栏。

.p-editor-hide-toolbar:not(:focus-within) {
    .p-editor-container .p-editor-toolbar.ql-snow {
        /* border: 1px solid #dee2e6; */
        display: none;
    }

    .ql-toolbar.ql-snow + .ql-container.ql-snow {
        border-top-color: rgb(222, 226, 230);
        border-top-style: solid;
        border-top-width: 1px;
    }
}

Answer 4

html：

<p-editor formControlName="bodyDetail"  [readonly]="true" [modules]="modules">
    <ng-template pTemplate="header" >
    </ng-template>
</p-editor>

ts：

modules = {
    "toolbar": false
}