带有Angular的羽毛笔表，不适用于编辑模式答案

【问题标题】：Quill table with Angular, not working on edit mode带有Angular的羽毛笔表，不适用于编辑模式
【发布时间】：2020-08-20 08:16:39
【问题描述】：

我有一个 Angular 应用程序，我有一个表单并使用了 quill-better-table (https://www.npmjs.com/package/quill-better-table)

我已经添加了这里提到的配置 (How do I fix this error I get whenever I try to register quill-better-table with my quill editor component in Angular 8?) 当我处于插入模式时，它可以工作并生成富文本，您可以通过表格也将数据插入数据库现在我想在编辑模式下填充数据时，富文本框不显示内容。

div id="quill">
    <p>Content *</p>
    <quill-editor [styles]="editorStyle" placeholder="Enter Text" formControlName="myfieldCtrl" required>
    </quill-editor>
</div>

【问题讨论】：

请告诉如何在角度 11 中使用 quill..2.0.0-dev-3 进行两种方式绑定。

标签： angular quill

【解决方案1】：

按照我关于如何在 Angular 中正确设置 Quill 的回答：

Integrating Quill text editor in an Angular application

接下来我不确定你如何设置你的角度，但它可能是 DomSanitizer 的问题

我在这里举了一个如何使用 DomSanitizer 的例子，内容是 quill

在您的组件导入中：

import { DomSanitizer } from '@angular/platform-browser'

并制作如下所示的函数

displayNewsfeed(newsfeed: INewsfeed) {
  this.onenewsfeed = newsfeed[0];
  this.textContent = this.HTMLSant(newsfeed[0].NewsfeedContent);
}

HTMLSant(html:string){
  return this.sanitizer.bypassSecurityTrustHtml(html);
}

【讨论】：

【解决方案2】：

我在尝试将包含表格的现有 html 数据呈现给羽毛笔编辑器时遇到了同样的问题。我最终使用了clipboards' dangerouslyPasteHTML method。

【讨论】：