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

我使用 NbTabsetComponent 和 ngx-羽毛笔在Nebular UI上遇到了同样的问题，并且在 nb中使用 lazyload 道具解决了-tab 组件。我认为，同一解决方案（使用lazyload）可用于另一个tabset组件。

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

Answer 2

我最近遇到了这个问题，当在选项卡或步进器中渲染主轴编辑器时，这一问题最明显。我使用的解决方案是仅在视图中使用*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>

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

2 个答案: