QuillJS объединяет последующие p-теги в один с Angular 7 + ngx-quill

Question

Я просто интегрировал quilljs в свое приложение. Единственная проблема, с которой я сталкиваюсь сейчас - это странное поведение с p-тегами.

Например, в моем компоненте я настраиваю реактивную форму:

this.fullDocumentFormGroup = new FormGroup({
        fullDocument: new FormControl('<p>some</p><p>html</p>', [Validators.required])
      });

И в шаблоне:

<form [formGroup]="fullDocumentFormGroup" class="full-document">

  <quill-editor placeholder="Detailed documentation of your invention here..."
                [style]="{'min-height': '250px'}"
                bounds="self"
                formControlName="fullDocument"
                [readOnly]="isProjectLocked()">
  </quill-editor>

</form>

Этот код в конечном итоге устанавливает содержимое редактора следующим образом:

<p>somehtml</p>

Я проверил это с textarea, чтобы проверить, удаляет ли реактивная форма это, и это не так.

Попробовал добавить атрибут в quill-редактор [sanitize]="true" => ничего не меняется.

Что мне не хватает?

ДРУГАЯ МЫСЛЬ

Возможно, он удаляет все теги и просто оборачивает содержимое p теги. Однако, если я добавлю еще один
'между абзацами, он остается правильно отформатированным.

Answer 1

Недавно я столкнулся с этой проблемой, которая в основном проявлялась, когда редактор перьев визуализировался во вкладках или шагах. Решение, которое я использовал, - использовать*ngIf отображать редактор перьев только тогда, когда он находится в поле зрения (альтернатива - запустить его при afterViewInit если то, что я сделал, не совсем подходит вашему проекту)

т.е. в моем случае я использую mat-tabsчтобы показать разные взгляды. Я получаю индекс вкладки с:

<mat-tab-group [selectedIndex]="tabIndex" (selectedIndexChange)="changeIndex($event)">

ts:

changeIndex(index) {
this.tabIndex = index;
}

А затем в компоненте установите его для отображения только тогда, когда tabIndex равен '1'

<ngx-quill *ngIf="tabIndex==1"> </ngx-quill>

Answer 2

У меня была такая же проблема с пользовательским интерфейсом Nebular, используя NbTabsetComponent и ngx-quill, и я решил с помощью lazyload prop в компоненте nb-tab. Я думаю, что это же решение (используйте lazyload) работает с другим компонентом tabset.

<nb-tabset>
  <nb-tab lazyload>
    <quill-editor
      [modules]="editor_modules"
      [(ngModel)]="content"
    ></quill-editor>
  </nb-tab>
</nb-tabset>

Answer 3

У меня была та же проблема, и я решил ее, просто используя тайм-аут перед установкой данных в форму.

Answer 4

Я исправил это поведение, используя хак с использованием:

В HTML:

      <quill-editor formControlName="fullDocument"></quill-editor>

Когда вы устанавливаете это поле в обертке машинописного текстаpatchValueс использованиемsetTimeout:

      setTimeout(() => {
    formGroup.patchValue({fullDocument: fullDocumentHtml});
});

Я даже пытался изменить разделитель строк с<p>к<div>в конфиге Quill, но это совсем не помогло :).

Answer 5

Для более новой версии Nebular UI (>7.0) используйте lazyLoad (случай верблюда)

      <nb-tabset>
  <nb-tab lazyLoad>
    <quill-editor
       ...
    ></quill-editor>
  </nb-tab>
</nb-tabset>