如何设置富HTML编辑器组件的高度

时间:2019-04-07 09:44:24

标签: angular quill

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

我正在使用angular-7,bootstrap和font-awesome(均为最新版本)

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

谢谢

Johan

下面是我的表单和表单示例

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

enter image description here

2 个答案:

答案 0 :(得分:1)

为此添加例如:

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

发送给您的羽毛笔编辑器

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

答案 1 :(得分:0)

您始终可以检查元素以查看哪些类绑定到该元素。笔芯的文本区域带有.ql-editor。因此,它看起来像:

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