如何在 Angular 项目的 Quill Editor 中为 header 更新 font-size 的值
How to update value of font-size for header in Quill Editor in Angular project
我的 angular 项目中有一个羽毛笔编辑器。
一切都快完成了,但我需要将 H1 的字体大小更新为 18px。
在主题中它映射到 2em (~26px)
我尝试了很多 css 选择器,但找不到合适的选择器
<quill-editor placeholder="Text" [modules]="quillConfig" formControlName="text" [style]="{height: '250px'}">
</quill-editor>
<div class="quill-toolbar">
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-header" value="1"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
</span>
</div>
quillConfig = {
toolbar: '.quill-toolbar'
}
你必须使用::ng-deep
CSS
::ng-deep .ql-snow .ql-editor h1 {
font-size: 18px;
}
SCSS
::ng-deep {
.ql-snow .ql-editor h1 {
font-size: 18px;
}
}
更新:
在 2019 中,我需要做的就是向 HTML 添加一个 !important
标志。无需使用 ::ng-deep
。其余相同
例如:
.ql-snow .ql-editor h1 {
font-size: 18px !important;
}
希望这对某人有所帮助
我的 angular 项目中有一个羽毛笔编辑器。 一切都快完成了,但我需要将 H1 的字体大小更新为 18px。 在主题中它映射到 2em (~26px) 我尝试了很多 css 选择器,但找不到合适的选择器
<quill-editor placeholder="Text" [modules]="quillConfig" formControlName="text" [style]="{height: '250px'}">
</quill-editor>
<div class="quill-toolbar">
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-header" value="1"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
</span>
</div>
quillConfig = {
toolbar: '.quill-toolbar'
}
你必须使用::ng-deep
CSS
::ng-deep .ql-snow .ql-editor h1 {
font-size: 18px;
}
SCSS
::ng-deep {
.ql-snow .ql-editor h1 {
font-size: 18px;
}
}
更新:
在 2019 中,我需要做的就是向 HTML 添加一个 !important
标志。无需使用 ::ng-deep
。其余相同
例如:
.ql-snow .ql-editor h1 {
font-size: 18px !important;
}
希望这对某人有所帮助