Как мне заставить css-фокус работать с primeng textarea?

Я не могу заставить этот CSS работать в моем текстовом поле PrimeNG.

Вот мой CSS. Недопустимые функции работают, но не зависает.

.is-invalid {
  .ql-toolbar.ql-snow {
    border: 1px solid $red !important;
    border-radius: 0;

  }

  .ql-toolbar.ql-snow:focus {
    -webkit-box-shadow: 0 0 0 .12rem rgba(226, 28, 80, .25) !important;
    box-shadow: 0 0 0 .12rem rgba(226, 28, 80, .25) !important;
    background: #fefafa;
  }

  .ql-container.ql-snow {
    border: 1px solid $red !important;
    border-top: 0px !important;

  }

  .ql-container.ql-snow:focus {
    -webkit-box-shadow: 0 0 0 .12rem rgba(226, 28, 80, .25) !important;
    box-shadow: 0 0 0 .12rem rgba(226, 28, 80, .25) !important;
    background: #fefafa;
  }
}

А вот и мой html, включающий элемент PrimeNG:

<p-editor [ngClass]="{'editor': true,
                      'is-invalid': form.get('omoss').invalid && form.get('omoss').touched,
                      'is-valid': form.get('omoss').dirty && form.get('omoss').valid}"
          [(ngModel)]="foretagsprofil.omoss"
          formControlName="omoss"
          placeholder="Skriv en intresseväckande beskrivning av företaget (max 1000 tecken)."
          [style]="{'height':'350px', 'width':'100%'}"
          [attr.aria-invalid]="form.get('omoss').invalid && form.get('omoss').touched" tabindex="0">
  <p-header tabindex="0">
    <span ngClass="ql-formats">
      <button ngClass="ql-bold" aria-label="Fet" title="Fet"></button>
      <button ngClass="ql-italic" aria-label="Kursiv" title="Kursiv"></button>
    </span>
  </p-header>
</p-editor>
2
0
600
1

Ответы 1

поскольку p-редактор основан на библиотеке quill js, вы можете получить доступ к библиотеке quill через компонент редактора, чтобы вызвать функцию фокуса, подобную этой

в html

 <p-editor #textEditor [ngClass]="{'editor': true,
                              'is-invalid': form.get('omoss').invalid && form.get('omoss').touched,
                              'is-valid': form.get('omoss').dirty && form.get('omoss').valid}"
                  [(ngModel)]="foretagsprofil.omoss"
                  formControlName="omoss"
                  placeholder="Skriv en intresseväckande beskrivning av företaget (max 1000 tecken)."
                  [style]="{'height':'350px', 'width':'100%'}"
                  [attr.aria-invalid]="form.get('omoss').invalid && form.get('omoss').touched" tabindex="0">
          <p-header tabindex="0">
            <span ngClass="ql-formats">
              <button ngClass="ql-bold" aria-label="Fet" title="Fet"></button>
              <button ngClass="ql-italic" aria-label="Kursiv" title="Kursiv"></button>
            </span>
          </p-header>
        </p-editor>

в component.ts

 import { ViewChild } from '@angular/core';
    @ViewChild('textEditor') textEditor: Editor;
     quill: any;
    ngOnInit(){
       this.quill = this.textEditor.getQuill();
       this.quill.focus();
    }

Хорошо, спасибо за вклад. Куда мне тогда поместить свой CSS? Можно добавить css в файл ts?

Tuxedo Joe 26.10.2018 09:40

Другие вопросы по теме