4

I have a quill editor in my angular project. And all almost done, but I need update font size for H1 for 18px. In the theme it mapped to 2em (~26px) I have try a lot of css selectors but cant find out right selector

<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'
  }
Zelena
  • 63
  • 8

2 Answers2

3

Update:

In 2019, all I needed to do was add an !important flag to the HTML. No need to use ::ng-deep. The rest is the same

For example:

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

Hope this helps someone

Brad Ahrens
  • 4,864
  • 5
  • 36
  • 47
2

You have to use ::ng-deep

CSS

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

SCSS

::ng-deep {
   .ql-snow .ql-editor h1 {
    font-size: 18px;
   }
}
Patricio Vargas
  • 5,236
  • 11
  • 49
  • 100