如何在 Angular 项目的 Quill 编辑器中更新标题的字体大小值答案

【问题标题】：How to update value of font-size for header in Quill Editor in Angular project如何在 Angular 项目的 Quill 编辑器中更新标题的字体大小值
【发布时间】：2019-08-14 11:51:06
【问题描述】：

我的 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'
  }

【问题讨论】：

标签： angular quill ngx-quill

【解决方案1】：

你必须使用::ng-deep

CSS

::ng-deep .ql-snow .ql-editor h1 {
    font-size: 18px;
}

SCSS

::ng-deep {
   .ql-snow .ql-editor h1 {
    font-size: 18px;
   }
}

【讨论】：

谢谢！我已经花了好几天了！你救了我！

【解决方案2】：

更新：

在 2019 中，我需要做的就是在 HTML 中添加一个 !important 标志。无需使用::ng-deep。其余的都一样

例如：

   .ql-snow .ql-editor h1 {
       font-size: 18px !important;
   }

希望这对某人有所帮助

【讨论】：