没有工具栏的primeng编辑器答案

【问题标题】：primeng editor without toolbar没有工具栏的primeng编辑器
【发布时间】：2018-06-25 22:23:39
【问题描述】：

如何关闭 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;

【问题讨论】：

如果您不想要工具栏，为什么不使用InputTextarea？
这很好，我在某处读到他们使用相同的文本编辑器来显示 cmets。但是 tbh 真的找不到这样做的理由:)。我会试试你的想法。谢谢你
实际上想起来了，我正在尝试重新加载我保存在数据库中的内容。因此，使用 quilleditor 我正在保存可以重新加载的 detla，以便在保存时在正确的位置等显示图片。
你试过用 CSS 隐藏它吗？
我想要它没有工具栏而不仅仅是一个文本区域的原因是因为我不希望它显示已经添加的样式元素。

标签： editor toolbar primeng quill

【解决方案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;
}

【讨论】：

【解决方案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.
}

【讨论】：

这种样式非常适合在显示和隐藏标题之间切换！