Angular HTML 具有双向绑定的 Quill 编辑器中的字段

Question

有人知道我如何在 Quill 中包含 HTML 字段吗？我想让数字字段与文本内联，并为 Angular 使用双向绑定。绑定到模型时，Quill 似乎删除了我的输入字段。

 this.myValue = 5;
 this.myModelVar = "Here is a text box <input [(ngModel)]='myValue' name='myvalue' type='text'></input>

我对任何事情都持开放态度，包括创建额外的可观察对象、自己处理组件的通信 in/out，无论我需要做什么。

但是，在这一点上，我正在努力让输入框出现。任何帮助将不胜感激。

Answer 1

我在项目存储库中找到了答案，作者声明他们不支持 quill html。真可惜，所以我去了另一个编辑器。

Answer 2

我发现了一些丑陋的 hack 如何将包含 HTML 标签的字符串注入到 quill 编辑器中。

将 quill 编辑器值绑定到新的属性 [(ngModel)]="valueBind"
绑定后使用在 quill 编辑器显示之前发生的一些事件（在我的例子中 mat-tab-group:selectedIndexChange)，并将原始 "value" 属性克隆到 "valueBind" 属性 - 现在 quill 编辑器正确显示值，包括 HTML 标签
在保存操作之前，将 "valueBind" 属性复制回 "value" 属性。

Answer 3

<quill-editor name="quilleditor" [(ngModel)]="course.extraDescription"
                          [styles]="{'min-height': '120px'}">
</quill-editor>

确保导入 { Forms } 并提供“名称”属性。提示：检查浏览器控制台。调试愉快:)

Angular HTML Fields in Quill Editor with two way Binding