QuillJS使用Angular 7 + ngx-quill将后续的p标签合并为一个

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进行了测试，以检查反应形式是否将其剥离出来。

尝试向属性编辑器[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>