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

问题描述

我刚刚将 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-editor 添加属性[sanitize]="true"=> 没有任何变化。

我错过了什么？

另一个想法

可能，它会剥离所有标签并简单地用p标签包装内容。
但是，如果我在段落之间添加另一个 ' '，它的格式会保持正确。

标签： angularquillngx-quill

我最近遇到了这个问题，当鹅毛笔编辑器在选项卡或步进器中呈现时，这个问题最明显。我使用的解决方案是*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>

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

问题描述

解决方案

推荐阅读