如何设置 rich html 编辑器组件的高度

Question

我在 angular 组件中使用功能丰富的 html 编辑器 Quill。我的问题是如何设置编辑区的高度。

我正在使用 angular-7、bootstrap 和 font-awesome（所有最新）

我在文档中找不到任何相关内容。

感谢

约翰

下面是我的表格和表格的例子

<form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
<div class="form-group">
    <label for="htmlContent">Content</label>
    <quill-editor id="editor" name="htmlContent" [(ngModel)]="model.htmlContent" #htmlContent="ngModel">
    </quill-editor>
</div>
<div class="form-group">
    <button class="btn btn-primary mr-2">Opslaan</button>
    <button (click)="cancel()" type="button" class="btn btn-secondary mr-2">Annuleer</button>
</div>

Answer 1

您始终可以检查元素以查看绑定了哪些类。 Quill 的文本区域有 .ql-editor。所以，它看起来像：

.ql-snow .ql-editor{height: 500px;}

Answer 2

添加这个例如：

 [style]="{height: '250px'}"

给你的羽毛笔编辑器

<quill-editor id="editor" name="htmlContent" [(ngModel)]="model.htmlContent" 
[style]="{height: '250px'}" #htmlContent="ngModel">

如何设置 rich html 编辑器组件的高度

How to set height of rich html editor component

angular

quill