Как обновить значение font-size для заголовка в редакторе Quill в проекте Angular

У меня в угловом проекте есть гусиный редактор. И все почти готово, но мне нужно обновить размер шрифта для H1 на 18 пикселей. В теме, сопоставленной с 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
person Zelena    schedule 14.08.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы должны использовать ::ng-deep

CSS

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

SCSS

::ng-deep {
   .ql-snow .ql-editor h1 {
    font-size: 18px;
   }
}
person devpato    schedule 14.08.2019
comment
Спасибо! Я провел несколько дней! Вы спасли меня! - person Zelena; 14.08.2019

arrow_upward
1
arrow_downward

Обновление:

В 2019 все, что мне нужно было сделать, это добавить флаг !important в HTML. Нет необходимости использовать ::ng-deep. В остальном то же самое

Например:

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

Надеюсь, это кому-то поможет

person Brad Ahrens    schedule 30.10.2019