2

我刚刚将 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标签包装内容。
但是，如果我在段落之间添加另一个 ' '，它的格式会保持正确。

4

3 回答 3

3

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

我在使用NbTabsetComponent和ngx- quill使用 Nebular UI 时遇到了同样的问题，我使用nb-tab组件中的lazyload prop解决了这个问题。我认为这个相同的解决方案（使用lazyload）适用于另一个tabset 组件。

<nb-tabset>
  <nb-tab lazyload>
    <quill-editor
      [modules]="editor_modules"
      [(ngModel)]="content"
    ></quill-editor>
  </nb-tab>
</nb-tabset>
于 2020-06-16T20:06:47.777 回答
0

对于较新版本的 Nebular UI (>7.0)，使用lazyLoad(camel case)

<nb-tabset>
  <nb-tab lazyLoad>
    <quill-editor
       ...
    ></quill-editor>
  </nb-tab>
</nb-tabset>
于 2021-10-05T15:46:21.487 回答