TinyMCE angular код и оверлеи ссылок не работают в реактивной форме angular - PullRequest
Новая
       164

TinyMCE angular код и оверлеи ссылок не работают в реактивной форме angular

0 голосов
/ 04 августа 2020

у нас есть следующая настройка, которая, кажется, перекрывает друг друга:

  • после tinyMCE angular документы интеграции
  • angular реактивные формы (angular 9), которые генерируются динамически на основе типа, например. html: 
private generateFormConfig() {
    const formConfig = {};

    // ...

    formConfig[controlId] = new FormControl(
        value,
        Validators.compose(formValidators)
    );

    // ...
    this.form = this.formBuilder.group(formConfig);
}
  • форма затем отображается внутри модального компонента ioni c также с динамическим c * ngFor: 
<ng-template #formItems let-definition="definition" let-data="data" let-path="path" let-errors="errors">
  <div [formGroup]="form">
    <div *ngFor="let formItemConf of definition">
      <div [ngSwitch]="formItemConf.input" [class]="'input-wrp input-wrp--' + formItemConf.input">

        <ion-input *ngSwitchDefault [type]="formItemConf.type" [formControlName]="getFormItemId(path, formItemConf.id)" class="form-control"></ion-input>

        <editor *ngSwitchCase="'html'" [id]="formItemConf.id" [init]="{
              height: 300,
              resize: true,
              convert_urls: false,
              menubar: 'edit view format',
              plugins: 'paste link lists code',
              toolbar: 'undo redo |  formatselect bold italic underline | bullist numlist | link | alignleft aligncenter alignright alignjustify | forecolor backcolor | paste removeformat | code',

              table_appearance_options: false,
              table_resize_bars: false,
              table_style_by_css: true,

              paste_data_images: true
            }" [initialValue]="getFormValue(formItemConf, data)" [formControlName]="getFormItemId(path, formItemConf.id)">
        </editor>

        <ion-select *ngSwitchCase="'select'" [formControlName]="getFormItemId(path, formItemConf.id)" class="form-control">
          <ion-select-option *ngFor="let option of formItemConf.options" [value]="option.value">{{option.label | translate}}</ion-select-option>
        </ion-select>

        <ion-checkbox *ngSwitchCase="'boolean'" [formControlName]="getFormItemId(path, formItemConf.id)"></ion-checkbox>

        <!-- ... and so on -->

        <div class="error" *ngIf="hasError(errors, formItemConf.id)">{{errors[formItemConf.id]}}</div>

      </div>
    </div>
  </div>
</ng-template>

Это работает безупречно, но если мы попытаемся использовать ссылку или код плагин tinymce, которые сами по себе используют модальные окна, это будет невозможно редактировать контент. Насколько я понимаю, причина в том, что базовые входы захватывают фокус формы, если я пытаюсь щелкнуть вход:

введите описание изображения здесь

Входы наложения tinyMCE становятся непригодными для использования.

Любая идея, в чем может быть причина и как ее исправить, была бы очень признательна :) Возможно, это «особенность» из angular реактивных форм и могут быть отключены?

...